jQuery源码学习记录

162 阅读1分钟
  • 整个文档是一个自执行函数,下面大致列出了个人理解的jQuery框架结构:
    (function (global, factory) {
        ...
        
        factory(global);
    }) (typeof window !== 'undefined' ? window : this, function (window, noGlobal) {
        // global如果不是window,则是运行jquery代码环境的global
        ...
        //jQuery的定义, selector即使用$(selector)获取元素时传入的值,在jQuery.fn.init中处理
        v = function (selector, context) {
            return new jQuery.fn.init(selector, context);
        }
        
        //定义jQuery原型
        jQuery.fn = jQuery.prototype = {
            ...
        }
        
        //jQuery生成API各种方法的函数,自定义jQuery插件也是使用这个方法生成的
        jQuery.extend = jQuery.fn.extend = function () {
            ...
        }
        
        //生成各种API方法,在jQuery中大量使用,整个jQuery的API就是这样产生的
        jQuery.extend({ ... });
        jQuery.fn.extend({ ... });
        
        //jQuery.fn.init方法
        jQuery.fn.init = function (selector, context, root) {
            // 排除:$(""), $(null), $(undefined), $(false)这些参数
            if ( !selector ) {
                return this;
            }
            if (type selector === 'string') {
                //处理参数为字符串的各种情况
                ...
            } else if (selector.nodeType) {
                //处理参数为DOM元素的情况
                ...
            } else if (isFuntion(selector)) {
                //处理参数为函数的情况,不传root就是立即执行该函数,传入root的情况还未研究
                return root.ready !== undefined ? root.ready( selector ) : selector( jQuery );
            }
        }
        ...
        //window中使用jQuery,$可以代替jQuery
        window.jQuery = window.$ = jQuery;
    })