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