2022 年，学完 JS 高级后前端怎样规划学习路线？

Posted 2022-03-30 SHERlocked93

作者：Hugo

原文：https://www.zhihu.com/question/522573129/answer/2404496578

2022 年，如果你学完了 JS 高级，意味着，对于 JS，你有了初步的概念。

那下一步呢？

JS 之所以能成为全世界开发者人数最多的语言，原因也简单，最庞大的泛用性。软件开发，偏向应用测，主要是前端开发和服务端开发。

前端开发

对于 JS 的世界，前端开发在 2022 年，主要指：vue、react、svelte(angular 去年获得的星星少于 svelte)。如果你更喜欢以 js 的思路解决问题，那就比较推荐你用 vue 和 react。vue 3 刚刚成为 vue 的主要版本，其能力在很多方面都有非常大的进步。react 马上要发 18 版本，也是及其推荐的一个库。

无论你准备学 vue 还是 react，你都不能错过 vite。这是目前最流行的前端开发工具，支持几乎所有的流行库的开发。

所以，无论你是哪个方向，下面这行命令，都是你的起点。

npm create vite@latest

vue的官方教程：

Examples | Vue.js vuejs.org/examples/#hello-world^[1]

react 的官方教程：

React – A javascript library for building user interfaces reactjs.org/

这俩常见的那些功能，需要几个项目，就能弄的差不多。比较难的是响应式状态。

响应式状态：

vue 是：

Reactivity Fundamentals | Vue.js vuejs.org/guide/essentials/reactivity-fundamentals.html^[2]

主要是 ref、reactive、computed、watch、watcheffect

react 是：

https://reactjs.org/docs/hooks-intro.html reactjs.org/docs/hooks-intro.html^[3]

这块有了概念，你就可以写一写自己的 hook，先从社区的项目开始：

vue 是：

VueUse vueuse.org/

react 是：

https://github.com/streamich/react-use github.com/streamich/react-use^[4]

然后，你总会用到的两大组件路由和状态管理

路由

vue 是：

Vue Router router.vuejs.org/

react 是：

https://github.com/remix-run/react-router github.com/remix-run/react-router^[5]

状态管理：

vue 是（vuex 已经废弃，直接学 pinia 就好了）：

Pinia  pinia.vuejs.org/

react 是：

GitHub - pmndrs/zustand: Bear necessities for state management in React github.com/pmndrs/zustand

及其推荐 zustand，逻辑和 pinia 差不多，这俩一起学其实都没啥问题。

学完这些，基本上，前端的框架就入门了。因为你学了前端三剑客，我就不推荐你学 dom 了。实际上，很多新手直接上框架，实际还是应该学学原生的接口和关系的，这对于打包工具的理解有很多帮助，而且现在的原生接口，比 vue 和 react 简单很多。

CSS 框架

2022 年了，冰天雪地推荐 tailwind。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. tailwindcss.com/

同时推荐在它上面长出来的 daisyui

daisyUI — Tailwind CSS Components daisyui.com/

顺便说，我为大家翻译了 daisyui 的文档（其实也没多少字），这为你使用它能简单不少。

理论上，到这个时候，你会 react 和 vue 的其中一个，对 vite 有了初步的了解，对于 router 和 状态管理也有了基本的认识。你还有了现代的 css 框架。接下来，你就可以去选自己感兴趣的话题了：

• web worker，来点多进程编程？https://github.com/GoogleChromeLabs/comlink^[6]

• SSR？vite-plugin-ssr^[7] 强烈推荐这个，比 next 和 nuxt 不知道轻了多少。当然学 SSR 你必须有一定的 nodejs 的基础

• 混合 vue 和 react，做个简单的微前端？https://github.com/MinJieLiu/micro-app^[8] （顺便说，我最近贡献了 vue 版本的实现给这个项目，当然，思路还是MinJieLiu - Overview^[9] 同学的。）这个项目的实现已经很成熟了，但是仍然可以有很多工作，感兴趣的同学欢迎来看看。这个应该是全网最简单的微前端视图层结合的解决方案了。

后端开发

api server

这个范畴可供选择的很多，我个人用的比较多的是：

GitHub - fastify/fastify: Fast and low overhead web framework, for Node.js github.com/fastify/fastify

因为我本身比较喜欢轻的框架，重的就不推荐了。

orm

这个不用犹豫，搞这个：

https://www.prisma.io/ www.prisma.io/^[10]

TypeScript

实际上，上述所有内容，你只会 JavaScript，都是可以使用的。但是，我还是建议，在你对 JavaScript 有了初步的概念以后，最好开始你的 TypeScript 之旅。TypeScript 给 JavaScript 的某一些方面，是质的改变。

