JavaScript依賴性反彈：神話的漸進增強

核心要點

• 儘管AngularJS等客戶端框架興起，漸進增強(PE)仍然是解決Web開發問題（例如廣泛的瀏覽器支持、維護和應用程序的未來發展）的最佳選擇。
• PE並非針對禁用JavaScript的用戶，而是關於在某些JavaScript功能可用時增強用戶體驗。它不像客戶端框架那樣對您的受眾做出任何假設。
• PE的批評者經常聲稱這意味著支持舊瀏覽器，但實際上，為舊瀏覽器提供回退是PE的優勢，而不是其主要目標。
• JavaScript框架可以提供短期收益，但可能會導致訪問者減少和長期維護難題。它們牢牢地停留在現在，不像PE那樣允許使用現代API而不會破壞應用程序。
• 漸進增強將內容、佈局和功能分開，以便於維護，減少測試負擔，支持各種設備，並確保SEO和可訪問性。儘管客戶端JavaScript框架興起，這項技術仍然適用。

Louis最近在論壇主題“我們是否處於腳本依賴的反彈中？”中評論道：>我認為，在某種程度上，我們正處於某種腳本依賴的反彈中，這可能是一件好事。

簡而言之——我同意。其他人也同意，包括Web專家PPK（Angular的問題）、Jeremy Keith（Angular動量）和Jake Archibald（漸進增強仍然很重要）。

• 儘管客戶端框架迅速崛起，但相對較少的Web應用程序適合使用JavaScript框架。
• 漸進增強仍然是解決Web開發問題（例如廣泛的瀏覽器支持、維護和應用程序的未來發展）的最佳選擇。

讓我們定義一下我們正在討論的術語……什麼是JavaScript依賴？

客戶端框架的使用有所增加。它們提供類似服務器端的編碼模式，例如MVC、模板視圖、可重用組件、表單驗證等等。 AngularJS可能是最著名和最流行的，但它不是唯一的解決方案。與服務器端框架不同，客戶端替代方案必須在啟用現代JavaScript的瀏覽器上運行。如果沒有JavaScript，它們就會失敗。 TIDAL就是一個典型的例子；如果JavaScript不可用，用戶將看到一個空白頁面。沒有內容，沒有錯誤，也沒有註冊表單。雖然幾乎沒有理由不顯示消息，但JavaScript依賴型應用程序有一些很好的用例：

• 原型 快速模擬網站和應用程序，因為客戶端框架提供了豐富的組件和快捷方式。
• 純客戶端應用程序 如果您的應用程序很簡單，並且除了初始下載之外不需要服務器交互，那麼JavaScript框架可能是一個不錯的選擇（假設您可以刪除不需要的內容）。
• 內部企業應用程序 當您了解您的受眾及其使用的設備時，強制使用JavaScript就不是問題。 Angular最初是為企業應用程序設計的。
• 精細的界面 考慮一下動作遊戲、Google地圖和文檔。開發無JavaScript的替代方案是徒勞的。 Google創建了一個Google地圖的基本HTML版本，但它實際上是一個不同的應用程序，並在2010年被放棄。

還有其他情況，但大多數面向公眾的網站和應用程序不屬於這些類別。沒有人會阻止您使用客戶端框架，但是，當您有一把錘子時，所有東西看起來都像釘子。再次引用Louis的話：>開發人員似乎只是為了使用炫目的新工具而使用它們，而不是因為它們解決了實際問題。

什麼是漸進增強？

漸進增強(PE)不是一項技術，而是一種開發方法。我在2009年編寫了一些教程和示例，但這個概念自2003年以來就一直在討論。您首先建立一個基本的用戶體驗級別，然後在瀏覽器支持時添加更高級的功能。將PE推向邏輯的極致：

1. 您創建一個純HTML應用程序，所有重要的處理都在服務器端完成。它可以在任何瀏覽器中運行；移動設備、Lynx、IE1.0或任何您使用的瀏覽器。
2. 您使用CSS增強佈局。 CSS是PE就緒的，因為瀏覽器會忽略它們不理解的屬性。您可以使用媒體查詢或@supports規則等選項進一步增強它。應用程序仍然可以在任何地方工作，但為具有現代CSS功能的瀏覽器提供了改進的體驗。
3. 您使用JavaScript增強功能。 JavaScript是最不穩定的層，因為語言和API支持因瀏覽器而異。假設它運行，您會在使用它們之前測試可用性。例如，當支持canvas或SVG時，您可以將數據表轉換為漂亮的圖表。

