這次隨筆，向大家介紹如何編寫jQuery插件。啰嗦一下，很希望各位IT界的‘攻城獅’們能和大家一起分享，一起成長。點擊左邊我頭像下邊的“加入qq群”，一起分享，一起交流，當然，可以一起吹水。哈，不廢話，進入正題。
jQuey是一個非常好用的javascript類庫，提供了非常多的接口給程序員使用。但在某些具體方面，並沒有完全提供解決方法，這就要求我們自己實現。jQuery官方也提供jQuery拓展的標准。編寫jQuery插件時，應該注意一下幾點原則：
1. 避免全局依賴。
2. 避免第三方破壞。
3. 兼容jQuery操作符’$’和’jQuery’
這三個原則非常重要，否則，這個插件將會失去插件的意義。
jquery插件命名，一般在前面加上jquery，這樣別人就知道這是jQuery插件。如：jquery.modelselect.min.js
加了min表示壓縮版，壓縮版一般處理方式是去掉空格換行，也有些公司為了保護代碼，直接重構變量和私有函數名，不過這樣做在一般程序員是有效的，但在高手面前，並沒什么卵用，有人一樣能把它還原。
OK, jQuery插件的標准代碼格式如下，（需要使用閉包，對於javascript閉包，本博客已博文專門介紹）：
1 (function ($) { 2 //插件內部代碼 3 })(jQuery);
以上代碼的第三行，可以是window.jQuery或者$,按照官方的解釋，這三者是等價的。
在這寫一個小demo, 就是插入一個個人信息。
1 (function ($) { 2 $.fn.userInfo = function (options) { //定義插件方法名 3 var dft = { 4 //定義一個對象，設置默認值 5 name: 'Steven Zhu', //名 6 email: 'zhuttymore@126.com', //鏈接 7 size: '14px', //文字大小 8 align: 'center '//文字位置，left || center || right 9 }; 10 var opt = $.extend(dft, options);//這個很關鍵，待會跟你說。 11 var style = 'style="font-size:' + opt.size + ';text-align:' + opt.align + ';"'; //調用默認的樣式 12 var name = '<p' + ' ' + style + '>name:<a target="_blank" >' + opt.name + '</a></p>'; 13 var email = '<p' + ' ' + style + '>name:<a target="_blank">' + opt.email + '</a></p>'; 14 $(this).append(name); 15 $(this).append(name); 16 } 17 })(window.jQuery);
好了，說說$.extend(), 這個方法，他的作用就是擴展，以上這段代碼就是將options拓展到dft,最后賦給opt.這樣寫為了可讀性。
所以這段代碼還可以這樣。
options = $.extend({//here is default values},options);
這樣，看起來就精簡多了。
很感謝一樓的評論，提醒我考慮的性能和鏈式操作。我們再寫插件時，把當前對象return回去，這樣返回的又是jQuery對象，這樣可以鏈式操作。結合上面一段，代碼修改如下：
1 (function ($) { 2 $.fn.userInfo = function (options) { //定義插件方法名 3 options = $.extend({ 4 //定義一個對象，設置默認值 5 name: 'Steven Zhu', //名 6 email: 'zhuttymore@126.com', //鏈接 7 size: '14px', //文字大小 8 align: 'center '//文字位置，left || center || right 9 },options); 10 11 12 var style = 'style="font-size:' + opt.size + ';text-align:' + opt.align + ';"'; //調用默認的樣式 13 var name = '<p' + ' ' + style + '>name:<a target="_blank" >' + opt.name + '</a></p>'; 14 var email = '<p' + ' ' + style + '>name:<a target="_blank">' + opt.email + '</a></p>'; 15 this.append(name); 16 this.append(name); 17 18 return this; 19 } 20 })(window.jQuery);
調用：
在引入插件之后，直接調用就行。
1 <script> 2 $("#user-info").userInfo(); 3 <script">
這樣會在dom的id="user-info"里輸出插件的默認值，即顯示結果是：Steven Zhu zhuttymore@126.com
要改變里面的值，只需要加入你想要的參數就行。如下：
<script> $('#user-info').userInfo({ name: 'Sun Zhu', email: '734271284@qq.com', size: '16px', align: 'right' }); <script">
這樣就改變默認值了。輸出結果就是：Sun Zhu 734271284@qq.com，文字右對齊。
原創作品，轉載請注明出處：http://zhutty.cnblogs.com