了不得的前端

千山万重，不离不弃，为了理想。

前言

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

前端简史

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

web1.0时代

关于前端的发展得从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 为表明的动态页面技术相继诞生。

Web2.0时代

直到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吗？

移动应用的时代

随着技术的兴起，咱们进入了移动应用的时代，网页逐渐由 Web Site 演变成了 Web App。涌现的Web App、Hybrid App、Native App。如今大多数App都是混合App，既有原生的功能，也有Web的页面。前端逐渐开始涉及App应用的开发。React Native能够用js来构建原生应用，极大的节约的开发成本，也加重来前端的学习成本。不久前的谷歌开发大会，讲了Flutter开发原生应用，Flutter是谷歌的移动UI框架，能够快速在iOS和Android上构建高质量的原生用户界面。

小程序的横空出世，也是对前端的一个挑战，不论微信小程序仍是支付宝小程序，都依托于一个巨大的流量池(平台)。前端的多样性也致使前端的复杂性，那么问题来了，咱们怎么才能多端使用一套代码呢？

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现现在市面上端的形态多种多样，Web、ReactNative、微信小程序等各类端大行其道，当业务要求同时在不一样的端都要求有所表现的时候，针对不一样的端去编写多套代码的成本显然很是高，这时候只编写一套代码就可以适配到多端的能力就显得极为须要。Taro是由京东凹凸实验室开发的。

前端也能够开发桌面应用， Electron 是基于 Chromium 和 Node.js, 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术建立桌面原生应用程序的框架。Electron 兼容 Mac, Windows 和 Linux， 它构建的应用可在这三个操做系统上面运行。

2015 年 6 月，ECMAScript 6.0 发布。该版本增长了许多新的语法。ECMAScript 之后每一年将会发布一个新版本，这无疑将持续促使浏览器厂商不断为 JavaScript 注入新的功能与特性，JavaScript走上了快速发展的正轨。

如今的前端仍是前端吗？随着技术的发展，前端开始涉及各个端，js也能够在各端自由畅行，并不断发掘潜力。一位朋友预测，将来只会存在两种开发人员，一个是端开发工程师，一个是云开发工程师。技术的界限愈来愈模糊，“全栈工程师”、“架构师”等等新的职业词汇不断涌现。做为一个前端开发人员，要学的东西不少，并且不只仅局限于前端。

最后一个问题，你真的学不动了吗？

公众号同步。

公众号内回复算法，可参加天天一道算法题活动。