The starting point for learning TypeScript www.typescriptlang.org/docs/^[11]

Monorepo

这几年，另一个质的改变的技术，就是 monorepo。

https://pnpm.io/zh/ pnpm.io/zh/^[12]

但是不建议一开始就用 monorepo，我认为，最好能用几十个 single repo 的项目，慢慢来先感受 npm 的问题是啥，single repo 和 multi repo 的问题是啥，在上 monorepo，你就能明白，为啥 pnpm 要那么设计了。

打包工具

我感觉 JS 世界，一半的时间都在搞打包工具。。。可能是我的问题。

但是，当你使用了 monorepo，还使用了 typescript，打包变成了一个问题。最终项目的打包，vite 帮你做了，但是中间呢？

中间建议用：

tsup tsup.egoist.sh/#what-can-it-bundle^[13]

其实 tsup 和 vite 思路差不多，都是 rollup 和 esbuild 的封装。

所以这一块，最后归根结底，是研究

esbuild - An extremely fast JavaScript bundler^[14]

rollup.js^[15]

rollup 和 esbuild，归根结底，是 esm 的实现，所以，你要去研究

Modules: ECMAScript modules^[16]

runtime

上述的所有事情，都发生在 nodejs、浏览器、deno 里。所以，你没事就去研究研究这些东西

About this documentation nodejs.org/dist/latest-v17.x/docs/api/documentation.html^[17]

MDN Web Docs developer.mozilla.org/zh-CN/

想必这时候，你要管理一大堆 runtime。所以，你需要：

Volta docs.volta.sh/guide/getting-started^[18]

参考资料

[1]

Examples | Vue.js vuejs.org/examples/#hello-world: http://link.zhihu.com/?target=https%3A//vuejs.org/examples/%23hello-world

[2]

Reactivity Fundamentals | Vue.js vuejs.org/guide/essentials/reactivity-fundamentals.html: http://link.zhihu.com/?target=https%3A//vuejs.org/guide/essentials/reactivity-fundamentals.html

[3]

https://reactjs.org/docs/hooks-intro.html reactjs.org/docs/hooks-intro.html: http://link.zhihu.com/?target=https%3A//reactjs.org/docs/hooks-intro.html

[4]

https://github.com/streamich/react-use github.com/streamich/react-use: http://link.zhihu.com/?target=https%3A//github.com/streamich/react-use

[5]

https://github.com/remix-run/react-router github.com/remix-run/react-router: http://link.zhihu.com/?target=https%3A//github.com/remix-run/react-router

[6]

https://github.com/GoogleChromeLabs/comlink: http://link.zhihu.com/?target=https%3A//github.com/GoogleChromeLabs/comlink

[7]

vite-plugin-ssr: http://link.zhihu.com/?target=https%3A//vite-plugin-ssr.com/

[8]

https://github.com/MinJieLiu/micro-app: http://link.zhihu.com/?target=https%3A//github.com/MinJieLiu/micro-app

[9]

MinJieLiu - Overview: http://link.zhihu.com/?target=https%3A//github.com/MinJieLiu

[10]

https://www.prisma.io/ www.prisma.io/: http://link.zhihu.com/?target=https%3A//www.prisma.io/

[11]

The starting point for learning TypeScript www.typescriptlang.org/docs/: http://link.zhihu.com/?target=https%3A//www.typescriptlang.org/docs/

[12]

https://pnpm.io/zh/ pnpm.io/zh/: http://link.zhihu.com/?target=https%3A//pnpm.io/zh/

[13]

tsup tsup.egoist.sh/#what-can-it-bundle: http://link.zhihu.com/?target=https%3A//tsup.egoist.sh/%23what-can-it-bundle

[14]

esbuild - An extremely fast JavaScript bundler: http://link.zhihu.com/?target=https%3A//esbuild.github.io/

[15]

rollup.js: http://link.zhihu.com/?target=https%3A//rollupjs.org/guide/en/

[16]

Modules: ECMAScript modules: http://link.zhihu.com/?target=https%3A//nodejs.org/dist/latest-v17.x/docs/api/esm.html

[17]

About this documentation nodejs.org/dist/latest-v17.x/docs/api/documentation.html: http://link.zhihu.com/?target=https%3A//nodejs.org/dist/latest-v17.x/docs/api/documentation.html

[18]

Volta docs.volta.sh/guide/getting-started: http://link.zhihu.com/?target=https%3A//docs.volta.sh/guide/getting-started