JavaScript 生態(tài)圈和技術(shù)趨勢(shì)，這一年發(fā)生了這些變化 ...

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

開(kāi)發(fā)

JS 生態(tài)圈最權(quán)威的調(diào)查報(bào)告 state-of-js 終于是出來(lái)了。

今天，我來(lái)帶大家看看 2021 年 state-of-js 的調(diào)查結(jié)果：

速覽

下面是我挑出來(lái)的幾個(gè)比較重點(diǎn)的，我們先來(lái)速覽一下：

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

JS特性 - 語(yǔ)言

Proxy

Proxy 在各種框架和庫(kù)中使用的越來(lái)越多了（特別是 Vue.js 3.0 開(kāi)始使用后），所以了解到它的同學(xué)也越來(lái)越多，但是實(shí)際使用率沒(méi)有太大變化。

Promise.allSettled()

Promise.allSettled() 我還沒(méi)用過(guò)，用法類似于 Promise.all ，區(qū)別是：它所有給定的 promise 不管是 fulfilled 還是 rejected 狀態(tài)，只要全部返回后它就會(huì)返回。在你不關(guān)心所有的異步任務(wù)是不是都必須成功的時(shí)候可能會(huì)用到它。

Dynamic Import

動(dòng)態(tài)導(dǎo)入：只有 15% 的人還不知道它，接近 50% 的小伙伴都用過(guò)了，一般會(huì)在懶加載的時(shí)候用到。

Nullish Coalescing

空值合并運(yùn)算符：這玩意這么多人都在用嗎？用過(guò)的小伙伴可以在評(píng)論區(qū)說(shuō)一下，我平時(shí)用的比較多的還是 || 或者 && 。

空值合并操作符（ ?? ），會(huì)在左側(cè)的操作數(shù)為 null 或者 undefined 時(shí)，返回其右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)。

和 || 的區(qū)別是， || 會(huì)在左側(cè)是 0 的時(shí)候也返回右側(cè)，而 ?? 會(huì)返回 0 。

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

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

Optional Chaining

可選鏈：使用率已經(jīng)高達(dá) 85% ，非常實(shí)用的特性，不多說(shuō)了。

Private Fields

私有屬性：只有 20% 的人用過(guò)，我們?cè)陬惱锩娑x的屬性或方法默認(rèn)情況下都是公有的，可以通過(guò)在前面加個(gè) # 來(lái)變成私有的（僅在類內(nèi)部可以訪問(wèn)）。

class ClassWithPrivateField {
  #privateField;
}

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

BigInt

BigInt 可以解決 Number 的精度丟失問(wèn)題，一般大于 2^53 的數(shù)我們建議用 BigInt 來(lái)表示，不過(guò)現(xiàn)在使用率還很低，大家通常還是用一些庫(kù)去處理數(shù)字。

String.prototype.replaceAll()

replaceAll ：可以讓我們按照一個(gè)正則進(jìn)行更靈活的字符串替換，第一年參加調(diào)查， Chrome85 才開(kāi)始支持的函數(shù)，已經(jīng)有這么多人用過(guò)了，真的是一個(gè)非常實(shí)用的函數(shù)：

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

JS特性 - 瀏覽器 API

Service Workers

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

Intl

Intl 瀏覽器給我們提供的一個(gè)原生的用來(lái)做國(guó)際化的 API ，國(guó)際化的需求一般比較復(fù)雜，反正我們國(guó)際化都是用庫(kù)，省心很多，這個(gè)還沒(méi)用過(guò)。

Web Audio API

控制 Web 音頻的 API ，只有特定領(lǐng)域的開(kāi)發(fā)者才會(huì)用到，變化也不大。

WebGL

Web 圖形化的需求越來(lái)越復(fù)雜多樣， WebGL 的普及也不可避免。現(xiàn)在大多數(shù)人都有過(guò)了解，但是使用者還局限在特定領(lǐng)域，今年的增長(zhǎng)率已經(jīng)有了小的變化，相信未來(lái)會(huì)迎來(lái)一個(gè)爆發(fā)增長(zhǎng)～

Web Animations API

