jQuery理解源码（三）笔记

jQuery实现另一类方法（笔记）

还有一类方法， 是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;