[js高手之路] 设计模式系列课程 - jQuery的exten…

2018-06-24 00:02:27来源：未知阅读 ()

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

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

 1     var G = function ( selector, context ) {
 2             return new G.fn.init( selector, context );
 3         };
 4         G.fn = G.prototype = {
 5             constructor : G,
 6             init: function ( selector, context ) {
 7                 this.length = 0;
 8                 context = context || document;
 9                 if ( selector.indexOf( '#' ) == 0 ) {
10                     this[0] = document.getElementById( selector.substring( 1 ) );
11                     this.length = 1;
12                 }else {
13                     var aNode = context.getElementsByTagName( selector );
14                     for( var i = 0, len = aNode.length; i < len; i++ ){
15                         this[i] = aNode[i];
16                     }
17                     this.length = len;
18                 }
19                 this.selector = selector;
20                 this.context = context;
21                 return this;
22             },
23             length: 0,
24             size: function () {
25                 return this.length;
26             }
27         }
28         G.fn.init.prototype = G.fn;
29         G.extend = G.fn.extend = function(){
30             var i = 1,
31                 len = arguments.length,
32                 dst = arguments[0],
33                 j;
34             if ( i == len ) {
35                 dst = this;
36                 i--;
37             }
38             for( ; i < len; i++ ) {
39                 for( j in arguments[i] ) {
40                     dst[j] = arguments[i][j];
41                 }
42             }
43             return dst;
44         }

测试用例:

 1         window.onload = function(){
 2             var src = {
 3                 name : 'ghostwu',
 4                 age : 22,
 5                 sex : 'man',
 6                 skills : [ 'php', 'javascript', 'linux' ]
 7             }
 8             var dst = {};
 9             var obj = G.extend( dst, src );
10             console.log( obj );
11             obj.skills.push( 'python' );
12             console.log( src.skills );
13         }

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

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

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

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

1         G.extend( G, { 'user' : 'ghostwu' } );
2             G.extend( { "age" : '22' } );
3             for( var key in G ){
4                 if( G.hasOwnProperty( key ) ) {
5                     console.log( key );
6                 }
7             }