[[435845]]

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

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

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

api

不同平臺提供的 api 不同，支持的能力不同：

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

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

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

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

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

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

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

抽象

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

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

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

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

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

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

如何深入 api 和抽象

api

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

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

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

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

抽象

抽象是基于編程語言的編程范式，針對不同目標做的設(shè)計。

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

抽象是根據(jù)不同的目標來做的。

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

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

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

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

總結(jié)

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

其實我們寫過的所有代碼，都可以分為 api 和抽象這兩方面。

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

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

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