JavaScript 生態圈和技術趨勢，這一年發生了這些變化 ...

作者：ConardLi 2022-02-21 11:14:05

開發

JS 生態圈最權威的調查報告 state-of-js 終于是出來了。

今天，我來帶大家看看 2021 年 state-of-js 的調查結果：

速覽

下面是我挑出來的幾個比較重點的，我們先來速覽一下：

可選鏈操作符使用率已經高達 85% 。
空值合并操作符（ ?? ）使用率提升了 21% 。
將近 50% 的受訪者在使用 Shadow DOM API 。
esbuild 是滿意度調查中同比增長最大的工具。
Vite 97%26%
當前有 5.6% 的受訪者正在使用 Deno 。
一些老牌 JS 庫 Axios、Lodash 和 Moment 仍然是最受歡迎的。
TypeScript JavaScript Elm

JS特性 - 語言

Proxy

Proxy 在各種框架和庫中使用的越來越多了（特別是 Vue.js 3.0 開始使用后），所以了解到它的同學也越來越多，但是實際使用率沒有太大變化。

Promise.allSettled()

Promise.allSettled() 我還沒用過，用法類似于 Promise.all ，區別是：它所有給定的 promise 不管是 fulfilled 還是 rejected 狀態，只要全部返回后它就會返回。在你不關心所有的異步任務是不是都必須成功的時候可能會用到它。

Dynamic Import

動態導入：只有 15% 的人還不知道它，接近 50% 的小伙伴都用過了，一般會在懶加載的時候用到。

Nullish Coalescing

空值合并運算符：這玩意這么多人都在用嗎？用過的小伙伴可以在評論區說一下，我平時用的比較多的還是 || 或者 && 。

空值合并操作符（ ?? ），會在左側的操作數為 null 或者 undefined 時，返回其右側操作數，否則返回左側操作數。

和 || 的區別是， || 會在左側是 0 的時候也返回右側，而 ?? 會返回 0 。

const baz = 0 ?? 42;
console.log(baz); // 0

const conard = 0 ||  42;
console.log(conard); // 42

Optional Chaining

可選鏈：使用率已經高達 85% ，非常實用的特性，不多說了。

Private Fields

私有屬性：只有 20% 的人用過，我們在類里面定義的屬性或方法默認情況下都是公有的，可以通過在前面加個 # 來變成私有的（僅在類內部可以訪問）。

class ClassWithPrivateField {
  #privateField;
}

class ClassWithPrivateMethod {
  #privateMethod() {
    return 'hello ConardLi';
  }
}

BigInt

BigInt 可以解決 Number 的精度丟失問題，一般大于 2^53 的數我們建議用 BigInt 來表示，不過現在使用率還很低，大家通常還是用一些庫去處理數字。

String.prototype.replaceAll()

replaceAll ：可以讓我們按照一個正則進行更靈活的字符串替換，第一年參加調查， Chrome85 才開始支持的函數，已經有這么多人用過了，真的是一個非常實用的函數：

const regex = /ConardLi/ig;
console.log(p.replaceAll(regex, '棒！'));

JS特性 - 瀏覽器 API

Service Workers

Service Worker ：一個服務器與瀏覽器之間的中間人角色，它可以攔截當前網站所有的請求，我們可以在這中間做很多靈活的判斷和處理，只有 8% 的人不知道它了，使用率已經高達 45% 。

Intl

Intl 瀏覽器給我們提供的一個原生的用來做國際化的 API ，國際化的需求一般比較復雜，反正我們國際化都是用庫，省心很多，這個還沒用過。

Web Audio API

控制 Web 音頻的 API ，只有特定領域的開發者才會用到，變化也不大。

WebGL

Web 圖形化的需求越來越復雜多樣， WebGL 的普及也不可避免。現在大多數人都有過了解，但是使用者還局限在特定領域，今年的增長率已經有了小的變化，相信未來會迎來一個爆發增長～

Web Animations API

dom 上的 animate 函數，就屬于 Web Animations API 中的一個，我們日常使用 CSS 實現的一些動畫，都可以借助它轉換成 JS 實現：

document.getElementById("CoonardLi").animate(
  [
    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
    { color: '#431236', offset: 0.3 },
  ], {
    duration: 3000,
    iterations: Infinity
  }
);

這個應該大家都有了解過吧，一般 XXX 網頁動畫實戰這樣的課程和文章都會提到，但是實際開發中實現動畫還是用 CSS 或者一些 JS 庫比較多一點。

WebRTC

WebRTC ( Web Real-Time Communications ) 是一項實時通訊技術，可以在網絡應用或者站點，在不借助中間媒介的情況下，建立瀏覽器之間點對點的連接，實現視頻流和（或）音頻流或者其他任意數據的傳輸。

同樣，也是特定領域（如直播）會用到的 API ，使用者很局限。

Web Speech API

用于處于 Web 音頻的 API ，也是特定需求場景才會用到的 API，使用率很低，變化也不大。

Websocket

這個調查里使用率最高的 Web API 了，不用多說，只有 4% 不知道它是啥東西了 ...

Shadow DOM

Shadow DOM 是 Web Components 里面的一個重要 API：瀏覽器將模板、樣式表、屬性、 JavaScript 碼等，封裝成一個獨立的 DOM 元素。外部的設置無法影響到其內部，而內部的設置也不會影響到外部，與瀏覽器處理原生網頁元素（比如 <video> 元素）的方式很像。

Shadow DOM 最大的好處有兩個，一是可以向用戶隱藏細節，直接提供組件，二是可以封裝內部樣式表，不會影響到外部。

// attachShadow() creates a shadow root.
let shadow = div.attachShadow({ mode: 'open' });
let inner = document.createElement('b');
inner.appendChild(document.createTextNode('Conard Li Hiding in the shadows'));

// shadow root supports the normal appendChild method.
shadow.appendChild(inner);
div.querySelector('b'); // empty

這個使用率已經這么高了嗎？大家在開發里有用到過嗎？

Page Visibility API

頁面可見性 API，可以幫助我們檢測當前用戶是不是還在當前頁面，當網頁被最小化或者切換到其他 tab 的時候，會觸發一個 visibilitychange 事件，我們就可以在這個時候去停掉一些耗時的操作來節省資源。

document.addEventListener(visibilityChange, handleVisibilityChange, false);

function handleVisibilityChange() {
  if (document.hidden) {
    // 頁面隱藏了
  } else {
    // 頁面又活躍了
  }
}