關(guān)鍵要點(diǎn)
- 將 jQuery 插件集成到 Ember 應(yīng)用中，通過結(jié)合 jQuery 插件的簡潔性和多功能性以及 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è)簡單的 Ember 組件。本教程將展示如何將 jQuery 插件集成到 Ember 應(yīng)用中。該組件充當(dāng)插件的包裝器，顯示圖片縮略圖列表。每當(dāng)我們點(diǎn)擊縮略圖時(shí)，其較大版本就會(huì)顯示在圖片預(yù)覽器中。這是通過提取點(diǎn)擊的縮略圖的 src 屬性來實(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 文件中來將其包含在項(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 語句之前添加以下兩行：
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)槲覀冞€沒有連接插件事件處理程序。讓我們來做吧！但在描述如何執(zhí)行正確的初始化之前，我將向您展示許多開發(fā)人員都會(huì)犯的一個(gè)錯(cuò)誤。此解決方案乍一看似乎有效，但我將通過展示它引入的錯(cuò)誤來證明它不是最佳方案。
(以下內(nèi)容與原文類似，只是對(duì)語句進(jìn)行了調(diào)整和潤色，並保持了原意)
Ember 組件初始化
為了展示問題，讓我們首先將以下代碼添加到 didInsertElement 函數(shù)中：
npm install -g ember-cli
在不使用 Ember 的情況下，這就是您通常初始化插件的方式。現(xiàn)在，檢查您的瀏覽器窗口並點(diǎn)擊縮略圖。您應(yīng)該會(huì)看到它們按預(yù)期加載到大型圖片預(yù)覽器中。一切似乎都正常工作，對(duì)吧？好吧，檢查一下當(dāng)我們添加第二個(gè)組件實(shí)例時(shí)會(huì)發(fā)生什麼。通過添加另一行包含我之前顯示的相同代碼的代碼到索引模板中來執(zhí)行此操作。因此，您的模板現(xiàn)在應(yīng)如下所示：
ember new emberjquery
如果您切換到瀏覽器窗口，您應(yīng)該會(huì)看到兩個(gè)組件實(shí)例顯示出來。當(dāng)您點(diǎn)擊其中一個(gè)實(shí)例的縮略圖時(shí)，您可以注意到錯(cuò)誤。兩個(gè)實(shí)例的預(yù)覽器都會(huì)更改，而不僅僅是點(diǎn)擊的那個(gè)實(shí)例。要解決此問題，我們需要稍微更改一下初始化程序。要使用的正確語句如下所示：
"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ò)誤，這可能是未來文章的主題。但是，操作組件的 DOM 的最佳實(shí)踐是使用 this.$。
銷毀插件
好吧，到目前為止，我們已經(jīng)了解瞭如何設(shè)置事件處理程序?，F(xiàn)在是時(shí)候展示如何移除我們使用插件設(shè)置的任何事件了。當(dāng)我們的組件即將從 DOM 中移除時(shí)，我們應(yīng)該這樣做。我們應(yīng)該這樣做，因?yàn)槲覀儾幌Ｍ魏稳唣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)用程序無法觸發(fā)此 hook。因此，我們將設(shè)置一個(gè)演示點(diǎn)擊處理程序。在此處理程序中，我們將調(diào)用插件實(shí)例上的 stopEvents 方法。這允許我展示所有事件處理程序都已按預(yù)期移除?，F(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é)，我們完成了簡單的 Ember 組件。恭喜！
(結(jié)論和常見問題部分與原文類似，只是對(duì)語句進(jìn)行了調(diào)整和潤色，並保持了原意)
結(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 插件的簡潔性和多功能性與 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 組件來在 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 庫之上，需要它才能運(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)用程序的性能。添加新插件後，始終徹底測試您的應(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 本身擁有豐富的附加組件生態(tài)系統(tǒng)，可以提供與 jQuery 插件類似的功能。此外，您還可以使用原生 JavaScript 或其他 JavaScript 庫來實(shí)現(xiàn)相同的結(jié)果。但是，jQuery 插件通常提供更簡單、更方便的解決方案。
以上是如何將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脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
垃圾收集如何在JavaScript中起作用？
Jul 04, 2025 am 12:42 AM
JavaScript的垃圾回收機(jī)制通過標(biāo)記-清除算法自動(dòng)管理內(nèi)存，以減少內(nèi)存洩漏風(fēng)險(xiǎn)。引擎從根對(duì)像出發(fā)遍歷並標(biāo)記活躍對(duì)象，未被標(biāo)記的則被視為垃圾並被清除。例如，當(dāng)對(duì)像不再被引用（如將變量設(shè)為null），它將在下一輪迴收中被釋放。常見的內(nèi)存洩漏原因包括：①未清除的定時(shí)器或事件監(jiān)聽器；②閉包中對(duì)外部變量的引用；③全局變量持續(xù)持有大量數(shù)據(jù)。 V8引擎通過分代回收、增量標(biāo)記、並行/並發(fā)回收等策略優(yōu)化回收效率，降低主線程阻塞時(shí)間。開發(fā)時(shí)應(yīng)避免不必要的全局引用、及時(shí)解除對(duì)象關(guān)聯(lián)，以提升性能與穩(wěn)定性。
如何在node.js中提出HTTP請(qǐng)求？
Jul 13, 2025 am 02:18 AM
在Node.js中發(fā)起HTTP請(qǐng)求有三種常用方式：使用內(nèi)置模塊、axios和node-fetch。 1.使用內(nèi)置的http/https模塊無需依賴，適合基礎(chǔ)場景，但需手動(dòng)處理數(shù)據(jù)拼接和錯(cuò)誤監(jiān)聽，例如用https.get()獲取數(shù)據(jù)或通過.write()發(fā)送POST請(qǐng)求；2.axios是基於Promise的第三方庫，語法簡潔且功能強(qiáng)大，支持async/await、自動(dòng)JSON轉(zhuǎn)換、攔截器等，推薦用於簡化異步請(qǐng)求操作；3.node-fetch提供類似瀏覽器fetch的風(fēng)格，基於Promise且語法簡單
JavaScript數(shù)據(jù)類型：原始與參考
Jul 13, 2025 am 02:43 AM
JavaScript的數(shù)據(jù)類型分為原始類型和引用類型。原始類型包括string、number、boolean、null、undefined和symbol，其值不可變且賦值時(shí)復(fù)制副本，因此互不影響；引用類型如對(duì)象、數(shù)組和函數(shù)存儲(chǔ)的是內(nèi)存地址，指向同一對(duì)象的變量會(huì)相互影響。判斷類型可用typeof和instanceof，但需注意typeofnull的歷史問題。理解這兩類差異有助於編寫更穩(wěn)定可靠的代碼。
JavaScript時(shí)間對(duì)象，某人構(gòu)建了一個(gè)eactexe，在Google Chrome上更快的網(wǎng)站等等
Jul 08, 2025 pm 02:27 PM
JavaScript開發(fā)者們，大家好！歡迎閱讀本週的JavaScript新聞！本週我們將重點(diǎn)關(guān)注：Oracle與Deno的商標(biāo)糾紛、新的JavaScript時(shí)間對(duì)象獲得瀏覽器支持、GoogleChrome的更新以及一些強(qiáng)大的開發(fā)者工具。讓我們開始吧！ Oracle與Deno的商標(biāo)之爭Oracle試圖註冊(cè)“JavaScript”商標(biāo)的舉動(dòng)引發(fā)爭議。 Node.js和Deno的創(chuàng)建者RyanDahl已提交請(qǐng)願(yuàn)書，要求取消該商標(biāo)，他認(rèn)為JavaScript是一個(gè)開放標(biāo)準(zhǔn)，不應(yīng)由Oracle
React與Angular vs Vue：哪個(gè)JS框架最好？
Jul 05, 2025 am 02:24 AM
選哪個(gè)JavaScript框架最好？答案是根據(jù)需求選擇最適合的。 1.React靈活自由，適合需要高度定制、團(tuán)隊(duì)有架構(gòu)能力的中大型項(xiàng)目；2.Angular提供完整解決方案，適合企業(yè)級(jí)應(yīng)用和長期維護(hù)的大項(xiàng)目；3.Vue上手簡單，適合中小型項(xiàng)目或快速開發(fā)。此外，是否已有技術(shù)棧、團(tuán)隊(duì)規(guī)模、項(xiàng)目生命週期及是否需要SSR也都是選擇框架的重要因素?？傊瑳]有絕對(duì)最好的框架，適合自己需求的就是最佳選擇。
立即在JavaScript中立即調(diào)用功能表達(dá)式（IIFE）
Jul 04, 2025 am 02:42 AM
IIFE（ImmediatelyInvokedFunctionExpression）是一種在定義後立即執(zhí)行的函數(shù)表達(dá)式，用於變量隔離和避免污染全局作用域。它通過將函數(shù)包裹在括號(hào)中使其成為表達(dá)式，並緊隨其後的一對(duì)括號(hào)來調(diào)用，如(function(){/code/})();。其核心用途包括：1.避免變量衝突，防止多個(gè)腳本間的命名重複；2.創(chuàng)建私有作用域，使函數(shù)內(nèi)部變量不可見；3.模塊化代碼，便於初始化工作而不暴露過多變量。常見寫法包括帶參數(shù)傳遞的版本和ES6箭頭函數(shù)版本，但需注意：必須使用表達(dá)式、結(jié)
處理諾言：鏈接，錯(cuò)誤處理和承諾在JavaScript中
Jul 08, 2025 am 02:40 AM
Promise是JavaScript中處理異步操作的核心機(jī)制，理解鍊式調(diào)用、錯(cuò)誤處理和組合器是掌握其應(yīng)用的關(guān)鍵。 1.鍊式調(diào)用通過.then()返回新Promise實(shí)現(xiàn)異步流程串聯(lián)，每個(gè).then()接收上一步結(jié)果並可返回值或Promise；2.錯(cuò)誤處理應(yīng)統(tǒng)一使用.catch()捕獲異常，避免靜默失敗，並可在catch中返回默認(rèn)值繼續(xù)流程；3.組合器如Promise.all()（全成功才成功）、Promise.race()（首個(gè)完成即返回）和Promise.allSettled()（等待所有完成）
什麼是緩存API？如何與服務(wù)人員使用？
Jul 08, 2025 am 02:43 AM
CacheAPI是瀏覽器提供的一種緩存網(wǎng)絡(luò)請(qǐng)求的工具，常與ServiceWorker配合使用，以提升網(wǎng)站性能和離線體驗(yàn)。 1.它允許開發(fā)者手動(dòng)存儲(chǔ)如腳本、樣式表、圖片等資源；2.可根據(jù)請(qǐng)求匹配緩存響應(yīng)；3.支持刪除特定緩存或清空整個(gè)緩存；4.通過ServiceWorker監(jiān)聽fetch事件實(shí)現(xiàn)緩存優(yōu)先或網(wǎng)絡(luò)優(yōu)先等策略；5.常用於離線支持、加快重複訪問速度、預(yù)加載關(guān)鍵資源及後臺(tái)更新內(nèi)容；6.使用時(shí)需注意緩存版本控制、存儲(chǔ)限制及與HTTP緩存機(jī)制的區(qū)別。
