jQuery源码学习

$、jQuery是什么?

　　平时天天在用的$到底是个什么东西？$("id")思考，感觉像个工厂方法。提供selector创建jquery对象。

　　一看源码绕晕了，剥茧抽丝吧

 

定义jquery对象，原型上添加方法

function _jQuery(selector){}

_jQuery.prototype={...}

****************************************************

想更简洁的创建jQuery对象

jQuery=function(selector){

    return new _jQuery(selector);

}

function _jQuery(selector){}

创建一个快捷接口方便修改jQuery原型

jQuery.fn=_jQuery.prototype={...}

****************************************************

将_jQuery挂到jQuery的原型属性init上

jQuery.prototype.init=_jQuery=function(selector){

    ...

}

jQuery.fn=_jQuery.prototype={...}=jQuery.prototype.init.prototype

jQuery=function(selector){

    return new jQuery.prototype.init(selector);

}

****************************************************

将_jQuery去掉

jQuery.prototype.init=function(selector){

    ...

}

jQuery.fn={...}=jQuery.prototype.init.prototype

jQuery=function(selector){

    return new jQuery.prototype.init(selector);

}



看到这里应该明白了平时我们用的最多jQuery($)只是个包装方法。

为了方便我们扩展实际的_jQuery对象(jQuery.prototype.init)原型暴露出$.fn,

在这基础上jQuery.fn=jQuery.prototype让我们用的更习惯。

所以最后出来这绕来绕去略显奇葩的源码：



jQuery=function(selector){

    return new jQuery.prototype.init(selector);

}

jQuery.fn=jQuery.prototype={

    ...

    init:function(){...}

}

 细不细很开心哦，豁然开朗

$.extend是做什么的？

　　这个接口有点灵活，还是看过源码后用起来才有底气

jQuery.extend = jQuery.fn.extend = function() {

    var src, copyIsArray, copy, name, options, 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" && !jQuery.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 && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

                    if ( copyIsArray ) {

                        copyIsArray = false;

                        clone = src && jQuery.isArray(src) ? src : [];



                    } else {

                        clone = src && jQuery.isPlainObject(src) ? src : {};

                    }



                    // Never move original objects, clone them

                    target[ name ] = jQuery.extend( deep, clone, copy );



                // Don't bring in undefined values

                } else if ( copy !== undefined ) {

                    target[ name ] = copy;

                }

            }

        }

    }



    // Return the modified object

    return target;

};

jquery 的$.extend经常用的，参数灵活给人有点混乱的感觉，有时不注意可能会使用不当遇到坑。

$.extend(true,objA,objB,objC)  第一参数如果是boolean类型，则用来标明是否深克隆拷贝对象。将objB深克隆拷贝到objA，再将objC深克隆拷贝到objA

 

$.extend(objA,objB,objC)　　　若第一个参数不为boolean，则用直接值复制的方式拷贝对象，第一个参数对象（包括object、array、function类型）定义为target目标对象：将objB值复制到objA，再将objC复制到objA

 

$.extend(objA) 　　　　　　　　如果只有一个参数对象，则target目标对象设为this（$.fn/$）：将objA属性值赋值给$.fn/$

 

例：

获得A对象的深拷贝 　　　　　　　　　　　　　　$.extend(true,{},A);

克隆A对象同时，获得B、C对象的属性。　　　　  $.extend(true,{},A,B,C);

jquery插件写法　　　　　　　　　　　　　　　　

$.extend({

　center:function(){...}

});

=$.fn.center=function(){...}  

 

$.Deferred $.callback的用途？

 

jquery对于方法回调有2个很有意思的封装$.Deferred，$.callback。各有各的适用场景：

$.callback("rule") ：

1.维护一个有规则的回调方法列表，提供add、fire、remove接口给调用者

2.关注的是多个事件以何种逻辑调用

3.作为回调方法的中间层，将方法的执行fire和方法的监听add、remove解耦

 

规则rule：

once 每次调用后方法置空
memory add新方法时，调用上一次fire的参数值触发当前方法
unique 不重复
stopOnFalse false 执行链中断

function fn1( value ){

    console.log( value );

    return false;

}



function fn2( value ){

    fn1("fn2 says:" + value);

    return false;

}

    

var callbacks = $.Callbacks( "unique memory" );

callbacks.add( fn1 );

callbacks.fire( "foo" );

callbacks.add( fn1 ); // repeat addition

callbacks.add( fn2 );

callbacks.fire( "bar" );

callbacks.add( fn2 );

callbacks.fire( "baz" );

callbacks.remove( fn2 );

callbacks.fire( "foobar" );



/*

output:

foo

fn2 says:foo

bar

fn2 says:bar

baz

fn2 says:baz

foobar

*/

 

$.Deferred

1.作为回调方法中间层，解耦事件的定义dfd.done(fn).fail(fn)和方法的执行dfd.resolve(ars)
2.支持链式，擅长控制处理事件调用的时机
3.提供灵活的接入代码方式：最强大的莫过于$.Deferred()可以接受一个函数参数，$.Deferred()所生成的deferred对象将作为这个函数的默认参数。

        function wait(dtd){

            setTimeout(function(){

                dtd.resolve("yinshen");

            },2000);

        }        

        /**最基础的实现,传入Deferred对象

        var dtd=$.Deferred();

        dtd.done(function(data){

            console.log(data);

        });

        wait(dtd);

        **/

        /**定义实现Deferred接口

         * 

        var dtd=$.Deferred();

        dtd.promise(wait);

        wait.done(function(data){

            console.log(data);

        });    

        wait(dtd);

        **/        

        /**将自己包装成Deferred对象，简洁**/

        $.Deferred(wait).done(function(data){

            console.log(data);

        });