jquery源码解读 (二) 笔记

最新推荐文章于 2024-10-31 15:56:11 发布

没入门到放弃

最新推荐文章于 2024-10-31 15:56:11 发布

阅读量224

点赞数 2

文章标签： js jquery javascript

本文链接：https://blog.csdn.net/qq_35898059/article/details/103966354

版权

本文深入探讨jQuery源码的实现逻辑，重点讲解如何通过构造函数和extend方法为jQuery添加自定义方法，如each遍历函数。通过具体示例代码，展示了如何使用extend来扩展jQuery的功能。

摘要由CSDN通过智能技术生成

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);
});