10 个技巧助你写出卓越的jQuery插件

标签: 技巧 卓越 jquery | 发表时间:2012-03-05 16:29 | 作者:
出处:http://www.iteye.com
目前网络中存在大量能够实现各种功能的jQuery插件,有的插件表面上看很不错,但在实际使用过程中会出现很多问题。而大多数插件只要再加入一点点额外的功能,就能从“优秀”变成“卓越”,并且有更广泛的用处。

本文针对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
}

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

  • 插件外的默认设置不需要每次都实例化。
  • Setter&Getter方法并非必需,但在每个主要循环运行前都要进行检查。
  • 返回每个元素时不要破坏jQuery的方法链流程。
  • 存储所有元素使用的数据,因为之后Setter&Getter方法可能会用到。
  • 最后设置所有外部的Classes/Prototypes。
5. 简洁的代码

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

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

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

6. 使用class原型

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

  • 一是不必实例化每个方法的单独拷贝,这样的话效率更高,运行速度更快。
  • 二是只引用每个对象方法,不保存其拷贝,可以节省大量内存。
function Canvas(settings)
{
    this.canvas = null;     
    this.ctx = null;
}
 
Canvas.prototype = 
{
    generate: function()
    {
        //generate code
    }
}

它还能帮你组织代码,使其能重复使用。上面的例子中只有Canvas对象对每个新对象进行实例化,原型只是被引用而已。

7. 提供Setters & Getters方法

提供Setters & Getters方法并非必需,但我觉得这是一个不错的选择。下面的代码是关于允许插件被修改,最基本的设置如下:
if(typeof option === 'object'){
    settings = option;
}else if(typeof option === 'string'){
    if(
        this.data('_wPaint_canvas') &&
        defaultSettings[option] !== undefined
    ){
        var canvas = this.data('_wPaint_canvas');
 
        if(settings){
            canvas.settings[option] = settings;
            return true;
        }else{
            return canvas.settings[option];
        }
    }else return false;
}

8. 在所有浏览器上进行测试

在所有浏览器上进行测试对于插件是否能生存至关重要。开发者无法发现代码中的故障,但用户肯定能发现,如果出现了很多问题,毫无疑问,你的插件就被淘汰了。有一次,我在这个 jQuery Color Picker Plugin插件中发现了一些小Bug,这些Bug令该插件在IE7中完全不可用,原因是IE7不支持“inline-block”元素,但只需要一个简单的修正就可以解决这个问题。

写好插件后,你会想在第一时间发布它,但一定要Hold住并多花一天来测试。这样做不仅能修复任何可能出现的简单错误,还能给你一些改进的灵感。

9. 打包发布

当你准备好发布插件后,别忘记以下三个步骤:

  • 为较复杂的插件部分写说明文档。
  • 无论是通过文件名还是在文档中某处标明你的插件版本,让用户能够了解自己使用的版本,并能及时检查更新。
  • 最后为你的代码提供MINI版本,只需要几分钟便能增加开发者再次使用你的插件的机率。
要知道有时候细小的步骤却真正能令你的插件与众不同。

10. 上传插件代码

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

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

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

英文原文: 10 Tips for Writing Awesome jQuery Plugins

感谢 sherry617 投递这篇资讯

已有 2 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [技巧 卓越 jquery] 推荐:

10 个技巧助你写出卓越的jQuery插件

- - ITeye资讯频道
目前网络中存在大量能够实现各种功能的jQuery插件,有的插件表面上看很不错,但在实际使用过程中会出现很多问题. 而大多数插件只要再加入一点点额外的功能,就能从“优秀”变成“卓越”,并且有更广泛的用处. 本文针对jQuery插件的开发者列出了一些技巧,以帮助开发者写出更好的jQuery插件,并且这些技巧在插件的维护和扩展方面也有一定的作用.

jQuery常用技巧

- - CSDN博客推荐文章
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2、jQuery对象与dom对象的转换. 只有jquery对象才能使用jquery定义的方法. 注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象.

一些实用的 jQuery 技巧

- - ITeye资讯频道
jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果. 本文将为你介绍一些实用的技巧,希望可以帮助你更加高效地使用jQuery. Tip 1:使用最新版本. jQuery每一个新版本都会包含一些性能优化和bug修复,为了便于升级,你可以使用Google CDN服务托管的jQuery库.

(译)你应该知道的jQuery技巧

- - 破狼 Blog
帮助提高你jQuery应用的简单小技巧. Hover切换class类. 在浏览器标签/新窗口打开外部链接. 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); Back to top.

快速开发 jQuery 插件的 10 大技巧

- - 开源中国社区最新新闻
在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式. 这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. 使用相同的设计模式和架构也让修复bug或者二次开发更容易. 一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂.

8个超实用的jQuery技巧攻略

- - 开源软件 - ITeye博客
如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能. 2)使用jQuery设定文本大小. 使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少). 使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验. 使用这段代码帮助你更改样式列表. 此代码对于长时间点击单页面非常实用,你可以在重要关头点击“返回顶部”功能.

程序员都会的 35 个 jQuery 小技巧

- - 外刊IT评论
收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发.. 注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量. This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images..

GA小技巧:使用jQuery来方便的布置事件跟踪代码

- - 标点符
Google Analytics的事件跟踪是个神器,基本上你能想到什么他就能帮你做什么. 但是按照Google Analytics的帮助文章中方法去布置可能会让你觉得麻烦. 以下为我使用的小技巧分享给大家. 如果你需要跟踪某几个链接在页面上的点击数. 事先给需要记录的点击链接上添加一个类. 跟踪地址.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).