65.9K
CodeProject 正在变化。 阅读更多。
Home

以简单的方式开始编写您自己的 jQuery 插件

Pradeepa achar
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.86/5 (3投票s)

2018年4月27日

CPOL

9分钟阅读

viewsIcon

11679

以简单的方式开始编写您自己的 jQuery 插件。

您可能在项目中曾使用过第三方插件，例如 timeline.min.js、autoComplete.min.js 来满足项目需求。这些插件由其他开发者开发。大多数开发者不会花费太多精力去开发自己的自定义 jQuery 插件，而是专注于使用现有的第三方插件。这是一种及时完成项目并满足客户需求的好方法。

想象一下！如果您能开发出这样的可重用 jQuery 插件，并在多个具有类似需求的aabb项目中使用它，那会怎么样？听起来很酷，不是吗？

是的！现在，我将从理论开始，让您了解何时可以决定编写插件。让我们以一个非常流行的 jQuery 插件 jquery.autoSuggest.js 为例。您可能在多个项目中都使用过此插件。它会向服务器发出 Ajax 调用，并以一种美观的方式显示数据。您可能出于不同目的使用过相同的插件，例如在一个页面上显示用户名，然后在同一项目的另一个页面上以类似的方式显示其他数据。在这里，您可以在两个页面之间观察到的共同点是“可重用性”。

同样，您可以编写这种可重用的 jQuery 函数，以便在不同页面/项目中针对类似功能进行使用。这可以通过编写 jQuery 插件来实现。

什么是 jQuery 插件？

jQuery 插件是一个 JavaScript 文件（.js 扩展名），其中包含相关的方法，可以与 jQuery 库的方法一起使用。

如果您熟悉 jQuery，您可能已经写过这样的代码，例如：
$(“#Some_ID”).autoComplete({使用此插件方法名所需的参数和其他信息});

上面的代码片段用于使用 jQuery.autocomplete.js 插件。

以类似的方式，您可以创建自己的 jQuery 插件并以类似的方式使用它，例如：$(“#some_ID”).myNewPlugin({所需参数，插件信息});

在上面的代码片段中，myNewPlugin 是 jQuery 中的一个 jQuery 方法。 myNewPlugin.js 是我们将要简单几步创建的。

  1. 创建一个名为 jquery.myNewPlugin.js 的文件（文件扩展名应为 .js）。

  2. 将以下代码行写入文件。我将解释代码的每一行。

    上面的代码片段是编写插件的语法。我们需要将我们的插件方法写在那两行代码中，这是出于一个主要考虑因素。我将详细解释这两行代码。

    • 开头可以看到分号。我们不需要在插件中添加分号，但建议添加分号，因为 jQuery 插件只不过是在 JavaScript 文件中编写的一个单独的方法。假设您在一个团队中工作，其中一名开发人员在他的方法末尾没有添加分号来实现某些功能，而这些功能将在您将使用此插件的同一页面上。在这种情况下，您的插件可能无法按预期工作。有时，即使您在插件中编写的代码是完全正确的，它也不会调用您的插件方法名。因此，为了避免此类问题，最好在开头使用分号。
    • 这两行代码是由于为我们将在插件文件中编写的方法创建作用域并保护 $ 别名而编写的。在函数内部，您可以看到美元（$）变量作为参数。$ 是 JavaScript 库中一个非常著名的变量。通常假定 $ 是 jQuery 函数的别名。因此，如果我们使用其他插件并期望我们的插件与它们良好配合，同时仍然使用 $ 作为 jQuery 函数的别名，那么我们需要将所有将为我们的插件编写的 jQuery 方法放在一个函数中，在函数大括号关闭后传递 jQuery 函数，并将 $ 作为参数传递给函数。
  3. 在这两行代码内部，我们需要编写我们的 jQuery 插件。请记住，一般来说，jQuery 插件只不过是一个可重用的 jQuery 方法。

    在第 5 行，您可以看到插件方法的语法。$ 是 jQuery 函数的别名，fn 表示它是一个 FUNCTION，而 myNewPLugin 是我们的插件方法名。这是开始使用 jQuery 插件的语法。通常，您像下面这样定义一个函数：

但在这个例子中，您以不同的方式编写，如下所示：

这清楚地表明我们可以将参数传递给我们的方法，对吧？没错！！我们甚至可以向我们的插件传递参数。它看起来会像下面这样：

在上面的屏幕截图中，您可以看到有两个参数，例如 firstname、lastName。这太棒了，不是吗？好的……我希望您已经理解了我到目前为止解释的要点。现在还没完！

让我在 plugin 方法中放入一个 alert 框。

所以，还没结束。现在，让我们通过在插件方法中添加一个 alert 框来测试它，看看它是否能正常工作。我添加了一个 alert 消息，我的代码看起来是这样的：

您是如何在您的解决方案中使用任何 jQuery 插件的？很简单。您创建一个 HTML 页面并引用该第三方插件，对吗？我们将做同样的事情。

注意：我们正在编写 JQUERY 插件。这意味着我们需要在我们的 HTML 页面中添加 jquery.js 库的引用，然后再添加我们的插件引用。因为我们的插件使用了 jquery.js 库的方法和变量，例如 $、jQuery 等。

  • 这里，我将使用 Visual Studio。我将把我的插件文件放在 script 文件夹下，并在 PluginTest.html 页面上添加这个自定义插件的引用。 在之前的步骤中，我使用了 sublime 编辑器。您可以直接使用 Visual Studio 来完成我之前解释的所有步骤。

    在 body 标签内，我创建了一个 div 并为其添加了一个 ID。这是有原因的。我们需要一个页面上的引用来发起插件方法的调用。简单来说，假设您必须在 textbox 上调用 autosearch。您将使用 autosearch 插件，并从您想要启动搜索功能的 TEXTBOX 调用 plugin 方法。在这里，textbox 是调用 autosearch 插件的起点。通常，我们使用 textbox 的 ID 作为调用 autosearch 插件的引用。

同样，在我们的例子中，我使用了一个 div 的 ID，我将在其上调用我的插件。

  • 在 PluginTest.html 文件中，我将在 script 标签下的 document 上初始化 ready 事件。

     

  • 现在在 ready 事件下调用插件。

     

  • 现在按 F5 执行代码。

好的……我们已经完成了编写 jQuery 插件的第一步。再次说明，这仅仅是开始！！.. 我们需要向插件传递一些参数，不是吗？因为插件本身就表示它是“可重用的”代码。从这个意义上说，对于相似的功能，根据不同的场景，我们可能需要传递不同的值。让我们开始学习如何传递参数。

让我传递两个参数。名字：Pradeepa，姓氏：Achar。现在代码将如下所示：

输出将是：

作为最佳实践，我们在 jQuery 插件执行后需要返回节点。

注意

使用 each 循环很重要，因为我们典型的 jQuery 对象将包含对任意数量 DOM 元素的引用。如果要操作特定元素，则必须使用 each 循环。因此，您的代码必须始终包含以下代码：

在循环内部，我创建了一个变量并存储了当前的 jQuery 对象($(this))。此对象将引用调用此插件的元素。在我们的例子中，它是 div 元素，其 ID 为 mainPanel。请参阅 Plugintest.html 文件以获取引用。该元素可以具有类、任何属性。可以通过此对象访问。

现在，让我们来学习一些高级概念。由于插件是可重用代码，因此它接受参数值。如果我们 Denne 插件在不同的页面中使用，那么参数值可能会因页面和需求而异。作为一个好的程序员，您需要设置一些默认值，并通过使用该插件的页面的参数来覆盖这些默认值。这很棒……不是吗？

让我们的代码如下所示：

  • 让我们创建默认变量并分配默认值。

  • 可以有很多参数。在这种情况下，如果向函数传递多个参数，则不是一个好主意。相反，让我们将所有参数保留在一个对象中。因此，代码将更改如下：

在上面的代码片段中，请注意我传递了一个 options 对象，并且没有单独声明变量，而是将它们放在一个 defaults 对象下。

Defaults 对象的变量具有默认值，即空 string。您也可以根据需要声明数字、布尔值。现在我们需要从将要使用该插件的页面中分配新值。此分配通过以下语法实现：

在上面的代码片段中，您可以看到 var opts=$.extend(defaults,options); 这里，它将 options 对象中的新值分配给 defaults 对象。新值将包含在 opts 对象中。

现在我们需要学习如何将值传递给插件以及如何在插件中使用它们。

  1. 如果有一个以上的参数，则必须将其作为对象或单独的参数传递，如下所示。在我们的例子中，我们从 testPlugin.html 页面传递参数值。

    在上面的代码片段中，我们正在花括号内并以键值对的形式传递值。键是在插件的 defaults 对象中声明的变量名。每个键值对都用逗号分隔。再次观察代码片段。参数中的 key 变量名必须与插件中声明的变量名完全相同，如下所示：

好的。我们已经准备好完成编写 jQuery 插件的基础知识了。请记住一件事，您将在 return this.each 循环中编写方法。假设您需要创建 HTML 布局并执行其他操作，那么您的代码应该如下所示：

在上面的代码片段中，我正在调用 createHTML 方法，并将 testPlugin.html 页面中创建的 ID 为 mainpanel 的引用元素作为参数传递。

您可以定义更多方法并在需要时调用它们。

好的。我们已经准备好编写自定义 jQuery 插件了。祝您编码愉快，教学愉快！

© . All rights reserved.