每個瀏覽器都會收到它可以處理的最佳應用程序。可能沒有兩個瀏覽器提供完全相同的體驗。移動優先響應式設計和較少使用的離線優先是漸進增強技術的示例。讓我們檢查一下PE的批評。

神話：沒有人禁用JavaScript

很少有人知道JavaScript是什麼。很少有瀏覽器允許用戶（輕鬆）禁用JavaScript。 這是絕對正確的。 PE批評者隨後得出結論：>那些沒有JavaScript的人得到他們應得的。

假設JavaScript將始終、隨處、隨時達到您的應用程序所需的級別是危險的。每個人都有JavaScript，對吧？說明了這一點。漸進增強並非針對禁用JavaScript的用戶。它是在某些JavaScript功能可用時增強用戶體驗。當JavaScript被禁用時，應用程序可能會提供一個糟糕的界面，但用戶仍然會得到某些東西。

神話：沒有人使用舊瀏覽器

我們所說的“舊”是什麼意思？對於大多數開發人員來說，它是任何發布超過十二個月的瀏覽器。並非每個人都能使用最新最好的應用程序：

• 大型組織和政府部門
• 殘疾人
• 發展中國家的人民
• 社區中較不富裕的階層
• 任何使用iPhone 5.0或Android 4.0及以下版本的人。

這些部門可能對您來說並不重要。但是他們永遠都不重要嗎？漸進增強不對您的受眾做任何假設。客戶端框架並非如此。那些無法使用您的應用程序的人將從服務器日誌中消失。它很快就會變成一個自我實現的預言：“沒有人在舊瀏覽器上使用我們的應用程序，所以我們可以繼續這樣做……”

神話：漸進增強是反JavaScript的

漸進增強包含Web的基本優勢。可以開發一個可以在世界任何地方的任何網絡設備上運行的站點或應用程序。設備越好，用戶體驗就越好。客戶端框架使JavaScript成為絕對的依賴項。您不再為Web進行編碼。您的應用程序使用Web作為特定運行時引擎的交付機制。瀏覽器是您的操作系統，更新可能會破壞您的應用程序。

神話：漸進增強對用戶和設備做出假設

PE是關於不做假設。您不假設任何事情——這是這項技術的核心前提。 JavaScript框架會讓您誤以為每個人都在使用功能強大的設備上的強大瀏覽器。我們以前做過這些假設。這與假設每個人都在使用寬帶有什麼不同？或者每個人至少都有一個17英寸、至少960像素寬的屏幕？或者每個人現在和將來都會使用IE6？

神話：漸進增強意味著支持過時的瀏覽器

漸進增強批評者認為您會花費所有時間處理舊瀏覽器。實際上，恰恰相反：您永遠不需要處理舊瀏覽器，因為適當的回退已經到位。支持舊瀏覽器是PE的優勢——而不是目標。您可以支持最差的瀏覽器，但您可以建立任何您喜歡的基線。例如，我目前正在開發一個應用程序，其中addEventListener是大多數JavaScript運行的要求。因此，IE8及以下版本將無法顯示功能增強。我可以解決這個問題，但這不值得投資，因為它是一個沒有舊IE用戶的企業應用程序。但是，IE8用戶仍然可以使用該系統，如果需要，可以對其進行改進。

神話：JavaScript框架應用程序更酷

您可以使用PE技術創建外觀相同的應用程序。混淆的原因是大多數JavaScript框架提供了一系列外觀良好的預先開發的小部件。這些相同的小部件可以在漸進增強型應用程序中使用，但是，如果沒有JS，它們將回退到基本的HTML替代方案。 PE還允許您使用尚未出現在任何瀏覽器中的現代HTML、CSS和JavaScript API。考慮一下Fetch API——XMLHttpRequest的現代替代品。它支持最少，但我可以使用它而不會出現問題，因為我可以回退到XMLHttpRequest或服務器請求。 JavaScript框架牢牢地停留在現在——而不是未來。

神話：漸進增強阻礙了Web發展

