jQuery技术

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

字号+ 作者:H5之家 来源:H5之家 2017-03-25 11:00 我要评论( )

目前网络中存在大量能够实现各种功能的 jQuery 插件,有的插件表面上看很不错,但在实际使用过程中会出现很多问题。而大多数插件只要再加入一点点额外的功能,就

目前网络中存在大量能够实现各种功能的 jQuery 插件,有的插件表面上看很不错,但在实际使用过程中会出现很多问题。 而大多数插件只要再加入一点点额外的功能,就能从“优秀”变成“卓越”,并且有更广泛的用处。

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

1. 插件应该即开即用

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

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

2. 总是提供默认设置

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

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

3. 独特的命名法

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

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

_wPaint_button _wPaint_holder

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

4. 插件代码标准化

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

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

5. 简洁的代码

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

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

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

6. 使用class原型

这是一个相当广的范围,所以我在这里只简单提一下。

使用原型模式主要有两个原因:

  • 一是不必实例化每个方法的单独拷贝,这样的话效率更高,运行速度更快;
  • 二是只引用每个对象方法,不保存其拷贝,可以节省大量内存.
  • 它还能帮你组织代码,使其能重复使用。 上面的例子中只有 Canvas 对象对每个新对象进行实例化,原型只是被引用而已。

    7. 提供Setters & Getters方法

    提供 Setters & Getters 方法并非必需,但我觉得这是一个不错的选择。

    下面的代码是关于允许插件被修改,最基本的设置如下:

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

    在所有浏览器上进行测试对于插件是否能生存至关重要。 开发者无法发现代码中的故障,但用户肯定能发现,如果出现了很多问题,毫无疑问,你的插件就被淘汰了。

    有一次,我在这个 jQuery Color Picker Plugin 插件中发现了一些小 Bug,这些 Bug 令该插件在 IE7 中完全不可用, 原因是 IE7 不支持 “inline-block” 元素,但只需要一个简单的修正就可以解决这个问题。

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

    9. 打包发布

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

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

    10. 上传插件代码

    有很多提供上传服务的网站,但我最喜欢 Github(如果没听说过 git,请看看这篇文章:Git教程 快速上手)和 Google Code。

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

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

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

    继续阅读关于 的文章

    欢迎订阅我的微信公众帐号,只推送原创文字。欢迎扫描二维码订阅:

    justjavac微信公众帐号

    公众号

    欢迎订阅我的微信公众帐号,只推送原创文字。欢迎扫描二维码订阅:

    justjavac微信公众帐号

    推荐阅读 热门文章
  • 1 代码之谜(零)- 开篇/前言/序

  • 2 代码之谜(四)- 浮点数(从惊讶到思考)

  • 3 为什么 ++[[]][+[]]+[+[]] = 10?

  • 4 代码之谜(三)- 运算符

  • 5 千万不要把 bool 当成函数参数

  • 6 一个合格的程序员应该读过哪些书

  • 7 代码之谜(二)- 语句与表达式

  • 8 代码之谜(一)- 有限与无限

  • 10 代码之谜(五)- 浮点数(谁偷了你的精度?)

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 整理了一些jQuery关于事件冒泡和事件委托的技巧

      整理了一些jQuery关于事件冒泡和事件委托的技巧

      2017-03-25 10:01

    • 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery

      前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery

      2017-03-25 10:00

    • jQuery全屏滚动插件fullPage.js

      jQuery全屏滚动插件fullPage.js

      2017-03-25 09:12

    • jQuery、zepto、js应用之小技巧

      jQuery、zepto、js应用之小技巧

      2017-03-22 09:01

    网友点评
    f