前端开发进化史，你经历过哪几个时期？

一 目录
二 前言
三 发展历史

3.1 原始社会

3.2 石器时代

3.3 铁器时代

3.4 工业时代

四 技术比较

4.1 JSP 与 jQuery

4.2 jQuery 与 Vue

4.3 Vue 与 小程序

五 思考总结

二 前言

于2018年12月做个小小的前端技术分享，分享包括但不限于：Web 前端发展史、JQuery 与 Vue 的比较、Vue/React/Angular 的比较、前端开发经验的分享与总结等……

三 发展历史

以铜为镜，可以正衣冠；

以古为镜，可以知兴替；

以人为镜，可以明得失。

了解一门技术的历史，可以帮助我们更清晰地了解这个行业的动态。

3.1 原始社会

很久很久很久以前，在 jsliang出生的前一年，即 1994 年的时候，网景公司 (Netscape Communications) 推出了第一款浏览器：NCSAMosaic，但是它只有少数的幸运儿才能使用。

image

它的初始作用，是为了方便科学家看文档、传论文。所以，到今天为止，学习前端的人在接触 HTML 的时候，都会记得它的第一句有个词是 Document。

这时候的互联网，无疑是处于原始社会的文明初创时期。

image

你的标点符号变了？OK，浏览器下载过一个新的页面；

你提交了一个表单？OK，浏览器白屏等待许久，最后返回给你个 “用户名错误”；

你电商网站有一千种商品？OK，那你写一千个页面吧……

这时候的互联网，它的开发者统称为程序员。因为前后端开发是一体的，前端代码是后端代码的一部分：后端收到浏览器的请求 ---> 发送静态页面 ---> 发送到浏览器。

3.2 石器时代

就在同一年(1994 年)，PHP 出现了，有了将数据嵌入到 HTML 中的形式，这意味着互联网行业出现了钻木取火，不断朝石器时代发展。

image

这时候的互联网，兴起了数据嵌入模板，模板直接写样式的开发模式，例如 MVC 模式：

• Model（模型层）：提供/保存数据。
• Controller（控制层）：数据处理，实现业务逻辑。
• View（视图层）：展示数据，提供用户界面。

在此时，前端只是后端 MVC 中的 V，所以那时候的所谓 “前端工程师” 还没有对应的概念，前端开发人员都喜欢自称 “切图仔”。

后来，因为后端太忙，没空写页面样式让它长得更好看些，于是才有了前端编写页面模板后，让后端代码读取模板，替换变量，渲染出页面。

以 PHP 框架的 Laravel 为例：

image

1. 用户提交请求
2. 根据路由不同请求对应的 Laravel 控制器
3. 控制器与模型交互
4. 控制器调用结果页面
5. 在用户浏览器上渲染页面

PHP 内嵌 HTML 代码片段：

• 第1条数据
• 第2条数据

添加数据

< src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"> <> ('#add').click(function() { i++; //通过 DOM 操作在最后一个li元素后手动添加一个标签 $("#list").children("li").last().append("

第"+ i + "条数据

"); }); });

index.html - Vue

• {{item}}

添加数据

< src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <> new Vue({ el: "#app", data: { message: ["第1条数据", "第2条数据"], i: 2 }, methods:{ //向数组添加一条数据即可 add:function(){ this.i++; this.message.push("第"+ this.i + "条数据"); } } })

image

上面的例子，对这两者进行了简单的比较与区分。虽然只是一个简单的说明，但是在实际中，Vue 能解决的问题远比上面的要多的多，复杂的多。

但是，对 jQuery 与 Vue 进行比较，是推崇 Vue，建议全面废弃 jQuery 吗？并不是。

• Vue 适用的场景：复杂数据操作的后台页面，表单填写页面。
• jQuery 适用的场景：比如说一些 HTML5 的动画页面，一些需要 Java 来操作页面样式的页面。

正应了那句话：“没有最好的框架，只有更适合的应用”。

我们应该根据项目的需求，对技术进行不同的选取。就好比在公众号的 H5 页面上，jsliang就很喜欢用 jQuery 进行操作，因为它简单粗暴好操作，在动画效果的编写上也不错；而在使用 Echarts 进行报表演示的开发中，我更喜欢使用 Vue，因为它能很简易地对后端传回的大量数据进行操作。

4.3 Vue 与 小程序

开篇点题；深入学习过 Vue 开发的，那么在微信小程序、React、Angular 等框架的开发上也不会太差。

为什么这么说呢？因为它们都是基于 MV* 模式的一些现代前端框架。拿其中的 Vue 与 微信小程序 进行一些简单区别：

1. 生命周期/钩子函数不同，微信小程序的钩子函数要简单地多。
2. 请求数据方面，Vue 会在 created 或者 mounted 中请求数据，而微信小程序会在 和 onSow 中请求数据。
3. 等等……

往往很多时候，我们会觉得它们是有很多地方是相同的。

所以，对于 Vue、React、Angular、微信小程序等 MV* 模式的前端框架，如果非得进行区分比较的话，我们应该就框架的使用场景、团队技术能力、框架优劣势、生态系统等方面去分析它们，并区分它们的适用场景：

• Vue：简单易学，灵活轻便。相对于 React 和 Angular 来说，它的学习成本低，适合快速上手，且学习曲线比较平缓。
• React：灵活性很高，生态圈强大。相对于 Vue 来说，React 在数据操作方面更灵动；相对于 Angular 来说，它的学习成本更低。
• Angular：完整的框架体系。相对于 React 和 Vue，它是一个成熟完善的框架。
• 微信小程序：简单轻便。相对于 Vue 来说，它更加便捷了，而且微信小程序有上传的代码大小限制，使得微信小程序是真的 “小”。而且微信小程序结合微信，提供了很多 API 供开发人员使用。

因此，前端团队在项目开发前，可以就项目涉及领域进行探讨：

• 假如你想快速开发一个成本低的小应用，可以考虑 Vue。
• 假如你想开发一个大型应用，可以考虑 Angular。
• 假如你想开发一个跨平台应用，可以考虑 React。

事无绝对，这里仅为本人观点，实际技术选用应结合团队意见，从而找到最适合该项目的技术。

就 jsliang本人的开发体验来说：2018 年 4 月份的毕业设计使用了 Vue 进行开发，然后相隔半年进行了微信小程序开发，发觉小程序开发比起 Vue 而言是更轻松便捷的，因为它封装了很多 API 供开发人员使用，并且它有专门的提 Bug 社区。

五 思考总结

没有最好的框架，只有最合适的应用场景。

希望小伙伴们在面临不同的项目时，可以选择到最合适的框架，从而减少开发工作量，降低开发难度。

最后的最后，我们再谈谈前端的未来发展及前端职业未来：

1. 前端会继续分化。例如，喜欢 CSS 图形化的，将更深入地学习 UI 与 CSS 3D 等，进行更炫酷的布局；喜欢 Java 的，将更深入地学习数据的操作，实现更复杂地业务、更有趣的用户体验。
2. 前端会继续融合。例如，Vue、React、Angular 合并，实现大一统，结束三分天下的局面。
3. 前端将更加丰富。例如，PC、Mobile、IPad 等的体验更加丰富，不同的平台实现不同的功能。

所以，抓住机遇，不断折腾，创造更好的前端吧！