- 自己最近在學(xué)習(xí)一些js的插件的寫法，那么當(dāng)然就繞不開jquery，于是自己就學(xué)習(xí)中遇到的一些問題做些總結(jié)和記錄
- 自己也是在學(xué)習(xí)過程中，有問題請(qǐng)各位指出，希望大伙能多多支持，給給star，點(diǎn)點(diǎn)贊唄，github地址
在JQ中,extend是個(gè)一個(gè)很強(qiáng)大的功能，實(shí)際的源碼中很多模塊方法都是通過extend擴(kuò)展方法加入到JQ原型對(duì)象上去的，同時(shí)extend給后續(xù)的開發(fā)者提供了很好的接口，使得層出不窮的JQ插件出現(xiàn)，極大的豐富了JQ的使用場(chǎng)景。
先寫個(gè)最簡單的
extend其實(shí)說白了就是復(fù)制，但在js中對(duì)象作為參數(shù)的傳遞是直接傳遞而不會(huì)重新構(gòu)建一個(gè)對(duì)象再傳過去，比如
var a = {
name:'aaa'
};
var b = a;
b.name = 'bbb';
console.log(a.name); //bbb
所以我們?yōu)榱藦?fù)制一個(gè)對(duì)象，一般需要自己創(chuàng)建一個(gè)新對(duì)象，然后通過遍歷，賦值來達(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ù)制到實(shí)例本身上
this[name] = source[name];
}
}
Ye.extend({
add:function(){
console.log('add');
}
})
但是我們不僅要擴(kuò)展靜態(tài)方法，還要擴(kuò)展實(shí)例上的方法，所以
Ye.prototpye.extend = Ye.extend = function(){
//...代碼
}
然后就可以擴(kuò)展JQ插件了
$.prototype.extend({
test:function(){
console.log('實(shí)例方法');
}
})
$.extend(){
test:function(){
console.log('靜態(tài)方法');
}
}
$.test(); //靜態(tài)方法
$("#id").test();//實(shí)例方法
當(dāng)做復(fù)制方法使用
有時(shí)候我們并不是想擴(kuò)展JQ對(duì)象，而是想將一個(gè)對(duì)象整合到另一個(gè)對(duì)象上去，所以我們可以對(duì)extend方法做一個(gè)判斷
Ye.prototype.extend = Ye.extend = function(){
if(arguments.length == 1){
var source = arguments[0];
for(var name in souce){
//復(fù)制到實(shí)例本身上
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)用時(shí)
$.extend(target,source);
這樣我們的extend方法就完善啦?。?/p>
