[[435845]]

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

面對這么多的細分領域，作為前端工程師的你是否曾迷茫過：這么多技術我該學什么?他們中有沒有什么本質的東西呢?

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

api

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

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

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

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

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

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

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

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

抽象

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

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

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

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

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

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

如何深入 api 和抽象

api

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

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

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

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

抽象

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

Javascript 提供了面向對象、函數(shù)式等編程范式，那么就可以基于對象來做抽象，使用面向對象的各種設計模式，或者基于函數(shù)式那一套。這是抽象的基礎。

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

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

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

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

想要提升抽象、架構設計能力的話，可以學習下面向對象的設計模式，或者函數(shù)式等編程范式。研究各種框架是如何做的抽象。

總結

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

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

深入 API 原理的話要深入操作系統(tǒng)和各領域的知識。提升抽象能力的話，可以學習面向對象的設計模式或者函數(shù)式等編程范式。

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

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