dom 上的 animate 函數(shù)，就屬于 Web Animations API 中的一個(gè)，我們?nèi)粘Ｊ褂?CSS 實(shí)現(xiàn)的一些動(dòng)畫，都可以借助它轉(zhuǎn)換成 JS 實(shí)現(xiàn)：

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

這個(gè)應(yīng)該大家都有了解過(guò)吧，一般 XXX 網(wǎng)頁(yè)動(dòng)畫實(shí)戰(zhàn) 這樣的課程和文章都會(huì)提到，但是實(shí)際開(kāi)發(fā)中實(shí)現(xiàn)動(dòng)畫還是用 CSS 或者一些 JS 庫(kù)比較多一點(diǎn)。

WebRTC

WebRTC ( Web Real-Time Communications ) 是一項(xiàng)實(shí)時(shí)通訊技術(shù)，可以在網(wǎng)絡(luò)應(yīng)用或者站點(diǎn)，在不借助中間媒介的情況下，建立瀏覽器之間點(diǎn)對(duì)點(diǎn)的連接，實(shí)現(xiàn)視頻流和（或）音頻流或者其他任意數(shù)據(jù)的傳輸。

同樣，也是特定領(lǐng)域（如直播）會(huì)用到的 API ，使用者很局限。

Web Speech API

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

Websocket

這個(gè)調(diào)查里使用率最高的 Web API 了，不用多說(shuō)，只有 4% 不知道它是啥東西了 ...

Shadow DOM

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

Shadow DOM 最大的好處有兩個(gè)，一是可以向用戶隱藏細(xì)節(jié)，直接提供組件，二是可以封裝內(nèi)部樣式表，不會(huì)影響到外部。

// 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

這個(gè)使用率已經(jīng)這么高了嗎？大家在開(kāi)發(fā)里有用到過(guò)嗎？

Page Visibility API

頁(yè)面可見(jiàn)性 API，可以幫助我們檢測(cè)當(dāng)前用戶是不是還在當(dāng)前頁(yè)面，當(dāng)網(wǎng)頁(yè)被最小化或者切換到其他 tab 的時(shí)候，會(huì)觸發(fā)一個(gè) visibilitychange 事件，我們就可以在這個(gè)時(shí)候去停掉一些耗時(shí)的操作來(lái)節(jié)省資源。

document.addEventListener(visibilityChange, handleVisibilityChange, false);

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

一個(gè)挺好用的 API ，兼容性也不錯(cuò)，大家可以用起來(lái)～

JS特性 - 其他技術(shù)

PWA

PWA 使用率今年漲幅挺大的，也是屬于一個(gè)比較成熟的技術(shù)了。

WebAssembly

WebAssembly 有 88% 的人都有了解過(guò)，但是使用率只有 15% ，相比去年只增加了 5% ，它給 Web 開(kāi)發(fā)帶來(lái)了更多的可能性，相信未來(lái)會(huì)得到爆發(fā)式增長(zhǎng)。

JS 庫(kù)

滿意度

這張圖挺有意思的，按照 S、A、B、C 四個(gè)等級(jí)的滿意度，對(duì)比了前端框架、服務(wù)端框架、測(cè)試庫(kù)、構(gòu)建工具、移動(dòng)和桌面端技術(shù)、Monorepo 工具，下面我們來(lái)逐個(gè)部分看一下。

時(shí)間變化

紫色代表人氣下降，藍(lán)色代表人氣上升，向上代表用的人越來(lái)越多，向右代表有更多的人想學(xué)習(xí)它。

怎么看起來(lái)大家今年都不太想學(xué)東西了呢？哈哈，另外對(duì)一些新型的庫(kù)比如 Sevelte 學(xué)習(xí)欲望還是有增長(zhǎng)的。

前端框架

使用率

使用率今年整體都沒(méi)有太大變化， React 依然以 80% 的使用率高居榜首，因?yàn)檎{(diào)查的老外比較多，所以 Angular 比 Vue.js 使用率還要高，不過(guò)前者已經(jīng)是下降趨勢(shì)了。另外 Svelte 的使用率在今年有了 5% 的增長(zhǎng)。