擁抱平台

那麼，人們可以做的一件事是使他們的網站變得更好呢？為了回答這個問題，讓我們回到過去…

這一年是1998年，網絡正在上升。為了嘗試對www的建築進行高級概述，蒂姆·伯納斯·李（Tim Berners-Lee） -是的，蒂姆·伯納斯·萊（Tim Berners-Lee） - 發表了一篇論文，稱為“ 50,000英尺的網絡建築”。該報告涵蓋了很多事情：內容談判，語義網絡，HTML，CSS和Cool Uris（不會改變）等。

在文章中，Berners-Lee也很早就指出了一些設計原則。這些原則之一是“權力最少的規則”。

權力最少的規則是這樣的：

在設計計算機系統時，通常會在使用或多或少強大的語言發布信息，表達約束或解決某些問題之間面臨選擇。 […]“最小權力的規則”表明選擇適合給定目的的最低強大語言。

我們的前端有三種主要語言：

html

語義描述內容

CSS

控制演示文稿和佈局

JavaScript

增加互動和行為

權力最小的規則表明，在訴諸CSS之前，使用HTML盡可能多地嘗試和做。一旦CSS不夠，請抓住JavaScript，但前提是您確實必須這樣做。

正如德里克·費瑟斯通（Derek Featherstone）很好地說的那樣：

在Web前端堆棧中 - HTML，CSS，JS和ARIA-如果您可以使用堆棧中較低的解決方案解決問題，則應解決問題。它不那麼脆弱，更萬無一失，只是起作用。

？舉起：這並不意味著您應該通過標記設置字體尺寸和顏色，這是我們過去在網絡的“舊日”中做的事情。例子：Berners-Lee作品所涵蓋的規則之一是形式和內容的分離。

破損的網絡

自Berners-Lee發表該文章以來已經將近25年了。但是，不知何故，他發送的信息沒有通過，許多開發人員（但不是全部）都沒有意識到這一點。採取這種情況，不久前遇到了Drew Devault：

在過去的28年中，我的瀏覽器在提交HTML表格方面非常有能力，但是出於某種愚蠢的原因，一些開發人員決定在JavaScript中重新實現該表格，現在，如果不開放Dev Tools，我就無法支付電費。

可悲的是，這不是孤立的案例，而是一種熟悉的現象。我經常看到試圖變得聰明或試圖重新發明輪子的網站和圖書館 - 主要是通過向其投擲一堆JavaScript。在嘗試這樣做的嘗試中，他們實現了與他們的目標完全相反的相反：這些網站的功能較低，易於訪問範圍，或者（甚至更糟糕的是）在某些條件下根本不起作用。

雖然表格可能是一個熟悉的例子，但在其他情況下，應用最小功率的規則會帶來更好的結果：

• 光滑的滾動？
  ？不需要JavaScript，因為CSS可以做到這一點。
• 需要從基於JSON的API傳達錯誤嗎？
  ？不要在響應主體中使用{error：true}的HTTP 200，而是使用HTTP狀態代碼來傳達錯誤。
• 通過JavaScript關閉？
  ？帶有[method =“對話框”]的元素會很好。
• 想要懶惰的負載圖像嗎？
  ？這很快將受到HTML標記中所有現代瀏覽器的支持，並具有屬性。
• 可自定義的？
  ？正如我們所說的那樣。
• 是否想將動畫鏈接到滾動偏移量？
  ？現在不需要外部JavaScript庫，因為現在是瀏覽器本機API，很快也只能使用CSS完成一些操作。
• 需要防止某些字符以形式輸入嗎？
  ？不要禁用粘貼，而是選擇適當的輸入類型和/或使用模式屬性。
• 需要崩潰的部分嗎？
  ？ 和
  是您的朋友。
• 等等…

在所有這些示例中，我們都可以將一些功能從上層移動到下層。 Berners-Lee會為我們感到驕傲。

彈力

通過在Web堆棧中選擇較低的技術，更靠近Web平台的核心，我們還獲得了內置彈性抵抗故障的好處。

JavaScript的失敗很糟糕。一個未能加載或在過程中被弄髒的腳本，或一個錯誤的論點，您的整個應用程序可能不再起作用。如果像“無法讀取屬性x的屬性x”這樣的錯誤消息聽起來很熟悉，那麼您就會知道我在說什麼。

另一方面，CSS非常擅長失敗。即使您的樣式表中有語法錯誤，其餘的CSS仍然可以正常工作。與HTML相同。這些是寬容的語言。

