[[435845]]

作為前端，你可能開(kāi)發(fā)過(guò) Electron 桌面應(yīng)用、小程序、瀏覽器上的 web 應(yīng)用、基于 React Native 等跨端引擎的 app，基于 Node.js 的工具或者服務(wù)等各種應(yīng)用，這些都是 JS 的不同的 runtime，開(kāi)發(fā)也都是基于前端那套技術(shù)。

面對(duì)這么多的細(xì)分領(lǐng)域，作為前端工程師的你是否曾迷茫過(guò)：這么多技術(shù)我該學(xué)什么?他們中有沒(méi)有什么本質(zhì)的東西呢?

其實(shí)所有的這些技術(shù)，你寫(xiě)過(guò)的所有代碼，都可以分為兩個(gè)方面：api 和 抽象。

api

不同平臺(tái)提供的 api 不同，支持的能力不同：

瀏覽器提供了 dom api、支持了 css 的渲染，還提供了音視頻、webgl 等相關(guān) api，這些 api 是我們開(kāi)發(fā)前端應(yīng)用的基礎(chǔ)。

Node.js 提供了操作系統(tǒng)能力的 api，比如進(jìn)程、線程、網(wǎng)絡(luò)、文件等，這些 api 是我們開(kāi)發(fā)工具鏈或后端應(yīng)用的基礎(chǔ)。

React Native 等跨端引擎支持了 css 的渲染，還提供了設(shè)備能力的 api，比如照相機(jī)、閃光燈、傳感器、GPS 等 api，這是我們開(kāi)發(fā)移動(dòng) app 的基礎(chǔ)。

Electron 集成了 Chromium 和 Node.js，同時(shí)還提供了桌面相關(guān)的 api。

小程序支持了 css 的渲染之外，還提供了一些宿主 app 能力的 api。

此外，還有很多的 runtime，比如 vscode 插件、sketch 插件等，都有各自能夠使用的 api。

不同的 JS runtime 提供了不同 api 給上層應(yīng)用，這是應(yīng)用開(kāi)發(fā)的基礎(chǔ)，也是應(yīng)用開(kāi)發(fā)的能力邊界。

抽象

基于 runtime 提供的 api 我們就能完成應(yīng)用的功能開(kāi)發(fā)，但是復(fù)雜場(chǎng)景下往往會(huì)做一些抽象。

比如瀏覽器上的前端應(yīng)用主要是把數(shù)據(jù)通過(guò) dom api 和 css 渲染出來(lái)，并做一些交互，那么我們就抽象出了數(shù)據(jù)驅(qū)動(dòng)的前端框架，抽象出了組件、狀態(tài)、數(shù)據(jù)流等概念。之后就可以把不同的需求抽象為不同的組件、狀態(tài)。

經(jīng)過(guò)層層抽象之后，開(kāi)發(fā)復(fù)雜前端應(yīng)用的時(shí)候代碼更容易維護(hù)、成本更低。

比如基于 Node.js 的 fs、net、http 等 api 我們就能實(shí)現(xiàn) web server，但是對(duì)于復(fù)雜的企業(yè)級(jí)應(yīng)用，我們通過(guò)后端框架做 MVC 的抽象，抽象出控制器、服務(wù)、模型、視圖等概念。之后的后端代碼就可以把需求抽象為不同的控制器和服務(wù)。

經(jīng)過(guò) MVC 的抽象之后，后端應(yīng)用的分層更清晰、更容易維護(hù)和擴(kuò)展。

復(fù)雜的應(yīng)用需要在 api 的基礎(chǔ)上做一些抽象。我們往往會(huì)用框架做一層抽象，然后自己再做一層抽象，經(jīng)過(guò)層層抽象之后的代碼是更容易維護(hù)和擴(kuò)展的。這也就是所謂的架構(gòu)。

如何深入 api 和抽象

api

api 是對(duì)操作系統(tǒng)能力或不同領(lǐng)域能力的封裝。

比如 Node.js 的進(jìn)程、線程、文件、網(wǎng)絡(luò)的 api 是對(duì)操作系統(tǒng)能力的封裝，想深入它們就要去學(xué)習(xí)操作系統(tǒng)的一些原理。

而 webgl、音視頻等 api 則分別是對(duì)圖形學(xué)、音視頻等領(lǐng)域的能力的封裝，想要深入它們就要去學(xué)習(xí)這些領(lǐng)域的一些原理。

個(gè)人決定我們知道 api 提供了什么能力就行，沒(méi)必要過(guò)度深入 api 的實(shí)現(xiàn)原理。

抽象

抽象是基于編程語(yǔ)言的編程范式，針對(duì)不同目標(biāo)做的設(shè)計(jì)。

Javascript 提供了面向?qū)ο?、函?shù)式等編程范式，那么就可以基于對(duì)象來(lái)做抽象，使用面向?qū)ο蟮母鞣N設(shè)計(jì)模式，或者基于函數(shù)式那一套。這是抽象的基礎(chǔ)。

抽象是根據(jù)不同的目標(biāo)來(lái)做的。

前端領(lǐng)域主要是要分離 dom 操作和數(shù)據(jù)，把頁(yè)面按照功能做劃分，所以根據(jù)這些目標(biāo)就做了 mvvm 和組件化的抽象。

后端領(lǐng)域主要是要做分層、解耦等，于是就做了 IOC、MVC 等抽象。

可以看到，抽象是基于編程語(yǔ)言的范式，根據(jù)需求做的設(shè)計(jì)，好的框架一定是做了滿足某種管理代碼的需求的抽象。

想要提升抽象、架構(gòu)設(shè)計(jì)能力的話，可以學(xué)習(xí)下面向?qū)ο蟮脑O(shè)計(jì)模式，或者函數(shù)式等編程范式。研究各種框架是如何做的抽象。

總結(jié)

不同平臺(tái)提供了不同的 api，這是應(yīng)用開(kāi)發(fā)的基礎(chǔ)和邊界。復(fù)雜應(yīng)用往往要在 api 基礎(chǔ)上做層層抽象，一般會(huì)用框架做一層抽象，自己再做一層抽象，目標(biāo)是為了代碼劃分更清晰，提升可維護(hù)性和可擴(kuò)展性。

其實(shí)我們寫(xiě)過(guò)的所有代碼，都可以分為 api 和抽象這兩方面。

深入 API 原理的話要深入操作系統(tǒng)和各領(lǐng)域的知識(shí)。提升抽象能力的話，可以學(xué)習(xí)面向?qū)ο蟮脑O(shè)計(jì)模式或者函數(shù)式等編程范式。

不管你現(xiàn)在做哪個(gè)平臺(tái)之上的應(yīng)用開(kāi)發(fā)，剛開(kāi)始都是要先學(xué)習(xí) api 的，之后就是要理解各種抽象了：框架是怎么抽象的，上層又做了什么抽象。 

API 保證下限，抽象可以提高上限。而且抽象能力或者說(shuō)架構(gòu)能力是可以遷移的，是程序員最重要的能力之一。