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