- 自己最近在學(xué)習(xí)一些js的插件的寫法室抽,那么當(dāng)然就繞不開jquery搪哪,于是自己就學(xué)習(xí)中遇到的一些問題做些總結(jié)和記錄
- 自己也是在學(xué)習(xí)過程中,有問題請各位指出坪圾,希望大伙能多多支持晓折,給給star惑朦,點點贊唄,github地址
在JQ中,extend是個一個很強(qiáng)大的功能漓概,實際的源碼中很多模塊方法都是通過extend擴(kuò)展方法加入到JQ原型對象上去的漾月,同時extend給后續(xù)的開發(fā)者提供了很好的接口,使得層出不窮的JQ插件出現(xiàn)垛耳,極大的豐富了JQ的使用場景栅屏。
先寫個最簡單的
extend其實說白了就是復(fù)制,但在js中對象作為參數(shù)的傳遞是直接傳遞而不會重新構(gòu)建一個對象再傳過去堂鲜,比如
var a = {
name:'aaa'
};
var b = a;
b.name = 'bbb';
console.log(a.name); //bbb
所以我們?yōu)榱藦?fù)制一個對象栈雳,一般需要自己創(chuàng)建一個新對象,然后通過遍歷缔莲,賦值來達(dá)到復(fù)制效果哥纫,例:
function copy(target,source){
for(var name in source){
target[name] = source[name];
}
return target;
}
簡單的JQ extend方法
Ye.extend = function(){
//我們這里通過arguments來獲取傳進(jìn)來的參數(shù)
var source = arguments[0];
for(var name in souce){
//復(fù)制到實例本身上
this[name] = source[name];
}
}
Ye.extend({
add:function(){
console.log('add');
}
})
但是我們不僅要擴(kuò)展靜態(tài)方法,還要擴(kuò)展實例上的方法痴奏,所以
Ye.prototpye.extend = Ye.extend = function(){
//...代碼
}
然后就可以擴(kuò)展JQ插件了
$.prototype.extend({
test:function(){
console.log('實例方法');
}
})
$.extend(){
test:function(){
console.log('靜態(tài)方法');
}
}
$.test(); //靜態(tài)方法
$("#id").test();//實例方法
當(dāng)做復(fù)制方法使用
有時候我們并不是想擴(kuò)展JQ對象蛀骇,而是想將一個對象整合到另一個對象上去,所以我們可以對extend方法做一個判斷
Ye.prototype.extend = Ye.extend = function(){
if(arguments.length == 1){
var source = arguments[0];
for(var name in souce){
//復(fù)制到實例本身上
this[name] = source[name];
}
}else {
var target = arguments[0];
var source = arguments[1];
for(var name in source){
target[name] = source[name];
}
return target;
}
}
//做復(fù)制方法調(diào)用時
$.extend(target,source);
這樣我們的extend方法就完善啦6敛稹擅憔!