或者，更具體地說，客戶端框架處於技術前沿，推動著Web向前發展。對不起，但這是一種錯覺。類似AngularJS的框架實現了神奇的功能，但是，深入研究一下，您仍然在使用HTML、CSS、JavaScript和DOM操作。充其量，它是一種抽象。最壞的情況是，它是一種干擾。您的客戶端框架僅與開發它的瀏覽器一樣好。 AngularJS 2.0是完全重寫的，因為在AngularJS 1.x發佈時，Object.observe()和Web Components等功能並不常見。該框架強制您使用舊技術，但會向您隱藏實現。 PE允許您使用任何現代API而不會破壞您的應用程序。祝您從Angular 1升級好運……

神話：JavaScript框架使開發更簡單

這部分是正確的——但僅當您開始構建應用程序時。您可以訪問一系列控件，這些控件可以縮短初始開發時間。但是，您隨後就被困在該框架的範圍內，這可能會導致以後出現問題。假設您的應用程序已經運行了一段時間，並且客戶要求支持BrowserX。它被一個主要客戶使用，並且並非特別舊；Blackberry瀏覽器、iPhone 4、Android 3.3等。他們可能期望開發時間為幾天，但如果您的JavaScript框架不兼容，則可能無法實現。對於使用PE技術開發的應用程序，這個問題可能永遠不會出現；您可能已經支持該瀏覽器。可以添加進一步的增強功能，而無需進行重大重寫。

神話：漸進增強是雙倍的工作量

這是批評者最喜歡的引言。唯一說PE工作量過大的人是那些從未嘗試過它或以某種方式嘗試失敗的人。如果您從一開始就沒有考慮PE，它只會花費兩倍的時間。試圖將PE改造到現有應用程序中註定要失敗——對於依賴JavaScript的應用程序尤其如此。讓我們考慮一個簡單的示例，例如搜索查詢結果的分頁列表。第一頁加載返回所有HTML。它很快，JavaScript無需執行任何操作。在幕後，我們使用數據庫查詢並將結果插入HTML模板中。您可以快速調整相同的服務以將結果作為JSON數據或不帶標題和頁腳的結果HTML返回。當用戶點擊“第2頁”時，將顯示第二頁結果：

• 使用JavaScript，我們可以攔截點擊並使用Ajax技術來獲取該頁結果。可以使用innerHTML將HTML數據插入頁面。或者，我們可以使用第1頁作為返回的JSON數據的模板。
• 如果JavaScript、XMLHttpRequest或Fetch不可用——或Ajax調用失敗——我們可以請求第二頁完整的HTML。

這需要更多工作，但這絕對不是雙倍的工作量。我們受益於跨瀏覽器容錯解決方案。

神話：漸進增強毫無意義——網站發展或消亡

此論點背後的邏輯是網站最終會過時。因此，您可以使用一個在特定時間點針對特定技術的框架。我希望如此。如果您的代碼很好，它將被使用的時長遠超您的預期。糟糕的代碼存活時間更長，因為沒有人想觸碰它。但是，再次使用漸進增強，您除了Web將繼續作為基於客戶端/服務器的基於HTML的系統之外，不做任何假設。 Web需要從根本上改變才能使您的應用程序失敗——它將不再是Web！

神話：漸進增強是一種由老前輩推薦的舊技術

引用Oddz的話：>客戶端JavaScript框架的激增使您與其他“老前輩”一起成為少數派。

是的，謝謝！ JavaScript反彈是由在Web上開發了相當長一段時間的人領導的。我們都是害怕新技術的頑固分子，無法與時俱進嗎？也許吧。或者也許是因為我們從我們許多、許多歷史錯誤中吸取了一些教訓？ JavaScript框架提出了熟悉的問題：

• 有些人像我們過去使用onclick處理程序一樣混合HTML和功能，例如

• 它們針對特定瀏覽器。已經出現了“最佳瀏覽方式……”消息和標籤的複蘇。

• 它們對今天的Web做出了假設——例如JavaScript在任何地方都能工作，並且每頁2MB是合理的。

• 他們沒有規劃未來。

JavaScript框架主要使開發人員受益——而不是用戶。它們可以提供短期收益，但代價是訪問者減少和痛苦的長期維護。而且不要忘記SEO。 Google會索引JavaScript頁面，但並非一定能夠跟踪每個邏輯分支。除非您仔細編寫代碼，否則也很難鏈接回特定URL。漸進增強補充了Web的優勢：

