關(guān)鍵要點(diǎn)
- 將 jQuery 插件集成到 Ember 應(yīng)用中，通過結(jié)合 jQuery 插件的簡(jiǎn)潔性和多功能性以及 Ember 的健壯性和可擴(kuò)展性，可以增強(qiáng)其功能和用戶體驗(yàn)。
- 要將 jQuery 插件集成到 Ember 應(yīng)用中，首先使用 npm 包管理器安裝 jQuery，然后將插件導(dǎo)入相關(guān)的 Ember 組件。
- jQuery 插件在 Ember 組件中的初始化應(yīng)該在名為
didInsertElement的特殊函數(shù)內(nèi)進(jìn)行，使用this.$而不是$，以確保插件僅為此組件初始化，并且不會(huì)干擾其他組件。 - 為避免冗余事件處理程序，任何使用插件設(shè)置的事件都應(yīng)在組件即將從 DOM 中移除時(shí)移除，使用另一個(gè)名為
willDestroyElement的 Ember hook。
本文由 Craig Bilner 審核。感謝所有 SitePoint 的同行評(píng)審員，使 SitePoint 內(nèi)容達(dá)到最佳狀態(tài)！
鑒于 jQuery 的普及性，它在 Web 開發(fā)領(lǐng)域仍然扮演著至關(guān)重要的角色，尤其是在使用 Ember 等框架時(shí)，其經(jīng)常被使用也就不足為奇了。該框架的組件類似于 jQuery 插件，因?yàn)樗鼈兌贾荚谠陧?xiàng)目中承擔(dān)單一職責(zé)。在本文中，我們將開發(fā)一個(gè)簡(jiǎn)單的 Ember 組件。本教程將展示如何將 jQuery 插件集成到 Ember 應(yīng)用中。該組件充當(dāng)插件的包裝器，顯示圖片縮略圖列表。每當(dāng)我們點(diǎn)擊縮略圖時(shí)，其較大版本就會(huì)顯示在圖片預(yù)覽器中。這是通過提取點(diǎn)擊的縮略圖的 src 屬性來(lái)實(shí)現(xiàn)的。然后，我們將預(yù)覽器的 src 屬性設(shè)置為縮略圖的 src 屬性。本文的完整代碼可在 GitHub 上找到。記住這一點(diǎn)，讓我們開始這個(gè)項(xiàng)目吧。
項(xiàng)目設(shè)置
首先，讓我們創(chuàng)建一個(gè)新的 Ember 項(xiàng)目。首先，在 CLI 上執(zhí)行以下命令：
npm install -g ember-cli
完成后，可以通過運(yùn)行以下命令創(chuàng)建項(xiàng)目：
ember new emberjquery
這將在名為 emberjquery 的文件夾中創(chuàng)建一個(gè)新項(xiàng)目，并安裝所需的依賴項(xiàng)?，F(xiàn)在，通過編寫 cd emberjquery 進(jìn)入目錄。該項(xiàng)目包含我們將在此教程中編輯的不同文件。您必須編輯的第一個(gè)文件是 bower.json 文件。打開它并將當(dāng)前 Ember 版本更改為 2.1.0。我為這個(gè)項(xiàng)目創(chuàng)建的 jQuery 插件可作為 Bower 包使用。您可以通過將此行添加到您的 bower.json 文件中來(lái)將其包含在項(xiàng)目中：
"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"
現(xiàn)在，要安裝插件和新版本的 Ember，請(qǐng)運(yùn)行以下命令：
npm install -g ember-cli
由于此插件不是 Ember 組件，因此我們需要手動(dòng)包含所需的文件。在 ember-cli-build.js 文件中，在 return 語(yǔ)句之前添加以下兩行：
ember new emberjquery
這些行導(dǎo)入兩個(gè)文件并將它們包含在構(gòu)建中。一個(gè)是插件文件本身，另一個(gè)是插件的 CSS 文件。樣式表是可選的，如果您打算自己設(shè)置插件樣式，可以隨意排除它。
創(chuàng)建新的插件組件
將插件包含在應(yīng)用程序中后，讓我們開始通過執(zhí)行以下命令創(chuàng)建一個(gè)新組件：
"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"
此命令創(chuàng)建一個(gè)類文件和一個(gè)模板文件。在模板文件中，粘貼 bower_components/jquerypic/index.html 文件中的內(nèi)容。將內(nèi)容放在 <body> 標(biāo)簽中，不包括腳本。此時(shí)，模板文件應(yīng)如下所示：
bower install
在類文件中，添加一個(gè)名為 didInsertElement 的函數(shù)：
// 要添加的行
app.import("bower_components/jquerypic/js/jquerypic.js");
app.import("bower_components/jquerypic/styles/app.css");
return app.toTree();
};
我們現(xiàn)在處于一個(gè)關(guān)鍵點(diǎn)。使用 jQuery，插件初始化通常發(fā)生在 document.ready 函數(shù)中，如下所示：
ember generate component jquery-pic
但是，對(duì)于 Ember 組件，此初始化發(fā)生在名為 didInsertElement 的特殊函數(shù)中。當(dāng)組件已準(zhǔn)備好并已成功插入 DOM 時(shí)，將調(diào)用此函數(shù)。通過將我們的代碼包裝在此函數(shù)中，我們可以保證兩件事：
- 插件僅為此組件初始化
- 插件不會(huì)干擾其他組件
在初始化插件之前，讓我們使用其當(dāng)前狀態(tài)下的組件。為此，使用以下命令創(chuàng)建一個(gè)索引模板：
{{yield}}
<div class="jquerypic">
<div class="fullversion-container">
<img class="full-version lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
</div>
<div class="thumbnails">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
</div>
</div>
然后將以下代碼添加到模板中以使用該組件：
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement: function () {
}
});
完成后，使用以下命令加載 Ember 服務(wù)器：
$(document).ready(function(){
// 在這里初始化插件
});
使用此命令啟動(dòng)服務(wù)器。打開您選擇的瀏覽器并訪問命令行界面指定的 URL。您應(yīng)該會(huì)在圖片預(yù)覽器下方看到一個(gè)縮略圖列表。請(qǐng)注意，當(dāng)您點(diǎn)擊縮略圖時(shí)，沒有任何反應(yīng)。這是因?yàn)槲覀冞€沒有連接插件事件處理程序。讓我們來(lái)做吧！但在描述如何執(zhí)行正確的初始化之前，我將向您展示許多開發(fā)人員都會(huì)犯的一個(gè)錯(cuò)誤。此解決方案乍一看似乎有效，但我將通過展示它引入的錯(cuò)誤來(lái)證明它不是最佳方案。
(以下內(nèi)容與原文類似，只是對(duì)語(yǔ)句進(jìn)行了調(diào)整和潤(rùn)色，并保持了原意)
Ember 組件初始化
為了展示問題，讓我們首先將以下代碼添加到 didInsertElement 函數(shù)中：
npm install -g ember-cli
在不使用 Ember 的情況下，這就是您通常初始化插件的方式?，F(xiàn)在，檢查您的瀏覽器窗口并點(diǎn)擊縮略圖。您應(yīng)該會(huì)看到它們按預(yù)期加載到大型圖片預(yù)覽器中。一切似乎都正常工作，對(duì)吧？好吧，檢查一下當(dāng)我們添加第二個(gè)組件實(shí)例時(shí)會(huì)發(fā)生什么。通過添加另一行包含我之前顯示的相同代碼的代碼到索引模板中來(lái)執(zhí)行此操作。因此，您的模板現(xiàn)在應(yīng)如下所示：
ember new emberjquery
如果您切換到瀏覽器窗口，您應(yīng)該會(huì)看到兩個(gè)組件實(shí)例顯示出來(lái)。當(dāng)您點(diǎn)擊其中一個(gè)實(shí)例的縮略圖時(shí)，您可以注意到錯(cuò)誤。兩個(gè)實(shí)例的預(yù)覽器都會(huì)更改，而不僅僅是點(diǎn)擊的那個(gè)實(shí)例。要解決此問題，我們需要稍微更改一下初始化程序。要使用的正確語(yǔ)句如下所示：
"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"
不同之處在于我們現(xiàn)在使用的是 this.$ 而不是 $。兩個(gè)組件實(shí)例現(xiàn)在應(yīng)該能夠正常工作了。點(diǎn)擊一個(gè)實(shí)例的縮略圖不應(yīng)影響另一個(gè)組件。當(dāng)我們?cè)诮M件中使用 this.$ 時(shí)，我們指的是僅針對(duì)該組件的 jQuery 處理程序。因此，我們對(duì)其進(jìn)行的任何 DOM 操作都只會(huì)影響該組件實(shí)例。此外，任何事件處理程序都將僅設(shè)置在此組件上。當(dāng)我們使用全局 jQuery 屬性 $ 時(shí)，我們指的是整個(gè)文檔。這就是為什么我們的初始初始化會(huì)影響另一個(gè)組件的原因。我必須修改我的插件才能演示此錯(cuò)誤，這可能是未來(lái)文章的主題。但是，操作組件的 DOM 的最佳實(shí)踐是使用 this.$。
銷毀插件
好吧，到目前為止，我們已經(jīng)了解了如何設(shè)置事件處理程序?，F(xiàn)在是時(shí)候展示如何移除我們使用插件設(shè)置的任何事件了。當(dāng)我們的組件即將從 DOM 中移除時(shí)，我們應(yīng)該這樣做。我們應(yīng)該這樣做，因?yàn)槲覀儾幌Ｍ魏稳哂嗟氖录幚沓绦驋煸谀抢铩Ｐ疫\(yùn)的是，Ember 組件提供了另一個(gè)名為 willDestroyElement 的 hook。每次 Ember 即將銷毀并將組件實(shí)例從 DOM 中移除時(shí)，都會(huì)調(diào)用此 hook。我的插件有一個(gè) stopEvents 方法，可以在插件實(shí)例上調(diào)用。此方法應(yīng)在 Ember 為我們提供的特殊 hook 中調(diào)用。因此，將以下函數(shù)添加到組件中：
bower install
修改 didInsertElement 函數(shù)，使其如下所示：
npm install -g ember-cli
在 didInsertElement 函數(shù)中，我們只是將插件實(shí)例存儲(chǔ)在組件的一個(gè)屬性中。我們執(zhí)行此操作以便我們可以在其他函數(shù)中訪問它。在 willDestroyElement 函數(shù)中，我們正在插件實(shí)例上調(diào)用 stopEvents 方法。雖然這是最佳實(shí)踐，但我們的應(yīng)用程序無(wú)法觸發(fā)此 hook。因此，我們將設(shè)置一個(gè)演示點(diǎn)擊處理程序。在此處理程序中，我們將調(diào)用插件實(shí)例上的 stopEvents 方法。這允許我展示所有事件處理程序都已按預(yù)期移除。現(xiàn)在，讓我們向組件添加一個(gè)點(diǎn)擊函數(shù)處理程序：
ember new emberjquery
然后向組件模板添加一個(gè) <code><p> 標(biāo)簽，如下所示：
"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"
當(dāng)點(diǎn)擊此標(biāo)簽時(shí)，它會(huì)調(diào)用銷毀插件的 stopEvents 操作。點(diǎn)擊段落后，插件應(yīng)該不再響應(yīng)點(diǎn)擊事件。要再次啟用事件，您必須像我們?cè)?didInsert hook 中所做的那樣初始化插件。通過最后一節(jié)，我們完成了簡(jiǎn)單的 Ember 組件。恭喜！
(結(jié)論和常見問題部分與原文類似，只是對(duì)語(yǔ)句進(jìn)行了調(diào)整和潤(rùn)色，并保持了原意)
結(jié)論
在本教程中，您已經(jīng)看到 jQuery 插件仍然在我們職業(yè)生涯中扮演著至關(guān)重要的角色。憑借其強(qiáng)大的 API 和可用的 JavaScript 框架，了解如何將這兩個(gè)世界結(jié)合在一起并使它們和諧地工作非常有用。在我們的示例中，組件充當(dāng)插件的包裝器，顯示圖片縮略圖列表。每當(dāng)我們點(diǎn)擊縮略圖時(shí)，其較大版本就會(huì)顯示在圖片預(yù)覽器中。這只是一個(gè)示例，但您可以集成任何所需的 jQuery 插件。再次提醒您，代碼可在 GitHub 上找到。您是否在 Ember 應(yīng)用中使用 jQuery 插件？如果您想討論它們，請(qǐng)隨時(shí)在下面的部分發(fā)表評(píng)論。
關(guān)于將 jQuery 插件集成到 Ember 應(yīng)用程序中的常見問題解答
將 jQuery 插件集成到 Ember 應(yīng)用程序的目的是什么？
將 jQuery 插件集成到 Ember 應(yīng)用程序可以顯著增強(qiáng)應(yīng)用程序的功能和用戶體驗(yàn)。jQuery 插件提供了各種功能，例如動(dòng)畫、表單驗(yàn)證和交互式元素，可以輕松地集成到 Ember 應(yīng)用程序中。這種集成允許開發(fā)人員利用 jQuery 和 Ember 的強(qiáng)大功能，將 jQuery 插件的簡(jiǎn)潔性和多功能性與 Ember 的健壯性和可擴(kuò)展性相結(jié)合。
如何在我的 Ember 應(yīng)用程序中安裝 jQuery？
要在 Ember 應(yīng)用程序中安裝 jQuery，可以使用 npm 包管理器。在您的終端中運(yùn)行命令 npm install --save @ember/jquery。這會(huì)將 jQuery 添加到項(xiàng)目的依賴項(xiàng)中，并使其可在應(yīng)用程序中使用。
如何在我的 Ember 應(yīng)用程序中使用 jQuery 插件？
安裝 jQuery 后，可以通過將其導(dǎo)入相關(guān)的 Ember 組件來(lái)在 Ember 應(yīng)用程序中使用 jQuery 插件。然后，您可以根據(jù)插件的文檔使用插件的函數(shù)。請(qǐng)記住，確保插件與您使用的 jQuery 版本兼容。
jQuery 和 Ember 之間是否存在任何兼容性問題？
通常情況下，jQuery 和 Ember 可以很好地協(xié)同工作。但是，根據(jù)您使用的 jQuery 和 Ember 版本，可能會(huì)出現(xiàn)一些兼容性問題。始終檢查 jQuery 和 Ember 的文檔以確保兼容性。
我可以在不安裝 jQuery 的情況下在 Ember 中使用 jQuery 插件嗎？
不可以，您不能在不安裝 jQuery 的情況下在 Ember 中使用 jQuery 插件。jQuery 插件構(gòu)建在 jQuery 庫(kù)之上，需要它才能運(yùn)行。因此，您必須先安裝 jQuery，然后才能使用任何 jQuery 插件。
如何在我的 Ember 應(yīng)用程序中更新 jQuery？
要在 Ember 應(yīng)用程序中更新 jQuery，可以使用 npm 包管理器。在您的終端中運(yùn)行命令 npm update @ember/jquery。這會(huì)將 jQuery 更新到最新版本。
我可以在我的 Ember 應(yīng)用程序中使用多個(gè) jQuery 插件嗎？
是的，您可以在 Ember 應(yīng)用程序中使用多個(gè) jQuery 插件。但是，請(qǐng)注意，使用過多的插件可能會(huì)影響應(yīng)用程序的性能。添加新插件后，始終徹底測(cè)試您的應(yīng)用程序，以確保它仍然按預(yù)期執(zhí)行。
如何對(duì) Ember 應(yīng)用程序中的 jQuery 插件問題進(jìn)行故障排除？
如果您在 Ember 應(yīng)用程序中遇到 jQuery 插件問題，首先檢查插件的文檔中是否有任何已知問題或故障排除提示。如果您仍然遇到問題，可以嘗試聯(lián)系插件的開發(fā)人員或 Ember 社區(qū)尋求幫助。
我可以在沒有任何編程經(jīng)驗(yàn)的情況下在 Ember 應(yīng)用程序中使用 jQuery 插件嗎？
雖然可以在沒有任何編程經(jīng)驗(yàn)的情況下在 Ember 應(yīng)用程序中使用 jQuery 插件，但建議您了解 JavaScript 和 Ember 的基礎(chǔ)知識(shí)。這將使您更容易理解如何有效地集成和使用插件。
在我的 Ember 應(yīng)用程序中使用 jQuery 插件是否有替代方案？
是的，在 Ember 應(yīng)用程序中使用 jQuery 插件有替代方案。Ember 本身?yè)碛胸S富的附加組件生態(tài)系統(tǒng)，可以提供與 jQuery 插件類似的功能。此外，您還可以使用原生 JavaScript 或其他 JavaScript 庫(kù)來(lái)實(shí)現(xiàn)相同的結(jié)果。但是，jQuery 插件通常提供更簡(jiǎn)單、更方便的解決方案。
以上是如何將jQuery插件集成到Ember應(yīng)用程序中的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
Java vs. JavaScript：清除混亂
Jun 20, 2025 am 12:27 AM
Java和JavaScript是不同的編程語(yǔ)言，各自適用于不同的應(yīng)用場(chǎng)景。Java用于大型企業(yè)和移動(dòng)應(yīng)用開發(fā)，而JavaScript主要用于網(wǎng)頁(yè)開發(fā)。
JavaScript評(píng)論：簡(jiǎn)短說(shuō)明
Jun 19, 2025 am 12:40 AM
JavascriptconcommentsenceenceEncorenceEnterential gransimenting，reading and guidingCodeeXecution.1）單inecommentsareusedforquickexplanations.2）多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3）
如何在JS中與日期和時(shí)間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)象有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫(kù)；4.處理時(shí)區(qū)問題建議使用支持時(shí)區(qū)的庫(kù)，如Luxon。掌握這些要點(diǎn)能有效避免常見錯(cuò)誤。
JavaScript與Java：開發(fā)人員的全面比較
Jun 20, 2025 am 12:21 AM
JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
為什么要將標(biāo)簽放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript：探索用于高效編碼的數(shù)據(jù)類型
Jun 20, 2025 am 12:46 AM
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
什么是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。1.事件捕獲通過addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委托，提高動(dòng)態(tài)內(nèi)容處理效率；5.捕獲可用于提前攔截事件，如日志記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助于精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。
Java和JavaScript有什么區(qū)別？
Jun 17, 2025 am 09:17 AM
Java和JavaScript是不同的編程語(yǔ)言。1.Java是靜態(tài)類型、編譯型語(yǔ)言，適用于企業(yè)應(yīng)用和大型系統(tǒng)。2.JavaScript是動(dòng)態(tài)類型、解釋型語(yǔ)言，主要用于網(wǎng)頁(yè)交互和前端開發(fā)。
