搭建清晰的前端技术体系

木棵五

已于 2022-07-05 10:45:31 修改

阅读量1.2k

点赞数 3

分类专栏：前端架构文章标签： javascript node.js typescript es6 vue.js

于 2021-01-24 12:53:09 首次发布

本文链接：https://blog.csdn.net/csl1502011/article/details/113049691

版权

本文旨在帮助初学者和有经验的前端开发者理解前端技术架构，包括vue, react等框架的出现原因，Node.js在前端开发中的角色，以及express, koa的使用。文章还探讨了javascript与typescript的关系，以及webpack和babel在解决模块化和兼容性问题中的作用。" 124010847,1358276,Django访问数据交互解析,"['Django', '前端开发', 'Web框架']

摘要由CSDN通过智能技术生成

目的

如果你有以下类似的问题，那么本篇文章可能会对你有所帮助：

vue, react 框架？express, koa框架？这些都是前端开发常用的框架，都是啥作用？有啥区别？
javascript，typescript , ES6，CommonJS 还有node.js 这些都是啥关系？
node.js到底是干嘛的？node.js给前端带来了什么？
为什么使用 webpack 打包工具？经常用到的babel是干嘛的？
我知道module.export = {} 是CommonJS规范，export default 是ES6规范，怎么有的项目里两种都有呐？两种规范不会冲突吗？
… … 等等诸如此类的问题

本篇文章更多地是面向初学者或者已经有一定前端开发经验但是并未捋清前端众多技术之间的关系架构的开发者，本文将循序渐进将前端技术体系捋一捋，从整体上看看各个技术栈在前端技术架构中所处的位置以及发挥的作用，不会过多的深入讲解某一项技术栈。

若有阐述不妥当或错误的地方，敬请订正。若有疑问，欢迎交流。（一篇长文，但是如果你心中有以上疑问，希望耐心看下去，肯定会有一定收获）

前端技术架构解析

架构概览图

在这里插入图片描述

接下来我们将循序渐进，一点点的引出架构图中的各个技术，概念。

传统前端开发的问题

前端三大基石html，css，和javascript；html和css分别处理页面视觉内容和样式，而javascript则是处理交互事件，获取信息，操作DOM等。我们也经常使用到jQuery.js,bootsrtap.js等等js库，这些别人造好的轮子，我们直接拿来使用，大大的方便了开发，提升了效率；但是这种传统开发也有许多各方面的问题：

页面视图，逻辑，数据揉杂在一起混乱，维护困难
复用性低：页面中某一块反复用到的代码或者想要实现的效果只能通过粘贴复制来解决
页面性能：传统库都是直接操作DOM，这相当消耗CPU，影响页面响应性能，降低用户使用体验
开发效率：传统后端开发很多采用MVC架构，前后端耦合在一起，这样前端开发也必须搭建后端的开发环境，无疑大大增加了前端开发的难度；许多场景下前后端开发的分工也容易混在一起，交流成本更高等等，大大降低开发效率，这也是传统开发为人诟病已久的地方
… …

为什么出现vue,react等框架

为了解决上述视图，逻辑，数据揉杂、复用性低、页面性能差等等问题，vue,react等前端框架应运而生。为什么说他们解决了这些问题呐，因为它们：

1.落实组件化思想，提高代码复用率，降低维护成本
2.将视图，数据，逻辑分离；数据驱动，响应式更新视图，让开发者只需要关注数据
3.引入虚拟DOM,在绝大多数场景下大大降低了页面渲染耗时，提升了性能

vue,react 等就是javascript库，我们遵循它的规范开发，它就替我们做了很多事。本质上与jQuery,bootstrap等没有区别。

为什么出现Node.js

为了解决上述开发效率的问题，我们迫切需要将前后端分离，理性的前后端分离是：后端提供RESTful接口，前端实现web服务（来完成路由控制、缓存、日志、代理等等）、视图和交互（为什么说这样是理想的？这样以来，是不是前端已经不在乎后端是谁，甚至是对接多端，只要后端提供正确接口，即使后端换了一套代码，前端也无感知，实现真正的前后端分离。而反之如果不这样，比如：如果路由依然由后端控制，那么这即意味着页面渲染视图切换依然受后端控制，并没有实现前后端分离）。

为了达到这种理想效果，显而易见，我们需要一个web服务来做路由控制等一系列的事情；但是前端三大基石唯一看起来能做这件事的javascript只能运行在客户端浏览器上，难道前端开发人员还得学个其它的后端语言来做这件事，虽然也不是不可以，python,java这些也都可以，但是如果可以直接用javascript，那岂不是更好，无须增加其他技术栈，开发中遇到的问题也更少，效率更高。

为此，node.js横空出世，使得服务端运行javascript成为现实。

为什么node.js可以让服务端运行javscript?这就要简单说说node.js的原理，node.js是基于google的v8引擎开发的；那么v8引擎是什么？v8引擎就是Google的Chrome浏览器里的javascript引擎，负责页面中javascript代码的解释执行。说白了，node.js把v8引擎这个javascript执行环境从浏览器移植到服务器中，使得服务器可以运行javascript。

注意：虽然vue.js,react.js 和 node.js 都是 .js结尾，但是他们由本质的区别。node.js 是服务器程序，在服务器上提供javascript的运行环境，就像jvm为java提供运行环境。而vue.js,react.js 是javascript库，相当与java开发的一个第三方jar包。