jQuery 教程 jQuery 首页
jQuery 简介
jQuery 语法
jQuery 选择器
jQuery 事件

jQuery 效果 jQuery 隐藏/显示
jQuery 淡入淡出
jQuery 滑动
jQuery 动画
jQuery stop()
jQuery Callback
jQuery Chaining

jQuery HTML jQuery 获取
jQuery 设置
jQuery 添加
jQuery 删除
jQuery CSS 类
jQuery css()
jQuery 尺寸

jQuery 遍历 jQuery 遍历
jQuery 祖先
jQuery 后代
jQuery 同胞
jQuery 过滤

jQuery AJAX jQuery AJAX 简介
jQuery 加载
jQuery Get/Post

jQuery 杂项 jQuery noConflict()

jQuery 实例 jQuery 实例

jQuery 参考手册 jQuery 参考手册
jQuery 选择器
jQuery 事件
jQuery 效果
jQuery 文档操作
jQuery 属性
jQuery CSS
jQuery Ajax
jQuery 遍历
jQuery 数据
jQuery DOM 元素
jQuery 核心

jQuery Mobile jQuery Mobile 实例

写出卓越的jQuery插件的10个技巧 jQuery #插件2012-04-26 09:41

本文针对jQuery插件的开发者列出了一些技巧，以帮助开发者写出更好的jQuery插件，并且这些技巧在插件的维护和扩展方面也有一定的作用。

1. 插件应该即开即用

这是我遇到的最大的问题，因此我将它放在第一个来讲。插件就是插件，不需要用户再进行额外的设置和定义，应该有一个最基本的预设。

$(“#container”).wTooltip();

jQuery的幻灯片放映插件就是个很好的示例，比如滑动的界面、上一个/下一个按钮等。我曾经见过有的插件需要用户设定一个包含ID和class的DIV，然后再通过插件功能来引用它。而实际上对于这种插件，应该直接设定好并提供启用/关闭选项。

2. 总是提供默认设置

一般插件都包括基础默认设置，因此，在开发插件时应提供一套默认值。这肯定会提高开发者使用插件的机率，并扩大插件的知名度。

var defaultSettings = {     mode            : ’Pencil’,     lineWidthMin    : ’0′,     lineWidthMax    : ’10′,     lineWidth       : ’2′ }; settings = $.extend({}, defaultSettings, settings || {});

上面的代码是以标准的方式来设定默认值，其他插件使用者能够通过各种设置来对插件进行扩展。

3. 独特的命名法

在写插件时，尽量令插件的类、ID、命名与众不同。这也不是件难事儿，只要避免与现有的JavaScript和CSS代码重名就可以了。

$(“#container”).tooltip();    //bad $(“#container”).wTooltip();   //good

在上面的例子中，在插件的普通命名前加上一个“W”，就能和可能存在的通用名称区别开来。包括“tab”或“holder”等通用术语我也使用这种包含独特关键字的命名方法。

_wPaint_button _wPaint_holder

同时，加入下划线的方法也可以确保ID或class的名称不与其他的重复，这也让我更加确信我写的jQuery插件将独一无二。

4. 插件代码标准化

大多数好的插件都有这段标准的jQuery代码，它包含了插件开发、维护和更新阶段所有的重要代码。如果想获得更多信息的话，可以查看我的jQuery Tooltip Plugin代码。

var defaultSettings = {     //settings }; $.fn.wPaint = function(settings) {     //check for setters/getters     return this.each(function()     {         var elem = $(this);         //run some code here         elem.data(“_wPaint”, wPaint);     }     //classes/prototyping }

需要注意以下五个关键点：

5. 简洁的代码

简单的文件结构和简洁的代码是非常重要的，因为这不仅便于别人看懂代码，也利于你自己梳理结构。强调这点是因为我遇到过一些奇怪的名称，连开发者自己都无法看懂。

./images/ ./includes/ ./themes/ ./wPaint.js ./wPaint.min.js ./wPaint.css ./wPaint.min.css

上面的这些结构就非常清晰，需要包含哪些文件，在哪里可以找到其他插件文件或是否需要查看jQuery库等等。

6. 使用class原型

这是一个相当广的范围，所以我在这里只简单提一下。使用原型模式主要有两个原因：

要知道有时候细小的步骤却真正能令你的插件与众不同。

10. 上传插件代码

有很多提供上传服务的网站，但我最喜欢Github和Google Code。

也许大多数开发者并不想上传自己的jQuery插件代码，特别是如果它是一个内部项目的话，但如果插件是为公众服务的，那么Github和Google code将显示出其神奇之处：提供插件的问题报告、即时动态和下载数量。

总之，以上这些技巧几乎涵盖了jQuery插件开发的核心，也为开发插件提供了一个比较标准的格式和结构。无论你是业余的还是专业的开发者，使用插件的人数与你所获的成就感是成正比的。

相关文章