如何开发jQuery插件-js教程-PHP中文网

jQuery 插件开发指南：创建可复用的组件

核心要点:

创建 jQuery 插件允许开发者创建可在任何网页上复用的组件，降低函数名冲突的风险。插件使用 jQuery 的 fn 函数定义，添加到 jQuery 库的方法会将 jQuery 对象作为 JavaScript 的 this 对象传递。
在开发 jQuery 插件时，参数处理非常重要。为了避免复杂的参数处理，请传递单个 JSON 对象而不是多个参数。可以使用 jQuery 的 extend 函数合并默认参数和用户参数。
确保方法返回 this 以允许其他函数进行链式调用，这是 jQuery 的关键特性，称为“链式调用”。插件应以 .js 扩展名保存，并在 jQuery 库加载后包含在 HTML 页面中。

How To Develop a jQuery Plugin

jQuery 是最流行的 JavaScript 库，许多网站都采用它来实现动态效果和 Ajax 功能。然而，相对较少的开发者深入研究插件开发。本教程将创建一个简单的插件来解释其基础知识。我们的代码将反转一个或多个选定节点中的文本——查看演示页面。

为什么要创建 jQuery 插件？

简而言之：复用。通过扩展 jQuery，您可以创建可在任何网页上复用的组件。您的代码被封装，并且您不太可能在其他地方使用相同的函数名。

jQuery 的工作原理

在核心部分，jQuery 会接收 DOM 元素或包含 CSS 选择器的字符串。它返回一个 jQuery 对象，这是一个类似数组的 DOM 节点集合。然后可以将一个或多个方法 链式调用 到这组节点，例如：

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

登录后复制

注意：尽管 jQuery 库名为“jQuery”，但“$”是引用它的快捷变量。请注意，其他库可能会占用“$”。

jQuery 插件的工作原理

jQuery 允许向其库中添加方法。调用这些方法时，会将 jQuery 对象作为 JavaScript 的 this 对象传递。可以根据需要操作 DOM 节点，并且方法应返回 this，以便可以链式调用其他函数。我们的示例插件将使用如下代码调用：

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

登录后复制

我们还将添加两个可选参数：minlength 和 maxlength。如果定义了这两个参数，则字符串长度必须在这两个限制之间才能进行反转。

插件声明

插件使用 jQuery 的 fn 函数定义，例如：

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

登录后复制

使用“jQuery”而不是“$”可以确保不会与其他 JavaScript 库冲突。我们所有的内部代码也应该引用“jQuery”而不是“$”。但是，我们可以使用匿名函数来节省一些输入并减小文件大小：

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

登录后复制

此函数立即运行，并将 jQuery 作为名为“$”的参数传递。由于“$”是一个局部变量，我们可以假设它始终引用 jQuery 库，而不是第一个获取全局“$”变量的另一个库。

插件参数

我们的插件需要两个参数：minlength 和 maxlength。最简单的方法是将它们定义为函数参数，例如：

jQuery.fn.reverseText = function(params) { ... };

登录后复制

但是，如果我们决定稍后添加更多参数怎么办？我们的插件可能会有数十个选项——参数处理很快就会变得复杂。作为替代方案，我们可以传递单个 JSON 对象，例如：

(function($) {
    $.fn.reverseText = function(params) { ... };
})(jQuery);

登录后复制

reverseText 函数的第一行应该定义一组默认参数，然后用任何用户定义的值覆盖这些参数。jQuery 的 extend 函数可以帮我们处理这个问题：

(function($) {
    $.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// 示例
$("p").reverseText(0, 100);

登录后复制

因此，除非调用代码覆盖这些值，否则 params.minlength 为 0，params.maxlength 为 99999。

插件代码

现在我们可以编写我们的主要插件代码：

(function($) {
    $.fn.reverseText = function(params) { ... }
})(jQuery);

// 示例
$("p").reverseText( { minlength: 0, maxlength: 100 } );

登录后复制

解释：

this.each 函数遍历所有 jQuery DOM 节点并调用一个匿名函数。
在函数中，“this”包含单个节点。一个 jQuery 节点集合被赋值给 $t，以便我们可以运行 jQuery 方法。
变量 origText 被赋值为 DOM 节点中的文本字符串。newText 设置为空字符串。
如果 origText 的长度在 params.minlength 和 params.maxlength 之间，则循环在 newText 中创建一个反转的文本字符串。然后相应地更新 DOM 节点。

不要破坏链式调用！

最后，我们应该记住返回 jQuery 对象，以便可以链式调用其他方法：

// 合并默认参数和用户参数
params = $.extend( {minlength: 0, maxlength: 99999}, params);

登录后复制

完整的代码

我们的插件代码现在已完成：

// 遍历所有节点
this.each(function() {

    // 将单个节点表示为 jQuery 对象
    var $t = $(this);

    // 查找文本
    var origText = $t.text(), newText = '';

    // 文本长度是否在定义的限制内？
    if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {
        for (var i = origText.length; i--; ) newText += origText.substr(i, 1);
        $t.text(newText);
    }

});

登录后复制

此文件保存为 jquery.reversetext.js。然后，我们可以在 jQuery 库加载后将其包含在任何 HTML 页面中，例如：