|
jQuery如此流行,各式各樣的jQuery插件也是滿天飛。你有沒有想過把自己的一些常用的JS功能也寫成jQuery插件呢?如果你的答案是肯定的,那么來吧!和我一起學寫jQuery插件吧!
嗨,美女,這是我寫的一個jQuery插件!
很多公司的前端設計開發(fā)人員都是女孩子,而這些女孩子很多JavaScript技能都不是很好。而前端開發(fā)過程中,JavaScript技能又是必不可少的。所以,如果前端小MM正在為某個JavaScript效果發(fā)愁的時候,你瀟灑的過去,然后對她說:“嗨,美女,用這個吧。這是我寫的一個jQuery插件。”我想基本上你的人生大事就能很快解決。
先想好做個什么功能
這是第一步,也是很重要的一步,鑒于咱們都是剛學習寫jQuery插件,所以,這個功能一定要簡單一些。不要想一口就吃個胖子,咱也吃不了。咱還是撿個瘦的下手吧。但是,這個功能也不能太無聊,如果無聊到幾乎沒用處,就算做好了也是扔到馬桶里,不會持續(xù)更新,也便不會持續(xù)進步了。
我最終選擇的是:美化表格,讓表格的奇偶行顏色不同,然后鼠標移到某行上,某行可以高亮顯示。功能簡單又實用,不錯,不錯。呵呵~~
不急著寫,先想想實現(xiàn)原理
還不急,先想想實現(xiàn)原理。必要的時候,先寫出簡單的實現(xiàn)的原型。
我的這個美化表格的例子,實現(xiàn)原理倒是簡單,無非就是找到表格的奇偶行,然后添加不同的class,活動行高亮顯示也很簡單,只要判斷mouseover事件,然后添加一個class,mouseout的時候,再去掉這個class即可。
一個通用的框架
在動手寫自己的jQuery插件之前,自然是先研究一下別人寫的插件了。其實寫jQuery也基本有一個通用的框架。行,那咱也把這框架照搬過來吧。
(function($){
$.fn.yourName = function(options){
//各種屬性、參數(shù)
}
var options = $.extend(defaults, options);
this.each(function(){
//插件實現(xiàn)代碼
});
};
})(jQuery);
it知識庫:跟我一起學寫jQuery插件,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。