使用jQuery(中级),第2部分:创建自己的插件

简介

在该系列之前的文章 使用 jQuery,第 2 部分:中级 jQuery:UI 项目 中,我介绍了使用 jQuery 代码中的插件来提高 web 应用程序的效率。但必须知道,这些插件不是自己凭空产生的,它们是由开发人员编写、测试并完善的,这些人员为 jQuery 社区奉献了自己的业余时间。我们做这些都是免费的,是出于对自己代码的热爱。本文主要关注您如何回报这个伟大的社区,即如何编写自己的插件并上传到 jQuery 的插件页面。这可以让所有人使用您创建的插件,可以让整个 jQuery 开发社区变得更好。今年您也做出自己的贡献吧。

在编写本文中的插件时,我发现插件的创建过程以及用来创建它的框架非常简单明了。困难的地方在于想一些其他人还没有做过的事情,并编写一些能真正完成某些操作的 JavaScript 代码。由于插件结构简单明了,对于新手它简单易学,对于高手它很灵活,因此插件的数量急速上升。

当然,在研究本文所涉及的内容时,我还发现每个作者编写插件的风格都不同,jQuery 允许好几种不同的插件编写风格。在本文中,我集中介绍最简单的一种风格,以及 jQuery 本身推荐的一种风格,插件弹出后您就会看到差别或不同的选项。

描述插件

创建插件的第 1 步当然是想一个好点子。像大部分点子一样,其他人总会给您创造机会。以我在本文中开发的插件为例,它不是什么新颖的概念,但在我撰写文本的时候,jQuery 插件社区还找不到该插件。我知道我个人会从该插件中受益良多。

我的插件是一个 NumberFormatter 插件。处理服务器端代码(比如 Java 或 PHP)和国际化的用户应该很熟悉数字格式化。众所周知,并非每个人都用相同的方式格式化数字。例如,并非每个人都使用 “里” 来度量距离。在美国,数字的写法可能是 “1,250,500.75”(这个数字是从我的税收表上抄来的),但在其他国家的写法可能完全不同:德国是 “1.250.500,75”,法国是 “1 250 500,75”,瑞士是 “1'250'500.75”,日本是 “125,0500.75”。数字完全相同,但是在向 web 应用程序用户展示时使用不同的格式。

因此,问题归结到,当编写一个国际化应用程序时,如何向不同国家的人展示这些数字?当然,解决方案是使用服务器端格式化,这种解决办法非常常见。Java 有一个健壮的格式化库,使数字的格式化变得非常简单。当使用数字在服务器上设置页面时,服务器负责处理这些数字。但是,很多时候数字可能不在服务器上,因此您需要一种方法在客户机上格式化数字,而不需要与服务器会话。

我在这里描述的典型用例如下。您的 web 应用程序中有一个输入字段,要求用户输入他们的薪水。在美国,用户可能以各种格式输入 “$65000”、“65,000”、“65000” 和 “65,000.00”。所有这些数字都是相同的,但是您需要控制这些数字在屏幕上的显示方式,这样才能提供更好的用户体验。您可以 在输入数字之后调用服务器,但是如果有许多使用不同格式的数字字段就太麻烦了。此外,如果您可以在客户端处理该问题,并向用户提供即时反馈,那么就不需要这样做了。

因此,我建立了一个空缺,之后我将尝试使用 JavaScript/jQuery 功能填补这一空缺。我的插件将在客户机上提供数字格式化,为其他人提供一种国际化 web 应用程序的方式,且无需与服务器会话。作为额外的功能,我的插件还可以提供反向操作;该插件使开发人员能够解析数字,从格式化的文本字符串中获取数字。这还可以应用于客户机上的数字操作。此外,我将模拟 Java DecimalFormatter 类中的功能,以维护执行数字格式化的客户端代码和标准服务器端方法之间的通用性。

第 1 步结果:我发现了一个插件需求,然后定义了对于该需求我可以填补的空缺。

插件规则

jQuery 团队建立了许多希望插件作者都能遵守的通用规则,为插件用户创建一个通用而可信的环境。考虑到 jQuery 团队比我聪明多了,我没有理由违背这些规则,对不对?出于该原因,我在此列出这些规则,并且在插件的每一步都尽量遵守这些规则。

