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 函数详解