jQuery外掛程式編寫

 

/*
Hello everybody,讓我們來寫個jQuery外掛程式，不要一直用jquery，卻連外掛程式都不會寫。
哈哈哈，開玩笑啦。
當你看到這篇日誌，可以肯定的是，你是jQuery的粉絲哦。
話說js是很隨意的語言，很隨便，想怎麼寫就怎麼寫。
且看這段代碼
*/
var jQuery = new Object();//或者var jQuery = {};
jQuery.method = function(args){
alert("hello," + args);
}
jQuery.method("Henry");
/*
嘿嘿，太明顯了，你會看到"hello,Henry"的彈出資訊的。是不是這段代碼巨簡單。
當然，你自然而然會想到用這種方法。如下：
*/
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
jQuery.method = function(){
alert("hello,this is my defined method");
}
jQuery.method();
</script>
/*
確實效果如你所願了。但是不是最好的。因為，一個好的架構一定留給你好的介面了。
最好是使用它的。應該如下：
*/
jQuery.extend({
method: function(){
alert("hello,this is my defined method");
}
});
jQuery.method();
/*
不錯吧，效果還是一樣的。不過這樣是最好的，為什麼呢？因為，當你的函數需要
增加參數的時候，如果別人不添加參數，你就需要用預設的參數。這時，你的設計
好處就來了，see it ^.^:
*/

jQuery.extend({
method: function(options){
var defaults = {
name : "Henry",
sex : "male"
};
jQuery.extend(defaults,options);//如此一來，你的所有參數都進來了哦。
alert("hello," + defaults.name + ",you are " + defaults.sex);
}
});
jQuery.method();
jQuery.method({
name : "yourname",
sex : "sex"
});
//無論如何，你都可以調用我寫的外掛程式哦。呵呵呵
/*
還有還有哈，需要提醒你的是，如果你看了我寫的解析jquery源碼或者自己分析過jQuery源碼
你將會有不同的感受。上面是靜態方法的擴充，也就是你無須選擇任何一個元素，直接通過
jQuery類來使用方法。下面介紹一個元素的操作方法。你只需把jQuery.extend()改成
jQuery.fn.extend();就可以了。
*/
jQuery.fn.extend({
method: function(options){
var defaults = {
name : "Henry",
sex : "male"
};
jQuery.extend(defaults,options);//如此一來，你的所有參數都進來了哦。
alert("hello," + defaults.name + ",you are " + defaults.sex);
return $(this);//不要忘記返回自己，實現連結調用。
}
});