JavaScript的jQuery庫插件的簡要開發(fā)指南
jQuery 插件通常分兩類。
- 基于選擇器的插件（支持鏈式操作）
- 不基于選擇器的插件（不支持鏈式操作）
前段時間簡單學(xué)習(xí)了 jQuery 插件開發(fā)，開發(fā)了兩個簡單的插件，在此對兩種插件的開發(fā)模式做簡要總結(jié)。
基于選擇器的插件
通常開發(fā)模式如下：
(function($, window, undefined) {
$.fn.PluginName = function(opts) {
var defaults = {
// 插件自定義選項的默認值
};
// 以用戶的自定義選項覆蓋默認選項
var options = $.extend(defaults, opts || {});
return this.each(function() { // 讓插件支持鏈式操作
// 在這里編寫插件功能代碼
});
};
})(jQuery, window);
首先，創(chuàng)建一個匿名的自執(zhí)行函數(shù)，形參為 $ 、 window 和 undefined，實參為 jQuery 和 window。
嗯？為什么沒有為 undefined 對應(yīng)地傳入一個實參呢？這是一個小技巧，考慮到 undefined 這個變量名可能在其它地方的 JavaScript 代碼賦過值，失去了它真正的意義，所以這里干脆不傳入這個參數(shù)，以確保它在那個匿名自執(zhí)行函數(shù)中是真正的 undefined。
jQuery 傳入后對應(yīng)為 $，這樣可以保證插件內(nèi)調(diào)用的 $ 一定是 jQuery 而非 Prototype 之類的庫。
此類插件的調(diào)用方式一般為 $(selector).PluginName(); 這種形式。
此類具體示例可參考 https://github.com/libuchao/KTwitter
不基于選擇器的插件
由于此類插件不依賴于選擇器，所以也無鏈式操作一說。一般開發(fā)模式如下：
(function($, window, undefined) {
$.PluginName = function(opts) {
var defaults = {
// 插件自定義選項的默認值
};
// 以用戶的自定義選項覆蓋默認選項
var options = $.extend(defaults, opts || {});
// 在這里編寫插件功能代碼
};
})(jQuery, window);
此類插件的調(diào)用形式一般為 $(selector).PluginName(); 這種形式。
相關(guān)文章
jQuery實現(xiàn)側(cè)邊欄隱藏與顯示的方法詳解
這篇文章主要介紹了jQuery實現(xiàn)側(cè)邊欄隱藏與顯示的方法,結(jié)合實例形式較為詳細的分析了jQuery基于事件響應(yīng)與頁面元素屬性動態(tài)操作實現(xiàn)元素顯示與隱藏功能的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
jQuery實現(xiàn)的tab標(biāo)簽切換效果示例
這篇文章主要介紹了jQuery實現(xiàn)的tab標(biāo)簽切換效果,結(jié)合實例形式分析了jQuery響應(yīng)鼠標(biāo)事件動態(tài)變換頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)硪黄啿サ暮唵螌崿F(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了JS與jQuery實現(xiàn)隔行變色的方法,結(jié)合實例形式對比分析了javascript與jQuery實現(xiàn)隔行變色的具體操作步驟與相關(guān)技巧,體驗一下jQuery的華麗與簡潔,需要的朋友可以參考下2016-09-09
JavaScript對象之間的轉(zhuǎn)換 jQuery對象和原聲DOM
jQuery對象和原聲DOM，JavaScript對象之間的轉(zhuǎn)換，學(xué)習(xí)jquery的朋友可以參考下。2011-03-03
這篇文章主要介紹了jQuery遍歷節(jié)點樹方法,結(jié)合實例形式分析了3種常見的節(jié)點遍歷技巧,需要的朋友可以參考下2016-09-09
jQuery實現(xiàn)簡單的tab標(biāo)簽頁效果
這篇文章主要介紹了jQuery實現(xiàn)簡單的tab標(biāo)簽頁效果,涉及jQuery簡單元素遍歷與樣式動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
jquery事件preventDefault()方法用法實例
這篇文章主要介紹了jquery事件preventDefault()方法用法,實例分析了preventDefault()方法的功能及使用技巧,需要的朋友可以參考下2015-01-01
本文為大家介紹下在每個匹配元素的外部插入新元素的方法，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
jQuery插件bgStretcher.js實現(xiàn)全屏背景特效
可以自動動態(tài)更換網(wǎng)頁背景圖片的jQuery插件bgstretcher.js，sharejs.com推薦的這個插件，可以自定義多種方式讓網(wǎng)頁背景自動切換，效果流暢，非常難得，調(diào)用代碼也非常簡單。2015-06-06