• 它將內容、佈局和功能分開，以便於維護
• 您正在為Web編寫防禦性、容錯、與設備無關的代碼——而不是瀏覽器
• 您可以支持各種設備
• 您的測試負擔減少了，因為您的應用程序在發生故障時仍然可以運行
• SEO和可訪問性是內置的（或需要更少的努力）
• 網站和應用程序將在今天、昨天和明天發布的瀏覽器上運行
• 沒有人反駁漸進增強的優勢或提出更好的技術。

只有一個缺點：很明顯，許多開發人員仍然不信任或不理解漸進增強。 JavaScript依賴的反彈萬歲！

關於JavaScript依賴和漸進增強的常見問題解答(FAQ)

什麼是JavaScript依賴？

JavaScript依賴是指JavaScript代碼依賴其他JavaScript文件或庫才能正常運行。例如，如果一個JavaScript文件使用在另一個文件或庫中定義的函數或變量，則稱其依賴於該文件或庫。依賴關係可以使代碼更高效、更易於管理，但如果管理不當，它們也可能引入複雜性和潛在問題。

JavaScript中的漸進增強是什麼？

漸進增強是一種設計理念，它首先強調核心網頁內容，然後逐步在其之上添加更細緻和復雜的演示和功能層。在JavaScript的上下文中，這意味著編寫代碼，為所有瀏覽器提供基本功能，同時為可以支持它的瀏覽器提供高級功能。

JavaScript依賴如何影響漸進增強？

JavaScript依賴可能會阻礙漸進增強的實現。如果一個JavaScript文件嚴重依賴於並非所有瀏覽器都支持的其他文件或庫，則它可能無法為這些瀏覽器提供基本功能。這違背了漸進增強的原則，漸進增強旨在為所有用戶提供核心功能。

漸進增強的優點是什麼？

漸進增強提供了許多好處。它確保所有用戶都可以訪問網頁的核心內容和功能，而不管其瀏覽器的功能如何。它還推廣了語義HTML和關注點分離等良好的Web實踐，並使網站更能抵抗JavaScript或CSS的潛在問題。

JavaScript依賴的缺點是什麼？

雖然JavaScript依賴可以使代碼更高效、更易於管理，但它也可能引入複雜性和潛在問題。如果依賴關係管理不當，可能會導致代碼膨脹、加載時間變慢以及不同文件或庫之間可能發生衝突等問題。它還可以使代碼更難維護和調試。

如何有效地管理JavaScript依賴關係？

有幾種策略可以有效地管理JavaScript依賴關係。這些策略包括使用Webpack或Rollup之類的模塊捆綁器，可以將所有依賴項捆綁到單個文件中；使用npm或Yarn之類的包管理器，可以幫助您管理和更新依賴項；以及使用ESLint之類的代碼檢查器，可以幫助您發現依賴項的潛在問題。

如何在我的JavaScript代碼中實現漸進增強？

在您的JavaScript代碼中實現漸進增強包括編寫代碼，為所有瀏覽器提供基本功能，然後為可以支持它的瀏覽器逐步添加更高級的功能。這可以通過使用特性檢測來檢查瀏覽器是否支持某個特性然後再使用它，並確保您的代碼在不支持某些特性的瀏覽器中可以優雅地降級來實現。

JavaScript依賴與客戶端JavaScript框架之間的關係是什麼？

客戶端JavaScript框架通常嚴重依賴於JavaScript依賴關係。這些框架（例如React、Angular和Vue.js）包含許多內置功能和庫，您的代碼可以依賴它們。雖然這可以使開發更快、更容易，但如果這些依賴關係管理不當，也可能導致潛在問題。

漸進增強在客戶端JavaScript框架中的作用是什麼？

漸進增強可以在客戶端JavaScript框架中發揮關鍵作用。這些框架通常包含允許開發人員實現漸進增強的功能，例如服務器端渲染和代碼分割。這些功能可以幫助確保您的Web應用程序為所有用戶提供核心功能，而不管其瀏覽器的功能如何。

如何在我的Web開發項目中平衡JavaScript依賴和漸進增強？

平衡JavaScript依賴和漸進增強需要仔細規劃和良好的編碼實踐。您應該盡量減少代碼的依賴關係，並確保它們得到妥善管理。同時，您應該努力實現漸進增強，確保您的Web應用程序為所有用戶提供核心功能。這可能涉及使用特性檢測、優雅降級和其他技術。

以上是JavaScript依賴性反彈：神話的漸進增強的詳細內容。更多資訊請關注PHP中文網其他相關文章！