適應的讀者：
1、有一定的jquery編程基礎但是想在技能上有所提升的人
2、前端開發的程序員
3、對編程感興趣的學生
為什么要學習jquery插件的編寫？
為什么要學習jquery插件的編寫？相信這是很多人都會有的問題，因為目前市面上的插件眾多基本上滿足日常的開發需求，但是我認為一下的這幾點情況是一定要學會插件基礎才能解決的：
1、如果有這樣的一種場景：假設如果你使用了一個控件，但是這個控件有缺少了一點點的相關的功能，那么如果你不懂jquery插件編寫的話，那么你就只能找其他的控件進行補充，這樣就會造成冗余，如果你會修改jquery插件的話，那么這樣的問題就解決了，因為你只需要修改一點點的功能就能夠完成任務
2、有些時候，如果你是要使用一個大型的控件（或者是框架）中的一小部分功能，那么你就需要引入整個控件（或者是框架）這樣就會使系統過於龐大，解決的方法是如果像是制定一個對話框等這些簡單的功能的話，那么就可以自行定義一個以達到不是太過龐大
3、我們可以 把常用的代碼進行封裝，方便以后進行重用
綜上所述，一般我們編寫jquery控件是用來封裝常用的代碼，也可以對一些簡單功能進行編寫或者對某些功能進行改寫
基礎知識講解：
首先要學習怎么編寫jquery插件，我們應該了解有幾種調用插件的方式：
1、通過$.extend()來拓展jquery
2、通過向$.fn來想jquery添加方法
3、通過$.widget()應用jQuery UI部件工場方法創建
其中的方式1沒辦法調用選擇器，僅僅被jQuery理解成為添加靜態方法，所以我們使用的時候不需要選中DOM對象
示例代碼：
HTML代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="name.js"></script> </head> <body> <script type="text/javascript"> $.nameLength('leslie'); </script> </body> </html>
JavaScript代碼：
$.extend({ nameLength:function(name){ alert(name.length); } });
運行結果如下：
其中第一種方式開發開發插件比較少見，一般的插件都是使用第二種方法進行開發的
第二種方法是：往$.fn中添加一個方法，后面所要填寫的就是方法的名稱
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DEMO</title> </head> <body> <div class="test" alt="No.1">這是第一段變紅色的代碼</div> <div class="test" alt="No.2">這是第二段變紅色的代碼</div> <div>這一段代碼不變色</div> </body> <script type="text/javascript" src="jquery.js"></script> <script src="test1.js"></script> <script type="text/javascript"> $('.test').changeColor(); </script> </html>
JavaScript代碼：
$.fn.changeColor=function(){ this.css('color','red'); $(this).append(" "+$(this).attr("alt")); }
運行的結果如下：
從上面的運行結果我們可以得出結論：插件調用成功，但是問題來了，第二段的文字是要加上NO.2但是卻加上了No.1，這個也就是直接使用方法帶來的一個問題，就是會將所有的復合條件的內容都進行統一的設置，那么要怎樣才可以編程No.2呢？那就需要引入一個方法來對每一個復合要求的內容進行“個性化”，引入$.each()就可以解決問題了
將以上的JavaScript修改為：
$.fn.changeColor=function(){ this.css('color','red'); this.each(function(){ $(this).append(" "+$(this).attr("alt")); }) }
運行的效果如下：
第三種方式調用這里我們先不進行講解，待后續會因為需要jQuery UI的基礎的朋友才能更好的理解，所以有機會將會在下一次寫插件編程對其進行詳細的解剖
鏈式調用
細心的你可能會發現，這樣編寫出來的插件不能進行鏈式調用的，也就是：不能出現：$('div').function1('param1').function2('param2')，那么這個問題怎么解決呢，其實很簡單只需要在插件中支持可以鏈式調用的方法前面加上return就可以了
將上面的JavaScript修改如下就可以鏈式調用了
$.fn.changeColor=function(){ this.css('color','red'); return this.each(function(){ $(this).append(" "+$(this).attr("alt")); }) }
同時一個強大的插件也絕不僅僅是允許用戶對其進行調用的，同時用戶也可以自定義的對其進行傳參，使得插件更具靈活性，這里的傳參跟普通的函數傳參是一樣的，略過
保存用戶自定義參數
先看一下下面的代碼
HTML代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DEMO</title> </head> <body> <div class="default">默認的樣式</div> <div class="change">修改后的樣式</div> </body> <script type="text/javascript" src="jquery.js"></script> <script src="test1.js"></script> <script type="text/javascript"> $('.default').fontSet(); $('.change').fontSet({ 'color':'green', 'fontSize':'20px' }); </script> </html>
JavaScript代碼如下：
$.fn.fontSet=function(options){ var font={ 'color':'red', 'fontSize':'12px' }; var setting=$.extend({},font,options); return this.css({ 'color':setting.color, 'fontSize':setting.fontSize }) }
運行情況如下：
在JavaScript中的extend方法中添加{}是用來對防止用戶傳入的值，直接覆蓋掉默認的數值
注意：在插件中的定量必須為鍵值對數組，否則一旦編寫錯誤的話，那么就會出現沒辦法將插件加載進來的情況
面向對象插件開發
在開發大型的插件的時候，如果直接像上面的這種方法一樣，那么會導致代碼混亂，管理難度大等諸多的問題，所以就需要像常規編程一樣使代碼更便於管理，因此面向對象的插件開發也就變得格外的重要，面向對象開發的大致格式可以如下所示：
//定義對象的構造函數 var class_name=function(ele,opt){ this.element=ele; this.defaults={ //default setting }; this.options=$.exetend({},this.defaults,opt); } //定義對象的方法 class_name.prototype = { method_name:function() { return ………… } }; //在插件中使用對象 $.fn.plugin=function(){ //創建func實體 var func=new class_name(this,options); //調用其方法 return func.method_name(); }
實戰開發經驗分享
目前市面是的插件編程琳琅滿目，但是唯獨對開發經驗這一塊說的比較少，下面就結合我對插件開發的經驗以及其他人開發的優秀特點驚醒分析，希望讀者可以收獲一些東西，方便以后的使用
1、在插件開發的過程中我們要盡量的保證插件內部環境的獨立性，也就是說內部盡量的不被外界干擾，這時候閉包就派上用場了，而且在閉包的前面要加上; 以防止外部的語法錯誤使得錯誤指向插件內部
基本格式如下：
;(function($){ //main contain })(jQuery);
2、開發中常見的方法
find(‘m’);//主要用法是獲取每個控件下面是否存在特定class屬性或者id屬性的對象
each() //主要是用來遍歷每個控件
each(options,function(key,value)) //獲取在options范圍內每次循環的key和value的值
each(function(i,item)) //i為遍歷對象位於第幾個，item為DOM
3、由於jquery 插件是基於jquery的，那么就要求我們要調用jquery插件之前要先調用jquery
4、對於像KO（knockout.js）等這些腳本支持自定義的屬性值，這又是怎樣做到的呢？
例如HTML代碼中有data-name這個屬性，那么我們可以在插件中定義一對默認的鍵值對為name:'xxx'，然后通遍歷所有的default中的key值，並且調用attr屬性查找
是否存在data-key這個屬性，如果這個屬性為undefined那么就將其傳入value，但是上面的這些插件都是要調用JS進行激活的
如果有哪位大神知道怎樣編寫像Boostrap這樣的直接寫class就可以的插件，請告訴我實現方法，小菜鳥不勝感激
5、在插件開發的過程中我發現，怎樣在一個事件觸發的同時觸發另一個事件
例如：要實現拖動的效果，那么我們就必須在觸發點擊事件的同時觸發鼠標移動事件，
實現的代碼簡單的可以寫為：
btn.mousedown(function(event) { /* Act on the event */ $(document).mousemove(function(event){ //input your content }) });
這樣就可以實現兩種事件同時觸發了
6、兼容性問題也是要注意的，在CSS3中我們要注意IE、FixFox、Chrome這些瀏覽器之間的兼容性問題，一般我們忽略IE的那些低版本的瀏覽器，而要在FixFox前面加上-moz，例如：-moz-box-shadow 而要在Chrome前面加上-webkit，對於Safari也是一樣的，這種差異主要是內核的不同導致的
UI插件的編寫流程
1、先要對所要制作的UI插件進行分析，然后對其進行分層，接着就編寫對應層次的div
2、第二步，我們要通過編寫css達到將控件的初始化狀態制作出來
3、結合要實現的效果，制作JS腳本，並且要保證無誤的情況下才能進行第四步
4、將JS文件通過插件編程的形式重寫，這樣UI插件就完成了