而后端开发更加关注数据服务，前端则负责展示和交互。当然相应的学习成本也越来越大，Node.JS的出现也使得前端前后端一起开发成为可能，好多大公司在 2015 年前后就进行了尝试，用 Node.JS 作为中间数据转接层，让后端更加专注于数据服务和治理。

前端模块化发展历程

自 2009 年 5 月 Node.js 发布以来，前端能干的事情越来越多。短短 10 来年的时间，前端便从刀耕火种的年代走向了模块化、工程化的时代。各种前端框架百家争鸣，前端赢来了真正属于自己的时代。

原始时代

时间回到 2009年，记得那时候还没有流行前后端分离，很多项目还是混在一起，而那时候的前端开发人员大多数也都是“切图仔”。前端完成静态页面，由服务端同事完成数据的嵌入，也就是所谓的套页面操作，每当有类似的功能，都会回到之前的页面去复制粘贴，由于处于不同的页面，类名需要更换，但是换汤不换药。

久而久之，重复代码越来越多，但凡改动一个小的地方，都需要改动很多代码，显得极不方便，也不利于大规模的进行工程化开发。虽然市面上也慢慢出现了 Angular、 Avalon 等优秀的前端框架，但是考虑到 SEO 和维护人员并不好招，很多公司还是选择求稳，用套页面的形式制作网页，这对前端的工程化、模块化是一个不小的阻碍。

构建工具的出现

不过，随着 Node 被大力推崇，市面上涌现出大量的构建工具，如 Npm Scripts、Grunt、Gulp、FIS、Webpack、Rollup、Parcel等等。构建工具解放了我们的双手，帮我们处理一些重复的机械劳动。

举个简单的例子：我们用 ES6 写了一段代码，需要在浏览器执行。但是由于浏览器厂商对浏览器的更新非常保守，使得很多 ES6 的代码并不能直接在浏览器上运行。这个时候我们总不能手动将 ES6 代码改成 ES5 的代码。于是乎就有了下面的转换。

 

个时期，浏览器的开发者，以后台开发人员居多，大部分前后端开发是一体的，大致开发流程是：后端收到浏览器的请求 ---> 发送静态页面 ---> 发送到浏览器。即使是有专门的前端开发，也只是用 HTML 写写页面模板、CSS 给页面排个好看点的版式。在这一时期，前端的作用有限，往往只是切图仔的角色。

铁器时代

1995年，网景公司的一位叫布兰登·艾奇的大佬，希望开发出一个类似 Java 的脚本语言，用来提升浏览器的展示效果，增强动态交互能力。结果大佬喝着啤酒抽着烟，十来天就把这个脚本语言写出来了，功能很强大，就是语法一点都不像 Java。这样就渐渐形成了前端的雏形：HTML 为骨架，CSS 为外貌，JavaScript 为交互。

同时期微软等一些公司也针对自家浏览器开发出了自己的脚本语言。浏览器五花八门，虽然有了比较统一的 ECMA 标准，但是浏览器先于标准在市场上流行开来，成为了事实标准。导致，现在前端工程师还要在做一些政府古老项目的时候，还要去处理浏览器兼容(万恶的 IE 系列)。

不管怎么说，前端开发也算是能写点逻辑代码了，不再是只能画画页面的低端开发了。随着1998年 AJax 的出现，前端开发从 Web1.0迈向了Web2.0，前端从纯内容的静态展示，发展到了动态网页，富交互，前端数据处理的新时期。这一时期，比较知名的两个富交互动态的浏览器产品是。

• Gmail(2004年)
• Google 地图(2005年)

由于动态交互、数据交互的需求增多，还衍生出了jQuery(2006) 这样优秀的跨浏览器的 js 工具库，主要用于 DOM 操作，数据交互。有些古老的项目，甚至近几年开发的大型项目现在还在使用 jQuery，以至于 jQuery 库现在还在更新，虽然体量上已经远远不及 React、Vue 这些优秀的前端库。

信息时代

自 2003 以后，前端发展渡过了一段比较平稳的时期，各大浏览器厂商除了按部就班的更新自己的浏览器产品之外，没有再作妖搞点其他事情。但是我们程序员们耐不住寂寞啊，工业化推动了信息化的快速到来，浏览器呈现的数据量越来越大，网页动态交互的需求越来越多，JavaScript 通过操作 DOM 的弊端和瓶颈越来越明显(频繁的交互操作，导致页面会很卡顿)，仅仅从代码层面去提升页面性能，变得越来越难。于是优秀的大佬们又干了点惊天动地的小事儿：

• 2008 年，谷歌 V8 引擎发布，终结微软 IE 时代。
• 2009 年 AngularJS 诞生、Node诞生。
• 2011 年 ReactJS 诞生。
• 2014 年 VueJS 诞生。

其中，V8 和 Node.JS 的出现，使前端开发人员可以用熟悉的语法糖编写后台系统，为前端提供了使用同一语言的实现全栈开发的机会(JavaScript不再是一个被嘲笑只能写写页面交互的脚本语言)。React、Angular、Vue 等 MVVM 前端框架的出现，使前端实现了项目真正的应用化(SPA单页面应用)，不再依赖后台开发人员处理页面路由 Controller，实现页面跳转的自我管理。同时也推动了前后端的彻底分离(前端项目独立部署，不再依赖类似的 template 文件目录)。

至于为啥 MVVM 框架能提升前端的渲染性能，这里简单的说一下原理，因为大量的 DOM 操作是性能瓶颈的罪魁祸首，那通过一定的分析比较算法，实现同等效果下的最小 DOM 开销是可行的。React、Vue 这类框架大都是通过这类思想实现的，具体实现可以去看一下相关资料。前后端分离也导致前端的分工发生了一些变化。


 

（编辑：宣城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!