浅谈了不起的前端

 前言

喜欢聊一些新奇的技术，也喜欢学习新的东西，在这个日益繁荣的时代，有幸见证技术的发展是多么美好的一件事。

前端简史

技术的发展总是遇到问题，去解决问题，然后不断遇到问题，不断解决问题。前端最初被称为Front-end。主要是用来采集输入信息，呈现界面效果。

关于前端的发展得从Tim在1990年发明了最原始的浏览器开始，随着Tim推广，美国国家超算应用中心开发了名为Mosaic 的浏览器，并于93年4月发布;第二年第一届万维网大会在日内瓦召开，同年7月，Html2.0规范发布，11月网景成立并发布第一代浏览器，改名为Navigator。94年底，W3C成立。此时，进入静态网页时代。也就是web1.0时代。

95年网景工程师 Brendan Eich 花了10天时间设计了 JavaScript 语言。与此相对的是，1996 年，微软发布了 VBScript 和 JScript。第一次浏览器之争开始了，同年11月，网景把javascript推向国际化，并在97年6月ECMA 以 JavaScript 语言为基础制定了 ECMAScript 1.0 标准规范。第一次浏览器战争以 IE 浏览器完胜 Netscape 而结束，IE 开始统领浏览器市场，份额的最高峰达到 2002 年的 96%。随着第一轮大战的结束，浏览器的创新也随之减少。作为独裁者，IE 并不遵循 W3C 的标准，IE 成了事实标准。

js的诞生，可以说是开启了动态网页的时代，为了使得 Web 更加充满活力，以 PHP、JSP、ASP.NET 为代表的动态页面技术相继诞生。

直到Google 分别在 2004 年和 2005 年先后发布了两款重量级的 Web 产品：Gmail 和 Google Map。这两款 Web 产品都大量使用了 AJAX 技术，不需要刷新页面就可以使得前端与服务器进行网络通信，颠覆了用户体验，这也体现了Ajax的较大的特性就是局部刷新。Ajax的流行，是我们进入了Web2.0时代，也就是客户端更方便的向服务端发送信息。

随着Firefox的出现，直接引发第二次浏览器大战。第二次浏览器战争中，随着以 Firefox 和 Opera 为首的 W3C 阵营与 IE 对抗程度的加剧，浏览器碎片化问题越来越严重，不同的浏览器执行不同的标准，对于开发人员来说这是一个恶梦。为了解决这个问题，众多兼容性js框架诞生，JQ在众多同类中脱颖而出，独领风骚，几乎成了业界的标配。

但是随着Web应用的增多，旧的标准难以满足需求，在2008 年 1 月 22 日，H5草案发布。同年12月，Chrome 发布JavaScript 引擎 V8，并加入浏览器之争中。H5的真正兴起是由于它与Flash的差异，在2010年4月，乔布斯发表一篇题为“对 Flash 的思考”的文章，指出随着 HTML5 的发展，观看视频或其它内容时，Adobe Flash 将不再是必须的，同时H5的WebWorker 可以让 JavaScript 运行在多线程中，WebSocket 可以实现前端与后台的双工通信，WebGL 可以创建 Web3D 网页游戏……

在第二次浏览器大战中，各个浏览器厂商都以提升 JavaScript 运行效率和支持 HTML5 各种新特性为主要目标，促进了浏览器的良性竞争。直到2016年，Chrome 占据了浏览器市场的半壁江山。

一个小插曲的就是TypeScript的诞生，TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。并于2012.10 微软发布 TypeScript 公开版。

2009 年，Ryan 利用 Chrome 的 V8 引擎打造了基于事件循环的异步 I/O 框架 —— Node.js 诞生。Node的出现使前端的职能进一步扩大，前端正式进入服务端。由于语言的特性，我们很难用一种语言去实现前后端的开发。Node的出现，扩展了js语言的特性，它更重要的是构建了一个庞大的生态体系。使得js大有一统天下之势。

2010 年 1 月，NPM 作为 Node.js 的包管理系统首次发布。我们可以按照 CommonJS 的规范编写 Node.js 模块，然后将其发布到 NPM 上面供其他开发人员使用。Npm是世界上较大的包模块管理系统。

关于Node的框架有很多，有Express、koa、Sails、egg。推荐egg，因为egg是阿里出的，有完整详细的文档，它是为企业级应用程序设计的。

谈到模块化，简单说一下模块化的历程。模块化体现的两个特性就是独立性和依赖性。早期，我们用script来引入js模块，但是它的缺点也很明显就是它会污染全局变量，同时有一个常见的问题就是它的加载是有顺序的，而且模块太多，不美观，资源难以管理。

为了解决这个问题，commonJs规范诞生了，该规范的核心思想是允许模块通过require方法来同步加载所要依赖的其他模块，然后通过 exports 或module.exports 来导出需要暴露的接口，同样它的缺点是不能并行加载模块，会阻塞浏览器加载。

AMD的诞生就是为了解决浏览器不能并行加载，代表工具就是requirejs，但是代码阅读性低。

同时CMD的出现，使开发者多了一种选择，代表工具是sea.js。与AMD相比，AMD推崇依赖前置;CMD推崇依赖就近，只有在用到某个模块的时候再去require。AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。对于依赖的模块，AMD是提前执行，CMD是延迟执行。

现在我们大多数用的是ES6模块，EcmaScript6标准增加了JavaScript语言层面的模块体系定义。ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。在 ES6 中，我们使用export关键字来导出模块，使用import关键字引用模块。但是浏览器还没有完全兼容，需要使用babel转化。

接着上面的讲，随着H5的流行，以前只适用于后端的思想，逐渐也被前端采用，MV*框架的兴起，将前端从DOM操作直接推向了数据操作，这将是前端的又一次革命，如果把Ajax当作前端的第一次革命，Node的出现当作是前端的第二次革命，这将是前端的第三次革命。Ajax将静态网页变成了真正的“动态”，并引领了浏览器生态的纷繁。Node将前端延伸到了后端，使js充满了无限的想象力。MV*框架的诞生，更是改写了前端的书写方式。现在前端面试，问的都是什么，你可以百度看看，现在的前端还是前端吗?还是那个Front-end吗?

（编辑：温州站长网）

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