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