如何將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中文網其他相關文章！