/*
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);//不要忘記返回自己,實現鏈接調用。
}
});