寫個鎚子JS！它應該是你最後的選擇

  • 2021 年 3 月 12 日
  • 筆記

本文翻譯自：
//dev.to/olpeh/javascript-should-be-your-last-resort-5dje

在進行現代化Web前端開發時，使用著自己最愛的框架，有時候可能會情不自禁地用JavaScript解決所有的問題。很多時候這是無意識的，因為你日復一日的開發工作使用的正是JS。

這類似於亞伯拉罕·馬斯洛（Abraham Maslow）在1966年描述的情況：

如果你僅有的工具是鎚子，那麼你就會不自禁地把所有東西都當作釘子。

——維基百科：Law of the instrument

圖片來自Unsplash，作者FaustoMarqués

注意：在這篇文章中，我只談論JS，儘管我在項目中使用的主要是TS——但最終，在編譯後，都變成了JS。

實現UI時要考慮的因素

在所有情況下都使用JS的這種思維方式會產生不必要的處理負擔，這些額外的JS操作都需要在最終用戶的設備上運行。網站上的所有JS資源都需要通過網路瀏覽器下載、解析和執行。這通常是導致低端移動設備上的網站速度變慢和無響應，或使得網路速度變慢的原因。

那麼我們應該如何走出思維困局：

  1. 是否可以用HTML完成？
  2. 如果不能，那麼用HTML + CSS可以解決嗎？
  3. 如果其他都沒有效果，那麼解決方案除了HTML和CSS之外，可能需要少量的JS。

這種思維方式對開發人員來說並不是一件易如反掌的事。可能你是一個關注JavaScript的前端開發人員，那麼用這種方式解決大多數問題對你來說像呼吸一樣自然。但是，你還得考慮你的最終用戶。當涉及到Web性能時，客戶端JS作為最大的問題一騎絕塵。

1. 是否可以用HTML完成？

計劃和實現功能的基本結構和語義，先考慮是否可以使用純HTML，而無需任何額外的樣式和使用本機HTML元素和功能。如果需要一些其他樣式或功能，則轉到步驟2。

2.嘗試使用HTML + CSS解決

使用CSS來應用所需的其他樣式或動畫，同時在腦海中謹記語義和可訪問性。如果你要構建的特定UI片段中需要有一些額外的互動，則轉到步驟3。

3.使用HTML + CSS + JS

添加滿足要求所需的最少JS程式碼量。請記住，如果不用JS就可以解決問題，那麼就應該不要用到JS。

完成後，向同事展示程式碼，讓他們進行審核。這樣的話，如果程式碼中還有些不必要的部分，那麼就可以解決這些問題而不給用戶增加客戶端JS成本。

舉個簡單的例子

所舉的這個例子，發生於Web前端開發中的幾乎所有部分，但此處是一個簡單的示例，用來證明我的觀點。

假設你正在開發一個React項目，而你正在開發的功能具有一些UI部件，這些UI部件只有在一定的延遲（例如2秒）之後才可見。

使用React Hooks

如果你習慣於使用React和Hooks解決問題，那麼最初的解決方案可能是這樣的：

const [thingVisible, setThingVisible] = useState(false);

useEffect(() => {
  const timeoutId = setTimeout(() => {
    setThingVisible(true);
  }, 2000);

  return function cleanup() {
    clearTimeout(timeoutId);
  };
}, []);

return thingVisible ? <section>Here's a thing for you!</section> : null;

程式碼不錯，且有效。也許你在功能強大的開發機器上都沒有發現性能差異。甚至在這個示例中，可能也沒有實際的性能問題。但是想像一下，如果這些堆積起來，突然之間，有數十或數百個類似的不必要的JS計算將在客戶端運行，亦或者客戶端正在執行一些更大、更長的執行。

使用HTML + CSS動畫

使用CSS，你可以使用CSS動畫和animation-delay對內容進行動畫處理，以使其延遲顯示在頁面上。所有瀏覽器都支援此功能，甚至可以提供更好的終端用戶體驗，因為你可以淡入內容或使用任何其他方式使內容顯現得更順暢。

HTML：

<section class="fade-in">Here's a thing for you!</section>

CSS：

.fade-in {
  opacity: 0;
  animation: fadeIn 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

可以使用HTML處理，就不用CSS

同理，如果是可以或應該用HTML處理的一些內容，那麼就不要使用CSS進行操作。

一個極端的例子是，假設我們不小心使用邊距隔離兩個單詞，而不是在單詞之間使用空格！這顯然不是一個好主意，至少從以下幾個方面來看：

  • 可能不遵循字體大小，字母間距等。
  • 沒有必要，浪費精力
  • 如果有人需要複製文本，那麼單詞之間會沒有空格

前端開發並不容易

Web前端開發不是一個容易掌握的主題。快速入門可以，但是要掌握它則需要一定程度的經驗和學習的積累，才能夠使用正確的工具，在恰當的水平上解決正確的問題。解決前端中的問題時會涉及到很多層次和細節。

此外，由於各種原因（例如性能，可用性或可維護性等），你需要了解何時應該在後端而不是在前端解決問題。

總而言之，請記住，有時候我們無需絞盡腦汁地尋求完美的解決方案，可能一些可行的方案就足以應付生產發布和供終端用戶使用。

（文本完）

 

 

每日分享前端插件和前端開發教程，歡迎掃碼關注我的公眾號：前端新世界

VirMach 便宜 VPS

QNews

QNews