你写过的所有代码都逃不过这两方面:API和抽象

作为前端，你可能开发过Electron桌面应用、小程序、浏览器上的web应用、基于ReactNative等跨端引擎的app，基于Node.js的工具或者服务等各种应用，这些都是JS的不同的runtime，开发也都是基于前端那套技术。

面对这么多的细分领域，作为前端工程师的你是否曾迷茫过：这么多技术我该学什么？他们中有没有什么本质的东西呢？

其实所有的这些技术，你写过的所有代码，都可以分为两个方面：api和抽象。

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

浏览器提供了domapi、支持了css的渲染，还提供了音视频、webgl等相关api，这些api是我们开发前端应用的基础。

Node.js提供了操作系统能力的api，比如进程、线程、网络、文件等，这些api是我们开发工具链或后端应用的基础。

ReactNative等跨端引擎支持了css的渲染，还提供了设备能力的api，比如照相机、闪光灯、传感器、GPS等api，这是我们开发移动app的基础。

Electron集成了Chromium和Node.js，同时还提供了桌面相关的api。

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

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

不同的JSruntime提供了不同api给上层应用，这是应用开发的基础，也是应用开发的能力边界。

基于runtime提供的api我们就能完成应用的功能开发，但是复杂场景下往往会做一些抽象。

比如浏览器上的前端应用主要是把数据通过domapi和css渲染出来，并做一些交互，那么我们就抽象出了数据驱动的前端框架，抽象出了组件、状态、数据流等概念。之后就可以把不同的需求抽象为不同的组件、状态。

经过层层抽象之后，开发复杂前端应用的时候代码更容易维护、成本更低。

比如基于Node.js的fs、net、http等api我们就能实现webserver，但是对于复杂的企业级应用，我们通过后端框架做MVC的抽象，抽象出控制器、服务、模型、视图等概念。之后的后端代码就可以把需求抽象为不同的控制器和服务。

经过MVC的抽象之后，后端应用的分层更清晰、更容易维护和扩展。

复杂的应用需要在api的基础上做一些抽象。我们往往会用框架做一层抽象，然后自己再做一层抽象，经过层层抽象之后的代码是更容易维护和扩展的。这也就是所谓的架构。

api是对操作系统能力或不同领域能力的封装。

比如Node.js的进程、线程、文件、网络的api是对操作系统能力的封装，想深入它们就要去学习操作系统的一些原理。

而webgl、音视频等api则分别是对图形学、音视频等领域的能力的封装，想要深入它们就要去学习这些领域的一些原理。

个人觉得我们知道api提供了什么能力就行，没必要过度深入api的实现原理。

抽象是基于编程语言的编程范式，针对不同目标做的设计。

Javascript提供了面向对象、函数式等编程范式，那么就可以基于对象来做抽象，使用面向对象的各种设计模式，或者基于函数式那一套。这是抽象的基础。

抽象是根据不同的目标来做的。

前端领域主要是要分离dom操作和数据，把页面按照功能做划分，所以根据这些目标就做了mvvm和组件化的抽象。

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

可以看到，抽象是基于编程语言的范式，根据需求做的设计，好的框架一定是做了满足某种管理代码的需求的抽象。

想要提升抽象、架构设计能力的话，可以学习下面向对象的设计模式，或者函数式等编程范式。研究各种框架是如何做的抽象。

不同平台提供了不同的api，这是应用开发的基础和边界。复杂应用往往要在api基础上做层层抽象，一般会用框架做一层抽象，自己再做一层抽象，目标是为了代码划分更清晰，提升可维护性和可扩展性。

其实我们写过的所有代码，都可以分为api和抽象这两方面。

深入API原理的话要深入操作系统和各领域的知识。提升抽象能力的话，可以学习面向对象的设计模式或者函数式等编程范式。

不管你现在做哪个平台之上的应用开发，刚开始都是要先学习api的，之后就是要理解各种抽象了：框架是怎么抽象的，上层又做了什么抽象。

API保证下限，抽象可以提高上限。而且抽象能力或者说架构能力是可以迁移的，是程序员最重要的能力之一。