[js高手之路] 设计模式系列课程 - jQuery的extend插件机制

这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝，可以为对象方便的扩展属性和方法，

jquery的插件扩展机制，大致就是这个原理.

    var G = function ( selector, context ) {
            return new G.fn.init( selector, context );
        };
        G.fn = G.prototype = {
            constructor : G,
            init: function ( selector, context ) {
                this.length = 0;
                context = context || document;
                if ( selector.indexOf( '#' ) == 0 ) {
                    this[0] = document.getElementById( selector.substring( 1 ) );
                    this.length = 1;
                }else {
                    var aNode = context.getElementsByTagName( selector );
                    for( var i = 0, len = aNode.length; i < len; i++ ){
                        this[i] = aNode[i];
                    }
                    this.length = len;
                }
                this.selector = selector;
                this.context = context;
                return this;
            },
            length: 0,
            size: function () {
                return this.length;
            }
        }
        G.fn.init.prototype = G.fn;
        G.extend = G.fn.extend = function(){
            var i = 1,
                len = arguments.length,
                dst = arguments[0],
                j;
            if ( i == len ) {
                dst = this;
                i--;
            }
            for( ; i < len; i++ ) {
                for( j in arguments[i] ) {
                    dst[j] = arguments[i][j];
                }
            }
            return dst;
        }

测试用例:

        window.onload = function(){
            var src = {
                name : 'ghostwu',
                age : 22,
                sex : 'man',
                skills : [ 'php', 'javascript', 'linux' ]
            }
            var dst = {};
            var obj = G.extend( dst, src );
            console.log( obj );
            obj.skills.push( 'python' );
            console.log( src.skills );
        }

上例把对象src拷贝到dst, 在src对象中加了一个引用类型skills, 由于我的源码是浅拷贝，所以src.skills和obj.skills依然是相互影响

把方法扩展到原型对象上：

　　　　　　　G.extend( G.fn, { version : '0.1' } );
            console.log( G.prototype );
            G.fn.extend( { getVersion : function(){ return this.version } } );
            console.log( G.prototype );

把方法与属性扩展到函数本身(静态属性与方法)

        G.extend( G, { 'user' : 'ghostwu' } );
            G.extend( { "age" : '22' } );
            for( var key in G ){
                if( G.hasOwnProperty( key ) ) {
                    console.log( key );
                }
            }