手把手教你怎麼寫jQuery插件

[原創做品]手把手教你怎麼寫jQuery插件

　　此次隨筆，向你們介紹如何編寫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);

 

這樣，看起來就精簡多了。

調用：

　　在引入插件以後，直接調用就行。

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

在此特別感謝我在上海的朋友：Oliver。這貨是很牛的程序員，初次寫jquery插件時，多虧他的引導。