jquery源码分析

发布时间:2013-08-16 19:15:00作者:左潇龙阅读(1314 )评论(4)

             作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可。

             前段时间上班无聊之时,研究了下jquery的源码。现在记录下自己的成果,分享一下。

             下面是我自己琢磨和编写的jquery模型,里面有我所写的注释。

    /*
     * my-jquery-1.0
     */
    /*
     * 网上也有很多实现的版本,不过这是我在我自己的理解下写的,加上注释,希望可以解释清楚。
    */
    /*
     * 整个jquery包含在一个匿名函数中,专业点叫闭包,就是下面的形式,如(function(window,undefined){}(window))。
     * 闭包的定义在这里不太容易讲清楚,我只说下这样说的好处。
     * 1.使整个jquery中定义的变量成为局域变量,不会影响全局变量,个人觉得这也是jquery被成为轻量级的原因之一。
     * 2.增加jquery运行速度,因为局域变量运行速度高于全局变量。
     * 3.就像你看到,传入的window和undefined,可以自定义名字,方便编写。当然,现在你看到的仍是原来的写法,但是你可以看看jquery的min版本,一定是压缩的。
    */
    (function( window, undefined ) {
    var 
        /*jquery的定义,我们平时用的$和jQuery就是它。这里可以看出来真正的jQuery的对象是init方法产生的。
         *这样做采用了工厂模式,创建jQuery对象时不需要再new一个对象了。所以你可以发现,我们创建jQuery对象的方式是$(selector)或者是jQuery(selector)
         *原版的jQuery定义方法多了个上下文参数context,此处我省略了。
        */
        jQuery = function(selector){
            return new jQuery.fn.init(selector);
        },
        /*
         * 引用数据、对象以及字符串的方法
        */
        core_push = Array.prototype.push,
        core_slice = Array.prototype.slice,
        core_indexOf = Array.prototype.indexOf,
        core_toString = Object.prototype.toString,
        core_hasOwn = Object.prototype.hasOwnProperty,
        core_trim = String.prototype.trim;
        /*
         * jQuery对象的定义,这里去掉了所有的属性,只留下了init()。
         * jQuery的选择器采用了Sizzle,这里省略了,可以看出我只简单的返回了一个查询ID的方式。
         * jQuery的对象并不是这样简单的赋给了对象的一个属性,而是创建了一个数组。在这里忽略那些,只是赋给了obj属性。
         * 这里jQuery将原型赋给了jQuery的fn属性,所以我们如果要给jQuery对象扩展,只需要对jQuery.fn扩展就行。
        */
        jQuery.fn = jQuery.prototype = {
            init:function(selector){
                    this.obj = window.document.getElementById(selector);
                    return this;
            }
        };
        /*
         * 将jQuery的原型赋给init,这样是为了可以让jQuery对象,也就是init对象可以使用jQuery的扩展方法。
        */
        jQuery.fn.init.prototype = jQuery.fn;
        /*
         * jQuery的扩展方法,这个是jQuery的原版方法,我没做更改。
         * 方法的逻辑在这里不再说明,方法的效果就是,我们使用jQuery.extend可以扩展jQuery,而jQuery.fn.extend可以扩展jQuery对象。
        */
        jQuery.extend = jQuery.fn.extend = function() {
            var options, name, src, copy, copyIsArray, clone,
                target = arguments[0] || {},
                i = 1,
                length = arguments.length,
                deep = false;
    
            // Handle a deep copy situation
            if ( typeof target === "boolean" ) {
                deep = target;
                target = arguments[1] || {};
                // skip the boolean and the target
                i = 2;
            }
    
            // Handle case when target is a string or something (possible in deep copy)
            if ( typeof target !== "object" && !d.isFunction(target) ) {
                target = {};
            }
    
            // extend jQuery itself if only one argument is passed
            if ( length === i ) {
                target = this;
                --i;
            }
    
            for ( ; i < length; i++ ) {
                // Only deal with non-null/undefined values
                if ( (options = arguments[ i ]) != null ) {
                    // Extend the base object
                    for ( name in options ) {
                        src = target[ name ];
                        copy = options[ name ];
    
                        // Prevent never-ending loop
                        if ( target === copy ) {
                            continue;
                        }
    
                        // Recurse if we"re merging plain objects or arrays
                        if ( deep && copy && ( d.isPlainObject(copy) || (copyIsArray = d.isArray(copy)) ) ) {
                            if ( copyIsArray ) {
                                copyIsArray = false;
                                clone = src && d.isArray(src) ? src : [];
    
                            } else {
                                clone = src && d.isPlainObject(src) ? src : {};
                            }
    
                            // Never move original objects, clone them
                            target[ name ] = d.extend( deep, clone, copy );
    
                        // Don"t bring in undefined values
                        } else if ( copy !== undefined ) {
                            target[ name ] = copy;
                        }
                    }
                }
            }
    
            // Return the modified object
            return target;
        };
        /*
         * 这里实现了简单的ready绑定序列。
        */
        jQuery.extend({
            isReady:false,//文档加载是否完成的标识
            readyList:[],//函数序列
            //以下为工具方法,可忽略
            isArray : Array.isArray || function( obj ) {
                return jQuery.type(obj) === "array";
            },
    
            isWindow : function( obj ) {
                return obj != null && obj == obj.window;
            },
    
            isNumeric : function( obj ) {
                return !isNaN( parseFloat(obj) ) && isFinite( obj );
            },
    
            type : function( obj ) {
                return obj == null ?
                    String( obj ) :
                    class2type[ core_toString.call(obj) ] || "object";
            },
    
            isPlainObject : function( obj ) {
                // Must be an Object.
                // Because of IE, we also have to check the presence of the constructor property.
                // Make sure that DOM nodes and window objects don"t pass through, as well
                if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
                    return false;
                }
    
                try {
                    // Not own constructor property must be Object
                    if ( obj.constructor &&
                        !core_hasOwn.call(obj, "constructor") &&
                        !core_hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
                        return false;
                    }
                } catch ( e ) {
                    // IE8,9 Will throw exceptions on certain host objects #9897
                    return false;
                }
    
                // Own properties are enumerated firstly, so to speed up,
                // if last one is own, then all properties are own.
    
                var key;
                for ( key in obj ) {}
    
                return key === undefined || core_hasOwn.call( obj, key );
            },
            isFunction : function(obj){
                if(obj && typeof obj == "function"){
                    return true;
                }
                return false;
            },
            //onload事件实现
            ready : function(fn){
                    //如果是函数,加入到函数序列
                    if(fn && typeof fn == "function" ){
                        jQuery.readyList.push(fn);
                    }
                    //文档加载完成,执行函数序列。
                    if(jQuery.isReady){
                        for(var i = 0;i < jQuery.readyList.length ;i++){
                            fn = jQuery.readyList[i];
                            jQuery.callback(fn);
                        }
                        return jQuery;
                    }
                },
            //回调
            callback : function(fn){
                fn.call(document,jQuery);
            }
        });
        //模拟实现jQuery的html方法
        jQuery.fn.extend({
        html : function(html){
            if(html && typeof html == "string"){
               this.obj.innerHTML = html;
               return this;
            }
            return this.obj.innerHTML;
        }
        });
        //导出对象
        window.$ = window.jQuery = jQuery;
        //判断加载是否完成
        var top = false;
        try {
            top = window.frameElement == null && document.documentElement;
        } catch(e) {}
        if ( top && top.doScroll ) {
            (function doScrollCheck() {
                try {
                    top.doScroll("left");
                    jQuery.isReady = true;
                    jQuery.ready();
                } catch(e) {
                    setTimeout( doScrollCheck, 50 );
                }
            })();
        }
    }(window));

             下面这个是测试文件。

    <html>
    <head>
    <script src="my-jquery-1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.extend({
            testExtend:function(){
                alert("extend success");
            }
        });
        $.ready(function(){
            alert($("test").html());
            $.testExtend();
        });
        $.ready(function(){
            $("test").html("modify success");
        });
        $.ready(function(){
            alert($("test").html());
        });
    </script>
    </head>
    <body>
        <div id="test">jquery src</div>
    </body>
    </html>

             两个文件复制出来放在同一个文件夹下面,就可以看到效果。希望各位有不同意见的可以提出来一起探讨。

     

     


    版权声明:本文版权归作者(左潇龙)所有,欢迎转载。但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    4
    精彩
    0
    感动
    0
    搞笑
    0
    开心
    0
    愤怒
    0
    无聊
    0
    灌水
    0
    惊讶
#1楼     时间:2013-09-03 09:42:00      来源:飞翔吧菜鸟
引用jQuery.fn.init.prototype = jQuery.fn;

看到这一句 我迷茫了。
#2楼     时间:2013-09-03 21:58:00      来源:左潇龙
@ 飞翔吧菜鸟
自己写点代码试验下,讲是不好讲清楚的。这个是jquery源码的重点!
#3楼     时间:2017-02-16 14:29:16      来源:石家庄市网友

 以什么样的心态去分析jquery和spring的源码?出发点是如何产生的。目的何在?

#4楼     时间:2017-02-16 14:30:21      来源:llllxh

 以什么样的心态去分析jquery和spring的源码?出发点是如何产生的。目的何在?

发表评论

站内搜索

最新评论