jquery源码解读（一）

jquery源码解读，实现大概框架（一）

​ jquery是一个库，封装了很多方法。为的就是更加方便使用。

​

​ 首先：分析， 第一条。 他们有两类方法，

一种是 $ . 直接调用方法 （ 例如：$.each() ）

另一种是 $(‘ Selector’)调用方法 (例如：$(‘div’).html() )

首先实现， $(‘Selector’)方法：

<div>1</div>
<div>2</div>
<div>3</div>
<script src="js/jquery-1.7.2.js"></script>
<script>
    // 获得jQuery对象
    console.log($('div'));
</script>

是一个返回的是一个init的类数组。那么首先我们需要这样返回一个对象。

var jQuery = function(selector) {
    return new init(selector);
}

var init = function(selector) {

}

    // 验证
    console.log(jQuery('div'));

但是，此时暴露了另一个问题， init这个构造函数，是暴露在全局的。污染全局变量。（我们这是一个类库。如果项目很大，引入我们的类库，发现全局变量冲突了，我认为这就是污染全局变量了。）

这是，我们需要把变量放到对象上， 此时就可以 使用 jQuery.fn

jQuery.fn = {
    init  : function(selector){
        var doms = document.querySelectorAll(selector);
        for(var i = 0; i < doms.length; i++) {
            this[i] = doms[i];
            // this.length++;
        }
        this.length = doms.length;
        this.selector = selector;
    },
    
}

我们知道，返回的是类数组。

此时我们需要对象变成类数组，需要三个条件

1、有length属性

2、有索引

3、有一个增强数数组的方法（例如Array的splice）

​ （1、有length属性

​ 2、 有索引

​ 3、需要有一个增强数组的方法（例如 Array中的splice） ）

jQuery.fn = {
    length: 0,
    splice: Array.prototype.splice,
    init  : function(selector){
        var doms = document.querySelectorAll(selector);
        for(var i = 0; i < doms.length; i++) {
            this[i] = doms[i];
            // this.length++;
        }
        this.length = doms.length;
        this.selector = selector;
    },
    
}

现在执行 最终的一步，改变指向(这步非常精髓。我感觉jquery的精髓就在这些指向上了)

 // 将对象变成类数组
jQuery.fn.init.prototype = jQuery.fn;

这样我们就实现了

常精髓。我感觉jquery的精髓就在这些指向上了)

 // 将对象变成类数组
jQuery.fn.init.prototype = jQuery.fn;

这样我们就实现了