jQuery 插件开发详解

JavaScript jQuery 插件开发

jQuery 插件开发其实很简单

jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件

经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。

【基础】

a)样式

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

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

复制代码代码如下:

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

细心的人：

复制代码代码如下:

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

专心的人：

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 我们对比一下三者的UI效果：

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

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

有人会说要这些有啥用啊，对dom的操作其实通过getElementById, getElementsByTag Name以及其他的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 tr ee来绘制我们的插件，最终通过js dom来输出，那么在绘制简单的dom结构的时候我会直接用js来完成，不过如果嵌套比较复杂的话，我们还是应该先用html来完成，然后转变成js输出。

html tree:

复制代码代码如下: