JavaScript插件化開發(fā)教程 （一）
一，開篇分析
Hi，大家！今天這系列文章主要是說說如何開發(fā)基于“JavaScript”的插件式開發(fā)，我想很多人對”插件“這個詞并不陌生，
有的人可能叫“組件”或“部件”，這不重要，關鍵是看如何設計，如何做一個全方位的考量，這是本文的重點闡述的概念。我想大家對
“jQuery插件的方式”有一定的了解，我們結合這個話題一起討論一下，最終給出相關的實現方案，來不斷提高自己的誰能力。
二，進入插件正題
一般來說，jQuery插件的開發(fā)分為兩種：一種是掛在jQuery命名空間下的全局函數，也可稱為靜態(tài)方法。
另一種是jQuery對象級別的方法，即掛在jQuery原型下的方法，這樣通過選擇器獲取的jQuery對象實例也能共享該方法。
（1），類級別的插件開發(fā)
類級別的插件開發(fā)最直接的理解就是給"jQuery"類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是"$.ajax()"這個函數，將函數定義于jQuery的命名空間中。關于類級別的插件開發(fā)可以采用如下幾種形式進行擴展：
1.1添加一個全局函數，我們只需如下定義，看代碼:
$.hello = function(){
alert("Hello,大熊君！") ;
} ;
1.2添加多個全局函數，可采用如下定義：
$.extend({
hello : function(name){
// put your code here
} ,
world : function(){
// put your code here
}
}) ;
說明：”$.extend(target, [object1], [objectN])“（該方法主要用于合并兩個或更多對象的內容(屬性)到第一個對象，并返回合并后的第一對象。
如果該方法只有一個參數target，則該參數將擴展jQuery的命名空間，即作為靜態(tài)方法掛在jQuery全局對象下）。
（2），對象級別的插件開發(fā)
對象級別的插件開發(fā)需要如下的兩種形式：
2.1通過“$.fn.extend()”為原型動態(tài)掛載相關的屬性。
(function($){
$.fn.extend({
pluginName : function(opts){
// put your code here
}
}) ;
})(jQuery) ;
2.2直接添加動態(tài)屬性到原型鏈上。
(function($) {
$.fn.pluginName = function(){
// put your code here
} ;
})(jQuery) ;
說明一下：二者是等價的，對于一個jQuery插件，一個基本的函數就可以很好地工作，但是對于復雜一點的插件就需要提供各種各樣的方法和私有函數。
你可能會使用不同的命名空間去為你的插件提供各種方法，但是添加過多的命名空間反而會使代碼變得混亂，健壯性下降。所以最好的解決辦法是適當地定義私有函數和方法。
所以我們通過自執(zhí)行函數與閉包的結合實現模擬的私有插件單元，就像我們上面的實例中一樣。
（三），下面給一個簡單的例子看看實現的過程：
?。?），“html”片段代碼，如下：
<div id="bb" style="width:220px;border:1px solid #ccc;">
<span></span>
<div
style="margin-top:10px;
margin-bottom:30px;"
>8 </div>
</div>
（2），“data.json”定義如下：
{
"text" : "你好，大熊君{{bb}} ！" ;
}
?。?），"bb.js"代碼如下：
$(function(){
$("#bb").bigbear() ;
}) ;
(function($){
$.fn.bigbear = function(opts){
opts = $.extend({},$.fn.bigbear.defaults,opts) ;
return this.each(function(){
var elem = $(this) ;
elem.find("span").text(opts["title"]) ;
$.get(opts["url"],function(data){
elem.find("div").text(data["text"]) ;
}) ;
}) ;
} ;
$.fn.bigbear.defaults = {
title : "這是一個簡單的測試" ,
url : "data.json"
} ;
})(jQuery) ;
運行效果：
小結一下：
?。?）“$.fn.bigbear.defaults”提供插件的默認參數選項一個擴展性良好的插件應該是可以讓使用者根據需求自定義參數選項，并控制插件的行為，所以提供恢復默認選項是很有必要的。你可以通過jQuery的extend方法來設置這些選項。
（2），“return this.each(){...}”遍歷多個元素并返回jQuery使用Sizzle選擇器引擎，Sizzle可以為你的函數提供多元素操作（例如對所有類名相同的元素）。這是jQuery幾個優(yōu)秀的特性之一，在開發(fā)插件過程中即使你不準備為你的插件提供多元素支持，但為這做準備仍然是一個很好的方式。另外，jQuery有一個很好的特點就是可以進行方法級聯，也可稱為鏈式調用，所以我們不應該破壞這個特性，始終在方法中返回一個元素。
（四），最后總結
（1），jQuery為開發(fā)插件提拱了兩個方法，分別是：jQuery.fn.extend(object); 給jQuery對象添加方法。
jQuery.extend(object); 為擴展jQuery類本身.為類添加新的方法。
?。?），把全部代碼放在閉包(一個即時執(zhí)行函數)里此時閉包相當于一個私有作用域，外部無法訪問到內部的信息，并且不會存在全局變量的污染情況。官方創(chuàng)建開發(fā)規(guī)范的解釋是：a) 避免全局依賴；b) 避免第三方破壞；c) 兼容jQuery操作符'$'和'jQuery '。
（3），提供插件的默認參數選項一個擴展性良好的插件應該是可以讓使用者根據需求自定義參數選項，并控制插件的行為，所以提供恢復默認選項是很有必要的。你可以通過jQuery的extend方法來設置這些選項
（4），遍歷多個元素并返回jQuery使用Sizzle選擇器引擎，Sizzle可以為你的函數提供多元素操作（例如對所有類名相同的元素）。這是jQuery幾個優(yōu)秀的特性之一，在開發(fā)插件過程中即使你不準備為你的插件提供多元素支持，但為這做準備仍然是一個很好的實踐。另外，jQuery有一個很好的特點就是可以進行方法級聯，也可稱為鏈式調用，所以我們不應該破壞這個特性，始終在方法中返回一個元素。
?。?），一次性代碼放在主循環(huán)以外這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆默認值，只需要被實例化一次，而不是每次調用你插件功能的時候都需要實例化，你應該把這段代碼放在插件方法的外面。
（6），大家學習完思考一下，如果項目技術選型換了這些插件又是強依賴“jQuery”機制，我們以前寫的插件將會不能用（假設不用jQuery的情況），如何做重構那？
明天的文章就會說一下這個問題，并且將會重構插件的關鍵邏輯，敬請期待。。。
相關文章
這篇文章主要給大家介紹了關于一次微信小程序內地圖使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了微信小程序實現登錄界面示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了JS實現右側懸浮框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了JS實現單行文字不間斷向上滾動的方法,以實例形式較為詳細的分析了文字滾動效果實現的原理與技巧,需要的朋友可以參考下2015-01-01
《JavaScript語言精髓與編程實踐》的讀者I22141提出了一問題：為什么下面這段代碼在JScript 和SpiderMonkey中表現不一樣：2008-07-07
微信小程序表單驗證插件WxValidate的二次封裝功能（終極版）
這篇文章主要介紹了微信小程序表單驗證插件WxValidate的二次封裝功能（終極版），文中給大家提到了最終版與前面2版的不同點,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了如何使用echarts實現3d柱狀圖和折線圖,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以了解一下2024-12-12
這篇文章主要介紹了js中取得變量絕對值的方法,較為詳細的分析了js中abs方法取絕對值的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
用Div仿showModalDialog模式菜單的效果的代碼
用Div仿showModalDialog模式菜單的效果的代碼...2007-03-03
JavaScript實現輕松創(chuàng)建二維數組的方法小結
這篇文章主要為大家詳細介紹了JavaScript中實現輕松創(chuàng)建二維數組的多種方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04