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

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

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 而不是它的别名 “$”。

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

第 2 步结果:我将遵守创建 jQuery 插件的所有规则

编写插件

现在可以开始编写代码了!开始编写插件的第一步是确定如何组织您的插件。开始有两种选择:您希望它是一个方法还是一个函数?“它们有区别吗?”您可能会这样问。

正如我上面提到的,方法需要附加到 jQuery.fn 对象,函数需要附加到 jQuery 对象。这样一切都清楚了,不是吗?如果您对 jQuery 相对不太了解,那么可能还不是很清楚。您可以这样考虑。方法使代码能够迭代所有传入插件的选定元素。因此,插件可以接收任何类型的 HTML 元素,由插件决定如何处理每个元素。因此,插件方法可以接收任何 jQuery 选择器,所有从 “p” 到 “#mySpecificPageElement” 的内容。如果您希望插件更加灵活,允许用户传入任何类型的页面元素,那么最好使用方法。插件开发人员应该负责正确地处理所有内容。相比之下,函数不使用任何选定元素作为参数。函数可以简单地应用于整个页面。这也由插件开发人员负责处理,开发人员必须定义他们希望与插件交互的页面元素,并忽略其他元素。让我们在代码中看看不同之处。


清单 1. jQuery 插件方法/函数

// This is a method because you can pass any type of selector to the method and it
// will take some action on the results of the selector. In this case, it will
// doSomething() on the page element with an ID of myExample
$("#myExample").doSomething();

// This is also a method, even though you are passing the entire page body to
// the method, because you are still passing a selector
$("body").doSomethingElse();

// This is a function, because you are NOT passing any selector to the function
// The plug-in developer must determine what page elements they want to take action on.
// This is usually accomplished by the plug-in developer requiring the page elements
// to contain a certain class name.

<div>

// This hypothetical plug-in developer would document that his plug-in only works
// on elements with the class "anotherThing"
$.anotherThing();

 

从这些描述中判断,插件使用的似乎是方法,因为您需要让用户告诉您他们希望格式化哪些页面元素。清单 2 展示了现在插件的代码。


清单 2. 方法定义

jQuery.fn.format = function();

// You would call your plug-in like this (at this point)
$("#myText").format();

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxxyf.html