[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 );
                 }
             }