如果您懷疑為什麼要使用權力最小的規則，傑里米·基思（Jeremy Keith）在他的文章“評估技術”中為我們帶來了答案：

我們傾向於問“它的工作狀況如何？”，但是您應該真正問的是“它的失敗程度？”

傑里米·基思（Jeremy Keith）

我們可以做得更好

耐克網站是一個備受矚目的網站。當您使用JavaScript禁用的JavaScript訪問他們的網站時，您不會看到任何圖像，也不會訂購任何鞋子。

對JavaScript的這種過度依賴是不需要的，因為所有這些損壞的功能都可以使用前端堆棧中的技術較低構建：

• 為什麼不立即包含元素以顯示鞋子照片而不是通過JavaScript動態注入它們呢？
• 為什麼不將與（選擇您的尺寸）和提交訂購鞋子，而不是通過JavaScript來管理整個狀態並提交提交？

☝️如果您想知道為什麼有人會禁用JavaScript瀏覽網絡：這通常不是他們的選擇，而是一個正在干擾的外部因素。請參閱“每個人都有JavaScript，對吧？”為該主題進行很好的解釋。

此類別中的罪犯甚至更糟糕的是Instagram和Twitter等備受矚目的網站。沒有JavaScript這些網站根本不起作用。他們要么給您警告，要么只是空白。因為什麼時候需要JavaScript在網絡上顯示文本和圖像？

漸進式增強

它不一定像這個孤立的耐克示例那樣糟糕。有時，當JavaScript失敗時，較小的組件會拒絕工作。以選項卡式接口為例。即使您可以找到很多提供此功能的JavaScript庫，啟動器是您不需要JavaScript，因為HTML，CSS和ARIA本身已經有能力使您很遠。

一旦擁有這些基層層，請使用JavaScript進一步改善體驗。將JavaScript視為增強，而不是要求。

某些CSS功能可能也可能不可用的CSS功能也是如此。提供基本的樣式，並在可用的功能（可使用@supports檢測到）時增強您已經獲得的結果。

這種方法被稱為漸進式增強：隨著更多功能可用，您可以添加功能，從而使結果更好，但沒有太多的功能，以至於沒有這些額外的繁榮就無法正常工作。

對於尚未支持特定新功能的瀏覽器，您可以嘗試找到為瀏覽器提供該功能的多填充。

網絡趕上

自網絡早期以來，我們已經看到Web平台隨著時間的推移獲得了許多新功能。定義了新的HTML元素，JavaScript（語言）已經成熟，CSS獲得了許多有力的新功能，用於構建佈局，動畫元素等。

幾年前不可能的事情，只能通過像Flash這樣的外部技術來完成瀏覽器本身。

一個經典的示例是引入jQuery的功能。十多年前，JQuery是進入一個項目的第一件事。今天，情況不再如此，因為網絡平台已經趕上了，現在擁有document.clearselectorall（），element.ClassList等。您可以說jQuery是在多填充物被稱為polyfills之前。

雖然jQuery可能是一個熟悉的例子，但網絡還趕上了許多其他情況：

• 在JavaScript中與非常糟糕的日期（）API掙扎？
  ？暫時的API可以更好地使用。
• 使用第三方JavaScript庫在屏幕上進行動畫元素？
  ？為什麼不嘗試內置的Web動畫API？它真的很強大。
• 需要彩色的無線電按鈕和復選框嗎？
  ？新的CSS口音色屬性為您做到這一點。
• 依靠預處理器以便使用CSS變量？
  ？ CSS自定義屬性是過去20年中CSS的最大補充。
• 等等…

這裡的中心主題是這些功能不再依賴於多填充或外部庫，而是更靠近網絡堆棧的核心。網絡趕上了。

儘管其中一些新的API可以很抽象，但您可以將其插入代碼中。一個示例是Redaxios，它在引擎蓋下使用fetch，同時還可以暴露與Axios兼容的API的開發人員。如果這些便利方法最終將其滴入Web平台，這不會令我感到驚訝。

結束

伯納斯·李（Berners-Lee）在大約25年前寫的是時間的考驗。開發人員要遵守我們的信息。通過擁抱Web平台給我們的東西（而不是試圖與之抗衡），我們可以構建更好的網站。

保持簡單。運用最少權力的規則。考慮到逐步增強的構建。

HTML，CSS和JavaScript - 按照此順序。

以上是擁抱平台的詳細內容。更多資訊請關注PHP中文網其他相關文章！