您的位置:首页 > Web前端 > JavaScript

js扩展插件实现原理及代码

2016-07-28 18:02 513 查看
jquery的强大不仅在于它的工具方法很多,而且扩展性也很好。

下面我用一个例子介绍下它 扩展接口 的实现原理(核心代码简化了,因为extend实际还包含深、浅拷贝):

       function JQ(){
return new JQ.prototype.init();
}
JQ.prototype = {
init : function(){
console.log('对象初始化了!');
}
}
JQ.prototype.init.prototype = JQ.prototype; //JQ原型指向init

//扩展插件底层代码简化版
JQ.extend = JQ.prototype.extend = function() {
var options, name , src;

//arguments是调用JQ.prototype.extend函数传入的实参
for(var i = 0; i < arguments.length ; i++){  //这个例子中 arguments.length == 2
if((options = arguments [i] )!= null){
for(name in options){
src = options[name];
this[name] = src; //拓展插件
}
}
}

}

//扩展窗体插件
JQ.prototype.extend({
openWindow : function(name){
console.log( name + '调用打开窗体插件成功!' );
}
})

JQ().openWindow('许文祥'); //对象初始化了!
// 许文祥调用打开窗体插件成功!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: