如何将jQuery插件集成到Ember应用程序中

关键要点

• 将 jQuery 插件集成到 Ember 应用中，通过结合 jQuery 插件的简洁性和多功能性以及 Ember 的健壮性和可扩展性，可以增强其功能和用户体验。
• 要将 jQuery 插件集成到 Ember 应用中，首先使用 npm 包管理器安装 jQuery，然后将插件导入相关的 Ember 组件。
• jQuery 插件在 Ember 组件中的初始化应该在名为 didInsertElement 的特殊函数内进行，使用 this.$ 而不是 $，以确保插件仅为此组件初始化，并且不会干扰其他组件。
• 为避免冗余事件处理程序，任何使用插件设置的事件都应在组件即将从 DOM 中移除时移除，使用另一个名为 willDestroyElement 的 Ember hook。

本文由 Craig Bilner 审核。感谢所有 SitePoint 的同行评审员，使 SitePoint 内容达到最佳状态！

鉴于 jQuery 的普及性，它在 Web 开发领域仍然扮演着至关重要的角色，尤其是在使用 Ember 等框架时，其经常被使用也就不足为奇了。该框架的组件类似于 jQuery 插件，因为它们都旨在在项目中承担单一职责。在本文中，我们将开发一个简单的 Ember 组件。本教程将展示如何将 jQuery 插件集成到 Ember 应用中。该组件充当插件的包装器，显示图片缩略图列表。每当我们点击缩略图时，其较大版本就会显示在图片预览器中。这是通过提取点击的缩略图的 src 属性来实现的。然后，我们将预览器的 src 属性设置为缩略图的 src 属性。本文的完整代码可在 GitHub 上找到。记住这一点，让我们开始这个项目吧。

项目设置

首先，让我们创建一个新的 Ember 项目。首先，在 CLI 上执行以下命令：

<code class="language-bash">npm install -g ember-cli</code>

完成后，可以通过运行以下命令创建项目：

<code class="language-bash">ember new emberjquery</code>

这将在名为 emberjquery 的文件夹中创建一个新项目，并安装所需的依赖项。现在，通过编写 cd emberjquery 进入目录。该项目包含我们将在此教程中编辑的不同文件。您必须编辑的第一个文件是 bower.json 文件。打开它并将当前 Ember 版本更改为 2.1.0。我为这个项目创建的 jQuery 插件可作为 Bower 包使用。您可以通过将此行添加到您的 bower.json 文件中来将其包含在项目中：

<code class="language-json">"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"</code>

现在，要安装插件和新版本的 Ember，请运行以下命令：

<code class="language-bash">npm install -g ember-cli</code>

由于此插件不是 Ember 组件，因此我们需要手动包含所需的文件。在 ember-cli-build.js 文件中，在 return 语句之前添加以下两行：

<code class="language-bash">ember new emberjquery</code>

这些行导入两个文件并将它们包含在构建中。一个是插件文件本身，另一个是插件的 CSS 文件。样式表是可选的，如果您打算自己设置插件样式，可以随意排除它。

创建新的插件组件

将插件包含在应用程序中后，让我们开始通过执行以下命令创建一个新组件：

<code class="language-json">"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"</code>

此命令创建一个类文件和一个模板文件。在模板文件中，粘贴 bower_components/jquerypic/index.html 文件中的内容。将内容放在 标签中，不包括脚本。此时，模板文件应如下所示：

<code class="language-bash">bower install</code>

在类文件中，添加一个名为 didInsertElement 的函数：

<code class="language-javascript">// 要添加的行
app.import("bower_components/jquerypic/js/jquerypic.js");
app.import("bower_components/jquerypic/styles/app.css");

return app.toTree();
};</code>

我们现在处于一个关键点。使用 jQuery，插件初始化通常发生在 document.ready 函数中，如下所示：

<code class="language-bash">ember generate component jquery-pic</code>

但是，对于 Ember 组件，此初始化发生在名为 didInsertElement 的特殊函数中。当组件已准备好并已成功插入 DOM 时，将调用此函数。通过将我们的代码包装在此函数中，我们可以保证两件事：

• 插件仅为此组件初始化
• 插件不会干扰其他组件

在初始化插件之前，让我们使用其当前状态下的组件。为此，使用以下命令创建一个索引模板：

<code class="language-html">{{yield}}
<div class="jquerypic">
  <div class="fullversion-container">
    <img class="full-version lazy" src="/static/imghwm/default1.png" data-src="https://img.php.cn/" alt="">
  </div>
  <div class="thumbnails">
    <img class="thumbnail lazy" src="/static/imghwm/default1.png" data-src="https://img.php.cn/" alt="">
    <img class="thumbnail lazy" src="/static/imghwm/default1.png" data-src="https://img.php.cn/" alt="">
    <img class="thumbnail lazy" src="/static/imghwm/default1.png" data-src="https://img.php.cn/" alt="">
    <img class="thumbnail lazy" src="/static/imghwm/default1.png" data-src="https://img.php.cn/" alt="">
    <img class="thumbnail lazy" src="/static/imghwm/default1.png" data-src="https://img.php.cn/" alt="">
  </div>
</div></code>

然后将以下代码添加到模板中以使用该组件：

<code class="language-javascript">import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function () {

  }
});</code>

完成后，使用以下命令加载 Ember 服务器：

<code class="language-javascript">$(document).ready(function(){
  // 在这里初始化插件
});</code>

使用此命令启动服务器。打开您选择的浏览器并访问命令行界面指定的 URL。您应该会在图片预览器下方看到一个缩略图列表。请注意，当您点击缩略图时，没有任何反应。这是因为我们还没有连接插件事件处理程序。让我们来做吧！但在描述如何执行正确的初始化之前，我将向您展示许多开发人员都会犯的一个错误。此解决方案乍一看似乎有效，但我将通过展示它引入的错误来证明它不是最佳方案。

(以下内容与原文类似，只是对语句进行了调整和润色，并保持了原意)

Ember 组件初始化

为了展示问题，让我们首先将以下代码添加到 didInsertElement 函数中：

<code class="language-bash">npm install -g ember-cli</code>

在不使用 Ember 的情况下，这就是您通常初始化插件的方式。现在，检查您的浏览器窗口并点击缩略图。您应该会看到它们按预期加载到大型图片预览器中。一切似乎都正常工作，对吧？好吧，检查一下当我们添加第二个组件实例时会发生什么。通过添加另一行包含我之前显示的相同代码的代码到索引模板中来执行此操作。因此，您的模板现在应如下所示：

<code class="language-bash">ember new emberjquery</code>

如果您切换到浏览器窗口，您应该会看到两个组件实例显示出来。当您点击其中一个实例的缩略图时，您可以注意到错误。两个实例的预览器都会更改，而不仅仅是点击的那个实例。要解决此问题，我们需要稍微更改一下初始化程序。要使用的正确语句如下所示：

<code class="language-json">"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"</code>

不同之处在于我们现在使用的是 this.$ 而不是 $。两个组件实例现在应该能够正常工作了。点击一个实例的缩略图不应影响另一个组件。当我们在组件中使用 this.$ 时，我们指的是仅针对该组件的 jQuery 处理程序。因此，我们对其进行的任何 DOM 操作都只会影响该组件实例。此外，任何事件处理程序都将仅设置在此组件上。当我们使用全局 jQuery 属性 $ 时，我们指的是整个文档。这就是为什么我们的初始初始化会影响另一个组件的原因。我必须修改我的插件才能演示此错误，这可能是未来文章的主题。但是，操作组件的 DOM 的最佳实践是使用 this.$。

销毁插件

好吧，到目前为止，我们已经了解了如何设置事件处理程序。现在是时候展示如何移除我们使用插件设置的任何事件了。当我们的组件即将从 DOM 中移除时，我们应该这样做。我们应该这样做，因为我们不希望任何冗余的事件处理程序挂在那里。幸运的是，Ember 组件提供了另一个名为 willDestroyElement 的 hook。每次 Ember 即将销毁并将组件实例从 DOM 中移除时，都会调用此 hook。我的插件有一个 stopEvents 方法，可以在插件实例上调用。此方法应在 Ember 为我们提供的特殊 hook 中调用。因此，将以下函数添加到组件中：

<code class="language-bash">bower install</code>

修改 didInsertElement 函数，使其如下所示：

<code class="language-bash">npm install -g ember-cli</code>

在 didInsertElement 函数中，我们只是将插件实例存储在组件的一个属性中。我们执行此操作以便我们可以在其他函数中访问它。在 willDestroyElement 函数中，我们正在插件实例上调用 stopEvents 方法。虽然这是最佳实践，但我们的应用程序无法触发此 hook。因此，我们将设置一个演示点击处理程序。在此处理程序中，我们将调用插件实例上的 stopEvents 方法。这允许我展示所有事件处理程序都已按预期移除。现在，让我们向组件添加一个点击函数处理程序：

<code class="language-bash">ember new emberjquery</code>

然后向组件模板添加一个 <code><p></p> 标签，如下所示：

<code class="language-json">"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"</code>

当点击此标签时，它会调用销毁插件的 stopEvents 操作。点击段落后，插件应该不再响应点击事件。要再次启用事件，您必须像我们在 didInsert hook 中所做的那样初始化插件。通过最后一节，我们完成了简单的 Ember 组件。恭喜！

(结论和常见问题部分与原文类似，只是对语句进行了调整和润色，并保持了原意)

结论

在本教程中，您已经看到 jQuery 插件仍然在我们职业生涯中扮演着至关重要的角色。凭借其强大的 API 和可用的 JavaScript 框架，了解如何将这两个世界结合在一起并使它们和谐地工作非常有用。在我们的示例中，组件充当插件的包装器，显示图片缩略图列表。每当我们点击缩略图时，其较大版本就会显示在图片预览器中。这只是一个示例，但您可以集成任何所需的 jQuery 插件。再次提醒您，代码可在 GitHub 上找到。您是否在 Ember 应用中使用 jQuery 插件？如果您想讨论它们，请随时在下面的部分发表评论。

关于将 jQuery 插件集成到 Ember 应用程序中的常见问题解答

将 jQuery 插件集成到 Ember 应用程序的目的是什么？

将 jQuery 插件集成到 Ember 应用程序可以显著增强应用程序的功能和用户体验。jQuery 插件提供了各种功能，例如动画、表单验证和交互式元素，可以轻松地集成到 Ember 应用程序中。这种集成允许开发人员利用 jQuery 和 Ember 的强大功能，将 jQuery 插件的简洁性和多功能性与 Ember 的健壮性和可扩展性相结合。

如何在我的 Ember 应用程序中安装 jQuery？

要在 Ember 应用程序中安装 jQuery，可以使用 npm 包管理器。在您的终端中运行命令 npm install --save @ember/jquery。这会将 jQuery 添加到项目的依赖项中，并使其可在应用程序中使用。

如何在我的 Ember 应用程序中使用 jQuery 插件？

安装 jQuery 后，可以通过将其导入相关的 Ember 组件来在 Ember 应用程序中使用 jQuery 插件。然后，您可以根据插件的文档使用插件的函数。请记住，确保插件与您使用的 jQuery 版本兼容。

jQuery 和 Ember 之间是否存在任何兼容性问题？

通常情况下，jQuery 和 Ember 可以很好地协同工作。但是，根据您使用的 jQuery 和 Ember 版本，可能会出现一些兼容性问题。始终检查 jQuery 和 Ember 的文档以确保兼容性。

我可以在不安装 jQuery 的情况下在 Ember 中使用 jQuery 插件吗？

不可以，您不能在不安装 jQuery 的情况下在 Ember 中使用 jQuery 插件。jQuery 插件构建在 jQuery 库之上，需要它才能运行。因此，您必须先安装 jQuery，然后才能使用任何 jQuery 插件。

如何在我的 Ember 应用程序中更新 jQuery？

要在 Ember 应用程序中更新 jQuery，可以使用 npm 包管理器。在您的终端中运行命令 npm update @ember/jquery。这会将 jQuery 更新到最新版本。

我可以在我的 Ember 应用程序中使用多个 jQuery 插件吗？

是的，您可以在 Ember 应用程序中使用多个 jQuery 插件。但是，请注意，使用过多的插件可能会影响应用程序的性能。添加新插件后，始终彻底测试您的应用程序，以确保它仍然按预期执行。

如何对 Ember 应用程序中的 jQuery 插件问题进行故障排除？

如果您在 Ember 应用程序中遇到 jQuery 插件问题，首先检查插件的文档中是否有任何已知问题或故障排除提示。如果您仍然遇到问题，可以尝试联系插件的开发人员或 Ember 社区寻求帮助。

我可以在没有任何编程经验的情况下在 Ember 应用程序中使用 jQuery 插件吗？

虽然可以在没有任何编程经验的情况下在 Ember 应用程序中使用 jQuery 插件，但建议您了解 JavaScript 和 Ember 的基础知识。这将使您更容易理解如何有效地集成和使用插件。

在我的 Ember 应用程序中使用 jQuery 插件是否有替代方案？

是的，在 Ember 应用程序中使用 jQuery 插件有替代方案。Ember 本身拥有丰富的附加组件生态系统，可以提供与 jQuery 插件类似的功能。此外，您还可以使用原生 JavaScript 或其他 JavaScript 库来实现相同的结果。但是，jQuery 插件通常提供更简单、更方便的解决方案。

以上是如何将jQuery插件集成到Ember应用程序中的详细内容。更多信息请关注PHP中文网其他相关文章！