• 帮助维护整个网站的一致的代码风格
• 遵循库的设计和利用工具来提高可重用性
• 利用jQuery提供的现有代码基础，不用从头开始编写每样东西

扩展jQuery的两种形式：

• 在$上直接定义的实用工具函数；
• 对jQuery包装集进行操作的方法（所谓的jQuery命令）

给文件和函数命名

jQuery团队推荐的命名格式为：

• 文件名已jQuery为前缀
• 前缀后接插件的名称
• 文件名以.js结尾                eg    jquery.fred.js

小心$

如上一章已经讨论过的一种习惯用法:

(function($){  //Plugin definition goes here  } )(jQuery )；

简化复杂的参数列表

jQuery函数中如果可选的参数被省略就会提供智能的默认值，但是参数的增多会导致事情变坏。比如对于下面一个函数：

function complex(p1,p2,p3,p4,p5,p6,p7){  }  //函数要求有7个参数，后六个参数是可以省略的

• 如果调用者想要指定p7的话，就必须使用占位符而写成：complex（valueA,null.null,null,null.null,null,valueB）;
• 更夸张的是如果想要显示指定p3和p4、p7  则需要写成complex（valueA,null.valueC,valueD,null.null,null,valueB）;

太麻烦了！！jQuery提供了另一种方法——选项散列对象。

比如第二个例子可以用complex（valueA,{p3:valueC,p4:valueD,p7:valueB}）来实现

创建操作数据的实用工具函数

$.toFixedWidth(value,length,fill)  //把传入值的格式化为指定长度的定宽字段。可以传入填充字段，fill，如果没有传入则默认为0

（function($){

$.toFixedWidth() = function(value,length,fill){

//函数体算法

}

}）（jQuery）

编写日期格式器

$.formateDate(date,pattern)  //对传入日期根据提供的模式进行格式化

（function($){

$.formateDate() = function(date,pattern){

//函数体算法

}

}）（jQuery）

要添加包装器到jQuery，必须把包装器方法指派为$命名空间内名为fn的对象的属性

创建包装器的一般模式是$.fn.wrapperFunctionName = function(params){ function-body };

eg  创建把已匹配的DOM元素的颜色设置为蓝色的方法

(function($){

$.fn.makeItBlue = function(){

return this.css('color','blue');

}

})(jQuery)

当需要根据条件处理单独的元素的时候，可以使用类似于下面的方法

(function($){

$.fn.someNewMethod= function(){

return this.each(           //this在这里指的是每个单独的DOM元素而非包装集

//函数体，可对每个DOM元素进行操作

);

}

})(jQuery)

在包装器方法上应用多个操作

更常用的插件方法是在包装集上执行多个操作，这样的整合能够很好地实现某些特定的需求，比如切换表单中文本字段的只读状态并且同时一致地改变文本字段的外观。

setReadOnly(state)把包装集中文本字段的只读状态设置为state所指定的状态，同时调整透明度

(function($){
  $.fn.setReadOnly = function(readonly) {
    return this.filter('input:text')                        //只有文本字段收到影响
      .attr('readonly',readonly)                         //如果有readonly的属性就删除，没有就添加
      .css('opacity', readonly ? 0.5 : 1.0);         //更改文本字段的透明度
  }
})(jQuery);               //保存为jquery.jqia.setreadonly.js文件

插件的使用方法  $('#billingAddress input').setReadOnly(same);

保留在包装器方法之内的状态

电子相册插件的实现：

(function($){
  var settings;          //setting放在外闭包中可以供showPhoto函数使用

  $.fn.photomatic = function(callerSettings) {
    settings = $.extend({
      photoElement: '#photomaticPhoto',
      transformer: function(name) {
                     return name.replace(/thumbnail/,'photo');
                   },
      nextControl: null,
      previousControl: null,
      firstControl: null,
      lastControl: null
    },callerSettings||{});
    settings.photoElement = $(settings.photoElement);
    settings.thumbnails = this.filter('img');
    settings.thumbnails.each(function(n){this.index = n;});
    settings.current = 0;
    settings.thumbnails.click(function(){ showPhoto(this.index); });
    settings.photoElement.click(function(){
      showPhoto((settings.current+1) % settings.thumbnails.length);
    });
    $(settings.nextControl).click(function(){
      showPhoto((settings.current+1) % settings.thumbnails.length);
    });
    $(settings.previousControl).click(function(){
      showPhoto((settings.thumbnails.length+settings.current-1) %
                settings.thumbnails.length);
    });
    $(settings.firstControl).click(function(){
      showPhoto(0);
    });
    $(settings.lastControl).click(function(){
      showPhoto(settings.thumbnails.length-1);
    });
    showPhoto(0);
    return this;
  };

  var showPhoto = function(index) {
    settings.photoElement
      .attr('src',
            settings.transformer(settings.thumbnails[index].src));
    settings.current = index;
  };

})(jQuery);
 

演示了利用闭包已跨越jQuery插件的作用域而维持状态，以及启用私有实现函数的创建。