文件命名为 “jquery.<your plug-in name>.js”
这是有道理的,因为您希望用户查看文件时立即知道这是一个 jQuery 插件以及这是哪个插件。

检查完毕。我的插件将命名为 “jquery.numberformatter.js”。

所有新方法都附加到 jQuery.fn 对象,所有新功能都附加到 jQuery 对象
现阶段这可能有点难以理解,在下一节我将讨论更多内容,因为这是实际编码过程中最重要的规则。

检查完毕。我的方法/函数将仅附加到这两个对象。

“this” 用于引用 jQuery 对象
这有利于插件作者的编写,它让所有插件作者在引用 “this” 时都知道将从 jQuery 收到哪个对象。

检查完毕。我将仅使用 “this” 引用 jQuery 对象。

插件中定义的所有方法/函数的末尾都必须带有一个 “;”(分号),否则将不利于代码的最小化。
因为这是最小化 JavaScript 文件的最佳实践,大于最小值会很糟糕,您的插件有可能很快就被抛弃。

检查完毕。所有的方法/函数都将以 “;” 结尾。

除有特别注明外,所有方法都必须返回 jQuery 对象
jQuery 方法的顺序链 (daisy-chaining) 非常著名,如果您编写打破链条的插件,它就一定会 “打破链条”。

检查完毕。我的 format() 方法将返回 jQuery 对象,虽然我的 parse() 方法没有返回 jQuery 对象,但我在很多地方都注明该函数打破了链条。(毕竟,它不可能返回一个 Number 对象而不打破链条)。

您应该总是使用 this.each() 迭代匹配的元素,这是一种可靠而有效地迭代对象的方式。
出于性能和稳定性考虑,他们推荐所有的方法都使用它迭代匹配的元素。

检查完毕。我的方法都将只使用该方法迭代匹配的元素。

总是在插件代码中使用 “jQuery” 而不是 “$”
这很重要,它使与 “$” 有冲突的用户(那些使用另一个 JavaScript 库的用户)能够使用 “var JQ = jQuery.noConflict();” 函数更改他们的 jQuery 别名(pseudonym)。但是,在我查看许多插件时,我发现该规则常常得不到遵守,这太不幸了。如果开发人员需要更改 jQuery 别名,那么很可能意味着该插件要被弃用了。

检查完毕。在我的插件中,我将仅使用 jQuery 而不是它的别名 “$”。

好了,这些就是在插件代码中必须遵守的规则和建议。真正的问题在于,它们实际上是强制性的,因为如果您不遵守这些插件规则,那么您的插件就得不到广泛应用,而且还会得到不好的反馈。结果该插件很快就没有人使用了,您所花费的时间都将白费。因此,遵守这些规则非常重要。这不仅能帮助您鹤立鸡群,保证您代码的统一性,还能增加插件的成功几率。

时间: 2024-08-01 04:11:50

使用jQuery(中级),第2部分:创建自己的插件的相关文章

使用jQuery(中级),第1部分:使用插件创建和扩展jQuery函数

简介 自我发表了有关 jQuery JavaScript 库的第一个系列文章的这六个月来,在 jQuery 领域发生了很多事情.对我们这些 jQuery 的信徒而言,最令人激动的莫过于 Microsoft 已经选择在其 Visual Studio 套件中使用 jQuery,并已经决定将 jQuery 作为目前该套件所包含的惟一的 JavaScript 库.这显示了对 jQuery 的极大支持,帮助巩固了 jQuery 作为适用于 Web 应用程序的领先 JavaScript 库的地位.jQuer

jQuery创建自己的插件(自定义插件)的方法_jquery

但必须知道,这些插件不是自己凭空产生的,它们是由开发人员编写.测试并完善的,这些人员为 jQuery 社区奉献了自己的业余时间.我们做这些都是免费的,是出于对自己代码的热爱.本文主要关注您如何回报这个伟大的社区,即如何编写自己的插件并上传到 jQuery 的插件页面.这可以让所有人使用您创建的插件,可以让整个 jQuery 开发社区变得更好.今年您也做出自己的贡献吧. 在编写本文中的插件时,我发现插件的创建过程以及用来创建它的框架非常简单明了.困难的地方在于想一些其他人还没有做过的事情,并编写一

