jquery源码解读二

jquery源码解读（二）

首先实现 $ . 直接调用方法 （ 例如：$.each() ）

我们这里的jQuery是什么呢？是一个构造函数。所以不能往原型上添加方法。

构造函数本身就是一个对象， 函数都是对象。

jQuery.each() 意味着 为这个构造函数添加一个方法。

html就用简单的三个div。

<div>1</div>
<div>2</div>
<div>3</div>

var jQuery = function(selector) {
    return ;
};
    // 给jQuery添加方法
 jQuery.each = function(dom, fn) {
     for(var i = 0; i < dom.length; i++) {
          fn(i, dom[i]);
        }
    }
var div = document.querySelectorAll('div');
jQuery.each(div, function(index, value){
    console.log(index , value);
});

结果：

但是呢， 方法是非常多的， jQuery使用的方式是 添加一个属性。jQuery的属性extend， 这个扩展将传过来的对象，改变指向，指到了jQuery身上，也就是为jQuery添加方法。

var jQuery = function() {
    return ;
};
// 定义一个函数
jQuery.extend = function(obj) {
    console.log(obj);
    // 传过来的是对象的集合，使用for in  将添加的方法， 放到jQuery身上
    for(var i in obj) {
        // jQuery添加方法
        this[i] = obj[i];
    }
}
// 相当于函数的执行
jQuery.extend({
    each:function(dom, fn) {
        for(var i = 0; i < dom.length; i++) {
            fn(i, dom[i]);
        }
    }
});
var div = document.querySelectorAll('div');
jQuery.each(div, function(index, value){
    console.log(index , value);
});

还有一类方法， 是jQuery原型的方法 例如 jQuery(‘div’).html(); 在上一篇讲到，实现jQuery的构造器。

那么就是说 jQuery(‘div’) 就是 jQuery.prototype的实例

连接： https://blog.csdn.net/qq_35898059/article/details/103950260

那我们继续实习，实例的方法

这里有一个注意点：

​ 通常我们的思路是 要实现 jquery.each()，为jquery原型链上添加的方法。以供实例使用。

注意：是给实例使用。

也就是可以说实例可以调用的方法，放在原型链上就可以了

// 定义一个函数
jQuery.fn.extend = function(obj) {
        for (var i in obj) {
            // this谁调用指向谁
            this[i] = obj[i];
        }
 }

// 函数的实现
jQuery.prototype.extend({
    html: function(val) {
        if (val === undefined) {
            // 读取数据
            return this[0].innerHTML;
        } else {
            // 写入数据
            for (var i = 0; i < this.length; i++) {
                this[i].innerHTML = val;
            }
        }
    }
});

jQuery.protorype 像这样的原型暴露或者添加方法不好。

整合这两种方法：

// 函数的定义
jQuery.extend = jQuery.fn.extend = function(obj) {
    for (var i in obj) {
        // this谁调用指向谁
        this[i] = obj[i];
    }
}
// 函数的实现
// 相当于函数的执行
jQuery.extend({
    each:function(dom, fn) {
        for(var i = 0; i < dom.length; i++) {
            fn(i, dom[i]);
        }
    }
});
jQuery.prototype.extend({
    html: function(val) {
        if (val === undefined) {
            // 读取数据
            return this[0].innerHTML;
        } else {
            // 写入数据
            for (var i = 0; i < this.length; i++) {
                this[i].innerHTML = val;
            }
        }
    }
});

那么所有方法的整合就为：

<div>1</div>
<div>2</div>
<div>3</div>

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

jQuery.fn = jQuery.prototype = {
    // 长度属性
    length: 0,
    // 添加增强数组的方法，splice
    splice: Array.prototype.splice,

    init: function(selector) {
        var doms = document.querySelectorAll(selector);
        // return doms;
        for (var i = 0; i < doms.length; i++) {
            this[i] = doms[i];
        }
        // 添加length属性
        this.length = length;
        // 添加selector属性
        this.selector = selector;
    },
};

// 产生的jQuery对象，实则为init类产生的对象，init类中的对象要使用jQuery.prototype的方法
jQuery.fn.init.prototype = jQuery.fn;

// 函数的定义
jQuery.extend = jQuery.fn.extend = function(obj) {
    for (var i in obj) {
        // this谁调用指向谁
        this[i] = obj[i];
    }
}
// 函数的实现
// 相当于函数的执行
jQuery.extend({
    each:function(dom, fn) {
        for(var i = 0; i < dom.length; i++) {
            fn(i, dom[i]);
        }
    }
});
jQuery.prototype.extend({
    html: function(val) {
        if (val === undefined) {
            // 读取数据
            return this[0].innerHTML;
        } else {
            // 写入数据
            for (var i = 0; i < this.length; i++) {
                this[i].innerHTML = val;
            }
        }
    }
});

// 又因为jQuery中   jQuery 和 $指向是同一个地址， 你可以打印看看
	window.$ = jQuery;