你寫過的代碼都逃不過這兩方面：API和抽象
作為前端，你可能開發過 Electron 桌面應用、小程序、瀏覽器上的 web 應用、基于 React Native 等跨端引擎的 app，基于 Node.js 的工具或者服務等各種應用，這些都是 JS 的不同的 runtime，開發也都是基于前端那套技術。
面對這么多的細分領域，作為前端工程師的你是否曾迷茫過：這么多技術我該學什么?他們中有沒有什么本質的東西呢?
其實所有的這些技術，你寫過的所有代碼，都可以分為兩個方面：api 和 抽象。
api
不同平臺提供的 api 不同，支持的能力不同：
瀏覽器提供了 dom api、支持了 css 的渲染，還提供了音視頻、webgl 等相關 api，這些 api 是我們開發前端應用的基礎。
Node.js 提供了操作系統能力的 api，比如進程、線程、網絡、文件等，這些 api 是我們開發工具鏈或后端應用的基礎。
React Native 等跨端引擎支持了 css 的渲染，還提供了設備能力的 api，比如照相機、閃光燈、傳感器、GPS 等 api，這是我們開發移動 app 的基礎。
Electron 集成了 Chromium 和 Node.js，同時還提供了桌面相關的 api。
小程序支持了 css 的渲染之外，還提供了一些宿主 app 能力的 api。
此外，還有很多的 runtime，比如 vscode 插件、sketch 插件等，都有各自能夠使用的 api。
不同的 JS runtime 提供了不同 api 給上層應用，這是應用開發的基礎，也是應用開發的能力邊界。
抽象
基于 runtime 提供的 api 我們就能完成應用的功能開發，但是復雜場景下往往會做一些抽象。
比如瀏覽器上的前端應用主要是把數據通過 dom api 和 css 渲染出來，并做一些交互，那么我們就抽象出了數據驅動的前端框架，抽象出了組件、狀態、數據流等概念。之后就可以把不同的需求抽象為不同的組件、狀態。
經過層層抽象之后，開發復雜前端應用的時候代碼更容易維護、成本更低。
比如基于 Node.js 的 fs、net、http 等 api 我們就能實現 web server，但是對于復雜的企業級應用，我們通過后端框架做 MVC 的抽象，抽象出控制器、服務、模型、視圖等概念。之后的后端代碼就可以把需求抽象為不同的控制器和服務。
經過 MVC 的抽象之后，后端應用的分層更清晰、更容易維護和擴展。
復雜的應用需要在 api 的基礎上做一些抽象。我們往往會用框架做一層抽象，然后自己再做一層抽象，經過層層抽象之后的代碼是更容易維護和擴展的。這也就是所謂的架構。
如何深入 api 和抽象
api
api 是對操作系統能力或不同領域能力的封裝。
比如 Node.js 的進程、線程、文件、網絡的 api 是對操作系統能力的封裝，想深入它們就要去學習操作系統的一些原理。
而 webgl、音視頻等 api 則分別是對圖形學、音視頻等領域的能力的封裝，想要深入它們就要去學習這些領域的一些原理。
個人決定我們知道 api 提供了什么能力就行，沒必要過度深入 api 的實現原理。
抽象
抽象是基于編程語言的編程范式，針對不同目標做的設計。
Javascript 提供了面向對象、函數式等編程范式，那么就可以基于對象來做抽象，使用面向對象的各種設計模式，或者基于函數式那一套。這是抽象的基礎。
抽象是根據不同的目標來做的。
前端領域主要是要分離 dom 操作和數據，把頁面按照功能做劃分，所以根據這些目標就做了 mvvm 和組件化的抽象。
后端領域主要是要做分層、解耦等，于是就做了 IOC、MVC 等抽象。
可以看到，抽象是基于編程語言的范式，根據需求做的設計，好的框架一定是做了滿足某種管理代碼的需求的抽象。
想要提升抽象、架構設計能力的話，可以學習下面向對象的設計模式，或者函數式等編程范式。研究各種框架是如何做的抽象。
總結
不同平臺提供了不同的 api，這是應用開發的基礎和邊界。復雜應用往往要在 api 基礎上做層層抽象，一般會用框架做一層抽象，自己再做一層抽象，目標是為了代碼劃分更清晰，提升可維護性和可擴展性。
其實我們寫過的所有代碼，都可以分為 api 和抽象這兩方面。
深入 API 原理的話要深入操作系統和各領域的知識。提升抽象能力的話，可以學習面向對象的設計模式或者函數式等編程范式。
不管你現在做哪個平臺之上的應用開發，剛開始都是要先學習 api 的，之后就是要理解各種抽象了：框架是怎么抽象的，上層又做了什么抽象。
API 保證下限，抽象可以提高上限。而且抽象能力或者說架構能力是可以遷移的，是程序員最重要的能力之一。