《扩展 jQuery》——2.2 一个简单的插件

2.2 一个简单的插件 jQuery插件简直可以做任何事情,大量的第三方插件就可以证明这一点.从影响单个元素的简单插件,到改变多个元素的外观和行为的复杂插件,比如验证插件,应有尽有. 最为常用的一类jQuery插件是集合插件,它被用来为使用选择器或者遍历DOM得到的一组元素添加功能.开发者可以创建一个水印插件作为这种类型的插件的一个简单示例,它在必要时为字段内部提供一个标签.这会让开发者对如何构建一个插件有一定的感知. 2.2.1 占位文字 为了节省表单所占用的空间,有时开发者会省略字段的标签,

创建Eclipse游戏插件,第4部分: 打包、测试和发布

虽然大多数用户都把 Eclipse 当成构建 Java 应用程序的集成开发环境,但实际上它是更基本的东西.Eclipse 是一个用于构建插件的框架,允许扩展其功能去解决几乎任何问题 -- 只要利用一套 API 和现成可用的库.在这份四个部分的 "创建 Eclipse 游戏插件" 教程系列中,将解决大多数程序员每天都会遇到的一个迫切问题:如何不用切换应用程序就抽出时间玩一个迅速的视频游戏,还能让它不太明显.教程中将开发一个简单的游戏,读取进入视图的虫子,并把它们打爆.游戏将在 Eclip

创建Eclipse游戏插件,第3部分: 启动游戏

虽然多数用户都把 Eclipse 当成构建 Java 应用程序的集成开发环境,实际上它是更基本的东西.Eclipse 是构建插件的框架,允许扩展其功能去解决几乎任何问题 -- 只要利用一套 API 和现成可用的库.在这份四个部分的 "创建 Eclipse 游戏插件" 教程系列中,将解决多数程序员每天都会遇到的一个迫切问题:如何不用切换应用程序就抽出时间玩一个迅速的视频游戏,还能让它不太明显.教程中将开发一个简单的程序,读取进入视图的虫子,并把它们打爆.游戏将在 Eclipse 中作为插

创建Eclipse游戏插件,第2部分: 构建和发射BB枪

虽然多数用户都把 Eclipse 当成构建 Java 应用程序的集成开发环境,实际上它是更基本的东西.Eclipse 是用于构建插件的框架,允许扩展其功能来解决几乎任何问题 -- 只要利用一套 API 和现成可用的库.在这份四个部分的 "创建 Eclipse 游戏插件" 教程系列中,将解决多数程序员每天都会遇到的一个迫切问题:如何不用切换应用程序就抽出时间玩一个迅速的视频游戏,还能让它不太明显.教程中将开发一个简单的程序,读取进入视图的虫子,并把它们击碎.游戏将在 Eclipse 中作

创建Eclipse游戏插件,第1部分: 入门

虽然大多数用户把 Eclipse 当成构建 Java 应用程序的集成开发环境,但它实际上更加基础.Eclipse 是个构建插件的框架,允许任何开发人员扩展它的功能来解决几乎任何问题,只要利用一套 API 和可用的库即可.在这个分四个部分的 "创建 Eclipse 游戏插件" 教程系列中,将解决大多数程序员每天编程都会遇到的一个迫切的问题:如何不用切换应用程序就抽身玩一个快速的视频游戏,同时还不会很明显.还将学习 Eclipse 的插件架构,学习如何定义自己的插件.用 SWT 开发界面,

JQuery实现的图文自动轮播效果插件

  本文实例讲述了JQuery实现的图文自动轮播效果插件.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 intervalID = setInterval(cycleImage, slidetime); $(".main_image .desc").show(); // 展示图片 $(".main_im

创建Word 2007插件项目——Word 2007高级应用

创建Word 2007插件项目--Word 2007高级应用 创建 Word 2007 插件项目 这里,我将会使用Visual Studio 2008 Beta 2所带的VSTO(Visual Studio Tools for Office)来开发这个插件,此外,Office 2007也是必须的. 图 1 如上图所示,你首先需要确保选择了 .NET Framework 3.5的项目,接着选择Visual C#Office2007Word Add-in作为项目模板(当然,你也可以选择Visual