jQuery 总体源码结构笔记

最新推荐文章于 2021-05-18 16:24:10 发布

原创最新推荐文章于 2021-05-18 16:24:10 发布 · 295 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #源码 #结构

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文详细解析了jQuery的源码结构，介绍了其自调用函数的最外层封装方式，如何通过构造函数创建实例，以及如何简化标识符并将其赋值给全局变量。通过本文，读者可以了解到jQuery的核心组织方式及其设计原理。

jQuery 总体源码结构笔记

// 最外层是一个自调用函数
( function( window,undefined ){
   // 声明一个jQuery构造函数
   var jQuery = ( function(){
        // 将jQuery构造函数覆盖改成实例
        var jQuery = function(){
            // 说明我们使用的jQuery对象并不是直接使用jQuery构造函数构造的，只是两者的原型一样而已
            return new jQuery.fn.init();   
        }
        // 将jQuery.prototype简写为jQuery.fn
        jQuery.fn = jQuery.prototype = {
            constructor = jQuery,
            // 初始化jQuery对象
            init: function(){...}
        }
        // 构造jQuery实例的时候重新制定了init函数的原型
        jQuery.fn.init.prototype = jQuery.fn;
        jQuery.extend = jQuery.fn.extend = function(){...};
        jQuery.extend({...});
        return jQuery;
   } )();
   // 添加全局变量$和jQuery,两者都是一个实例，并不是构造函数
    window.jQuery = window.$ = jQuery;  
} )(window);

总结： 1.在函数jQuery()函数内部使用new创建一个实例；
2.jQuery实例不是直接有jQuery函数构造，而是通过一个init函数间接实现，为了不实例化jQuery函数中那些在内部使用的方法和属性；
3.对一些太长的标识符进行简缩比如jQuery.fn,$;
4.将jQuery实例付给全局变量jQuery
5.传入window对象，变成局部变量，来缩短查找window对象时候搜索的作用域链长度。
6.设置形参undefined可以起到缩短搜索的作用域链，而不传入参数是因为，外部的undefined可能存在被个人修改，不传入时它的默认值就是undefined，这一最保险