这是一篇关于jQuery插件开发的文章，下面小编就与大家一起分享。

【前言】

jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件，经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。

【基础】

a)样式

很多人会认为样式是个很复杂的东西，需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI，抛开图片设计不说，其实css也就是那么些属性：position,margin,padding,width,height,left,top,float,border,background...

UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。举个简单的例子，一个简单的页面，马虎的人：

jQuery是一个框架!压缩后有30多k吧。

细心的人：

body

{

font-family:'宋体';

font-size:12px;

}

jQuery是一个框架!压缩后有30多k吧。

专心的人：

body

{

font-family:'Verdana','宋体';

font-size:12px;

}

细心的人：

body

{

font-family:'宋体';

font-size:12px;

}

jQuery是一个框架!压缩后有30多k吧。

专心的人：

body

{

font-family:'Verdana','宋体';

font-size:12px;

}

jQuery是一个框架!压缩后有30多k吧。

我们对比一下三者的UI效果：

一目了然，或许很多的站点失去关注正是因为这不起眼的font-family,font-size。当然这还只是个简单的例子，掌握css应该从简单做起，从基本入手，在实践中运用并不断深入。

b)脚本

我们同样需要对javascript有着深刻的理解，对dom, xhr, Regex, call-apply, prototype等都应该有一定的了解。

有人会说要这些有啥用啊，对dom的操作其实通过getElementById, getElementsByTagName以及其他的API都可以轻松的完成，这话是没错，当思路确定后，思想才是重点，一段代码是精华还是糟粕很容易就可以区分出来，究其原因还是取决你自己，举个简单的例子，大量的html组装，路人甲：

var a = new Array(10);

var menu = '';

for (var i = 0; i < a.length; i++) {

menu += '' + a[i] + '';

}

路人乙：

String.prototype.format = function() {

var args = arguments;

return this.replace(/{(/d{1})}/g, function() {

return args[arguments[1]];

});

};

var a = new Array(1,2,3,4,5,6,7,8,9,0);

var m = '{0}';

for (var i = 0; i < a.length; i++) {

menu += m.format(a[i]);

}

在实现方式明确的情况下，优雅高效的代码显然更具吸引力。

【实践】

jQuery开发或使用，更多的灵感是来自实践，而不是copy||paste(奉行拿来主义的同学可以离开了)。

那么在这里我会用一个简单的例子来阐述jQuery插件开发的流程，能否举一反三就看各位看官了。

【目的】

开发一个插件之前我们需要对自己的目的有一个清醒的认识，有很明确的方向感，那么此次我作为示例插件的目的，就是呈现一个用于UI的Slider - 滑动条，常年从事于或暂时专注于win32开发的同学应该比较了解。

草图

真正动手编码之前我们还需要有一个草图来描述自己插件的“长相”(事件驱动或API封装的可以忽略)。

很多的同学在做UI开发前往往会忙于搜集各种小图片(非精通ps或iconworkshop人士)，其实漂亮的图标的确可以美化我们的UI，不过我一般的处理方式是编写易于扩展的css，前期的UI呈现尽量少使用图片，多用线条完成。

ok，言归正卷，那么我的slider设计草图是:

解释下下文将用到的几个词：

slider: 此部分是作为拖拽手柄来使用，用户可以通过拖拽此部分来更新completed bar的位置。

completed: 此部分作为bar的内嵌元素，作为特殊效果来显示slider与起始点的距离，亦即与slider的value值关联。

bar: slider的载体，completed的满值。

思路：

slider作为手柄提供拖拽功能，作用区域为bar，拖拽过程中completed条必须实时更新(长度)，影响区域为slider至bar左端的距离。

【编码】

开发jQuery UI/Effect 插件在很多时候都需要与UI交互，因此在呈现上需要提供Html tree来绘制我们的插件，最终通过js dom来输出，那么在绘制简单的dom结构的时候我会直接用js来完成，不过如果嵌套比较复杂的话，我们还是应该先用html来完成，然后转变成js输出。

html tree:

deafultbar -> bar

jquery-completed -> completed

jquery-jslider -> slider

前期UI呈现上我们不使用图片，尽量用线条、颜色来完成：

Css

将bar的position属性设置成relative，以方便子节点的浮动(子节点使用position:absolute来获得内联浮动效果)。

那么我们可以看下这个css和html tree产生的UI效果：

ok,具备了所需的元素 - slider, completed, bar.

一些规范:

当我们画出了UI之后就可以正式编写jQuery插件代码了，不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解。

1. 使用闭包：

(function($) {

// Code goes here

})(jQuery);

这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢?

a) 避免全局依赖。

b) 避免第三方破坏。

c) 兼容jQuery操作符'$'和'jQuery '

我们知道这段代码在被解析时会形同如下代码：

var jq = function($) {

// Code goes here

};

jq(jQuery);

这样效果就一目了然了。

2. 扩展

jQuery提供了2个供用户扩展的‘基类’ - $.extend和$.fn.extend.

$.extend 用于扩展自身方法，如$.ajax, $.getJSON等，$.fn.extend则是用于扩展jQuery类，包括方法和对jQuery对象的操作。为了保持jQuery的完整性，我比较趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend.

3. 选择器

jQuery提供了功能强大，并兼容多种css版本的选择器，不过发现很多同学在使用选择器时并未注重效率的问题。

a) 尽量使用Id选择器，jQuery的选择器使用的API都是基于getElementById或getElementsByTagName，因此可以知道效率最高的是Id选择器，因为jQuery会直接调用getElementById去获取dom，而通过样式选择器获取jQuery对象时往往会使用 getElementsByTagName去获取然后筛选。

b) 样式选择器应该尽量明确指定tagName, 如果开发人员使用样式选择器来获取dom，且这些dom属于同一类型，例如获取所有className为jquery的div，那么我们应该使用的写法是$('div.jquery')而不是$('.jquery')，这样写的好处非常明显，在获取dom时jQuery会获取div然后进行筛选，而不是获取所有dom再筛选。

c) 避免迭代，很多同学在使用jQuery获取指定上下文中的dom时喜欢使用迭代方式，如$('.jquery .child')，获取className为jquery的dom下的所有className为child的节点，其实这样编写代码付出的代价是非常大的，jQuery会不断的进行深层遍历来获取需要的元素，即使确实需要，我们也应该使用诸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2)之类的方式。

开始编码

话题有点扯远，ok，在对UI有了清晰的认识后我们就可以使用js来输出html了。

我们使用jSlider来命名这个slider插件(为了避免插件冲突，插件命名时也应十分考究，这里我就俗一回)。

$.extend($.fn, {

///

/// apply a slider UI

///

jSlider: function(setting) {

}

});

在插件开发中比较标准的方式是将元数据独立出来并开放API，比如这里的setting参数传入值，有时候为了减少代码编写量，我习惯于直接在插件内赋值：

var ps = $.extend({

renderTo: $(document.body),

enable: true,

initPosition: 'max',

size: { barWidth: 200, sliderWidth: 5 },

barCssName: 'defaultbar',

completedCssName: 'jquery-completed',

sliderCssName: 'jquery-jslider',

sliderHover: 'jquery-jslider-hover',

onChanging: function() { },

onChanged: function() { }

}, setting);

规范的做法：

$.fn.jSlider.default = {

renderTo: $(document.body),

enable: true,

initPosition: 'max',

size: { barWidth: 200, sliderWidth: 5 },

barCssName: 'defaultba