jQuery插件開發模式（一)

想從事web前端開發的博友，那麼掌握一門js框架是必需的。（大多數同事好像對[網頁美工]這個職位的要求在本人看來是太膚淺）其中jQuery覺得算是js框架中的突出成員之一。（小建議：學習jQuery的捷徑--》一本官方API手冊(不懂的時候再翻吧）+官方的DEMO，特別是要注意DEMO中用的插件的寫法要學習，本人在學習，就走了一些彎路，痛苦ing *~*）。好了，說到插件，自jQuery從2005年開始發展至今，網上已有大量的優秀插件，“奉行拿來主義”的美工，就開始收集大量的插件，直接應用，本人認爲如果你是想真正研究JQuery的愛好者，或者說的再偉大一些爲jQuery的發展做點貢獻，那麼學會自己開發插件變得尤爲重要，呵呵，廢話太多了……進入正題。

 

今天，來講一個小例子，希望能給初學者學習jQuery插件開發起到一些幫助！[隔行變色的表格。]先看代碼

 

 

<script src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></script> <!--隔行變色表格的插件--> <script src="js/jquery-trBg.js" mce_src="js/jquery-trBg.js"></script> <!--基本的CSS樣式--> <style><!-- table,td{ border:1px solid #06C; border-collapse:collapse; } .oddcss{ background:#FFC;} .evencss{ background:#FFF;} .ch{ background:#ADBCE4;} .ch2{ background:#fff;} --></style>

 

頁面調用：

 

<script type="text/javascript"><!-- $(function(){ $("#tb1").trBg(); $("#tb2").trBg({oddCSS_Name:'ch'}); }); // --></script>

 

主html結構

 

<table id="tb1" width="464" border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <p> </p> <table id="tb2" width="464" border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>

 

最終效果：

 

 

 

 

 jquery-trBg.js文件內容

 

/************** ;(function($){ })(jQuery); //此爲函數閉包, //注意前後的　；　不可省略，這樣做是爲了不 //與其他JS框架混淆，同時在閉包內可以使用　$　 //其中在函數閉包內出現的this,爲jQuery對象,非DOM對象,與在調用該插件時相反 //封裝jQuery對象方法的插件基本框架 ;(function($){ $.fn.extend({ 方法名：function(value) { }, 方法名：function(options) { options=$.extend({ vara:5, varb:"letian" }); } }); })(jQuery); //封裝jQuery全局函數的插件基本框架 ;(function($){ $.extend({ 方法名：function(options) { options=$.extend({ vara:5, varb:"letian" }); } }); })(jQuery); ******************/ (function($){ $.fn.extend({ trBg:function(setting){//trBg爲插件名 var def={ oddCSS_Name:"oddcss", evenCSS_Name:"evencss" }; var ps=$.extend(def,setting); return $(this).each(function(){ $(this).find("tr:odd").addClass(ps.oddCSS_Name); $(this).find("tr:even").addClass(ps.evenCSS_Name); }); } }); })(jQuery);

 

以下是網上大家推薦在開發jQuery插件時，要考慮的相關因素

 

1.在JQuery命名空間內聲明一個特定的命名；
2.接收參數來控制插件的行爲；
3.提供公有方法訪問插件的配置項值；
4.提供公有方法來訪問插件中其他的方法（如果可能的話）；
5.保證私有方法是私有的；
6.支持元數據插件

 

具體說明，請查看此文：http://www.robysky.com/archives/171

 

如果對以上內容理解有不清楚的，可以參看這篇文章　jQuery.extend 函數詳解