[译] JS 简史

原文：https://closebrace.com/articles/2017-09-11/a-brief-incomplete-history-of-javascript

咱们从哪里开始, 当下在何处, 如何走来, 而且...为何?

Introduction - 简介

在2017年，不管是新手仍是满身疲惫的老兵，都在JS开发中对这门语言掂量着：从何入手以及该选哪条路呢？大伙热衷于热门技术，但一般对它们为何那么好(或为何不是别的)并无理解。理解JS的历史能够帮助咱们搞清它当今的状态。

先来聊聊问题。全部语言写就的全部程序，都在解决问题。在宏观维度(“如何向用户交付一个解决方案”)、中等维度(“如何快速有效的排序数据”)，或微观维度(“怎么遍历数组”)上，都在纠结这个。编程语言就是用来让用户解决这些问题的工具，而用在web或其余地方的JS天然也没有什么不一样。有些人乐于细数JS的种种不是，我也不否定确实有不少问题，但对于其余语言来讲也是这样的。反正我是历来没见过哪一个经验丰富的开发者周期性的抱怨一些早期标准的，由于多说无益嘛。

这篇文章并不会深刻详尽的着眼于JS解决的全部问题，更非如何去解决这些；而是在一个大的尺度上去概览历史 -- 包括语言自己的和其曾用来解决web上不断增加的复杂问题的方法。要是真的说尽这门语言详尽的历史，那足够写完一本书了；而本文只尝试对“咱们在哪？”和“咱们为何在这？”这类问题给出大致和不失水准的回答，这也是标题叫作“简史”的缘由。

若是不了解当时的基本状况，就不容易领会“什么是框架”和“为何jQuery适合解决A问题而非B”这类常见问题。对这些问题的探索会让你成为一个更机灵、有见识的开发者，从而省下大量精力。

这篇文章按四个主要时期划分：早期时代--新兴的语言在浏览器中可用的十来年；jQuery时代--当jQuery和其余框架横空出世以应对JS开发中一些基础并头疼的问题的年代；单页应用时代--当开发者遇到了jQuery的瓶颈并用Backbone和AngularJS等框架得到显著提高的年代；现代时代--在此期间，精心编写的智能化框架大量出现，更关注速度、易用和模块化，并回归原生JS。对于每一个时期，将介绍一些当时的web开发的历史背景和当时人们遇到的问题，并解释当时的技术如何应对这些问题。

咱们正在自我超越，让咱们乘坐时光机，回到恐龙制霸地球以及......浏览器一家独大的时代：Netscape Navigator

The Early Era - 早期时代

时间轴: 约在 1996 – 2004
问题: 基本 DOM 操做, 用户交互
创新: JavaScript自己, XHR 和 AJAX
主要浏览器: Netscape Navigator, Microsoft Internet Explorer

JavaScript 是 Brendan Eich 花了十天左右建立出来的, 做为 Mozilla 的一位员工，他被雇佣来将 Scheme 编程语言引入 Netscape Navigator 浏览器中。然而这个计划被一种语法更接近Java的语言取代了。Eich 创造了 LiveScript，一种能够直接嵌入HTML文档并能够无需编译就被浏览器直接处理的语言。LiveScript 最初在 1995 年 9 月随 Netscape Navigator 发布，并在当年 12 月发布的第三个版本中改名为 JavaScript。[1]

尽管 JavaScript 这个名字沾了点 Java 的光，但除了有接近C的语法、缩进无关的、面向对象等特性这点儿共通之处外，它既不能和 Java 共享代码库，在语言核心方面也明显是彻底不一样的。这命名是个商业决定，并致使了接下来的二十多年中，对于 JavaScript 开发者的招聘接洽中充满了“有大量可用 Java 编程机会”的宣传...谢谢啊，Mozilla!

在最初几年中，JS和微软的几种脚本语言一决高下，带来的显著影响就是，网站要么在 Netscape 下工做正常，要么在 Internet Explorer 下(当时发布了其第三个版本)显示的不错，但不能二者兼顾。

无疑，网景公司在这些年一时无两，看起来不可阻挡。Netscape 3，特别是接下来的 Netscape 4 两个版本，成为了其巅峰时刻，它们击碎了全部挑战者的下巴。IE 则是个即使 CSS 已经流行的状况下却连 HTML 都渲染很差的落选者。

但在21世纪初期，Netscape 的开发失去了活力，而 IE 持续改进(从IE5开始，接下来是5.5，而后是神挡杀神的IE6)，并得到了更大的市场份额。JS的开发在这个时期是有限的 -- 一方面包括 Mozilla 和微软(把自家脚本命名为“JScript”以免版权问题)在内的厂商开始尝试推进并引领了标准化，另外一方面浏览器的兼容性也大量显现。

在 1999 年的 Netscape 4 中 PlanetQuake 的存档版本。使用了JS在主图像下滚动新闻标题 ，太厉害了...

由此带来的后果就是，编写在不一样浏览器下都能工做的脚本复杂而冗长，甚至不少状况下彻底不可行。那阵子不少脚本都只能做为锦上添花的小功能。React Armory 网站的建立者 James K. Nelson 说：“那时为了给我建的网站菜单栏上增长一个鼠标通过的图片效果，我使用了JS。并用它建立不那么好用的下拉菜单和有一些简单动画的烦人弹出框”。

讨厌的滚动文字、弹出提示、确认框和不少安全验证充斥着那时的网页。此外，可能那时最多见的一个JS用处就是建立图片过渡等 DHTML 效果，其中很大一部分功能后来被CSS取代。

仍是有人在JS领域取得了卓越的成就。《JavaScript: Visual Quickstart Guide》的做者，也是那个时代的开发者 Dori Smith 提到：“90年代后期有大批JS框架和库，Nick Heinle 和 Steve Champeon 各自有一个具备表明性的。可是这些库都依赖于做者自己去保持更新，这对任何人，还要同时开发网站的话，都挺困难的”。找到这些库一样困难，少有人知。当在web上实现动态交互时，占主导地位的是 Java applets、ActiveX widgets，和 Macromedia Flash。

事情在 2000 年后有了起色，并取得了一些幸运的进展，形成了JS的真正腾飞。众多成就中的一件事情就是由JS驱动的前端和后端服务器之间的异步通信，包括最终被全部主流浏览器接受的 XMLHttpRequest (XHR)。其余还有稍后出现的一众开发框架，如 Prototype、 MooTools 以及不得不提的 jQuery。

The jQuery Era - jQuery时代

时间轴: 约在 2004 – 2010
问题: 网站复杂度的增加, 太多的浏览器要适配
创新: 健壮的 DOM 操做, 早期的单页应用
主要浏览器: Microsoft IE, Mozilla Firefox

在21世纪初期，DHTML 开始变得流行。D表明着动态，也基本意味着“直接在HTML上搞点什么，而不用刷新浏览器”。这在当下看起来滑稽好笑，但在当时确是个大事情。传统上，当须要作点什么时，都须要网站刷新才行。JS提供了一些玩具功能，但标准网站很大程度上仍是基于页面的。当用户点击一个 tab 时，用户会被带到一个新页面，或者是在HTML从新渲染以前调整模板参数变量并刷新整个页面。

在这个时期中，只有两种主要的浏览器：微软的IE6--一种发布时难以置信但最终竟变为勒住互谅网脖子的行尸走肉的浏览器；以及 Mozilla 的 Firefox 。可是也有IE的其余版本在使用。“由于web标准的贫弱状态以及大量存在的bug，那时web开发特别困难”，《JavaScript: The Good Parts》(以及其余不少JS著做)的做者 Douglas Crockford 说道，“自动升级还没有被引入，因此浏览器新版本的发布并不能消除web上的bug；那只是增长了新的bug”。

尝试在这些浏览器中实现一致的体验就是一场噩梦；而还想动态的实现这些就是噩梦中的噩梦。jQuery 的建立者 John Resig 在谈到该框架的起源时说：

当开始建立这个库的时候，我想解决本身的两个痛点: 1) 提供简单的DOM接口； 2) 减小开发过程当中的跨浏览器问题[2]

处理跨多个浏览器的DOM访问是21世纪初web开发者主要面临的问题，但并不是他们惟一关心的。业界另外一个重磅解决方案就是AJAX，容许和服务器动态交换数据，而非只能依赖于页面渲染时才可得到的数据。Crockford 说：“Jesse James Garrett 在2005年发现了 AJAX -- 一个DHTML的新名字；由于 Netscape 已死以及在 IE6 后微软已经被 web 抛弃，而 W3C 则在徒劳无益的追求语义化 Web，AJAX 取得了远大于 DHTML 的成功。在长期的忽视后，AJAX带来了强烈须要的稳定性。AJAX 是一个巨大的成功，鼓舞了众多库致力于单页 web 应用的开发”。

诸如微软、谷歌和其余大公司等，做为早期的先锋，利用 AJAX 作出了大量激动人心的事情，但直到 2004 年发布的 Gmail，才真正点燃了 web 开发界。彻底用全新的方式处理电子邮件：所有事情都在浏览器中进行，并把邮件储存在谷歌的服务器上，这意味着用户能够在世界各地任何支持互联网的设备上访问其邮件，也不用特别安装电子邮件应用程序。虽然不是第一个单页应用，但倒是那个时代超然独立的最好应用，整个世界为之侧目。Gmail 用了一种不多被其余网站用到的 DHTML 和类 Ajax 的代码编写方式，而且还作到了其余开发者渴望的快速和易用，这些都致使了包括 jQuery 在内的框架的流行。“jQuery 解决了浏览器兼容性问题、添加了一堆有用的工具，还引入了比 document.getElementById 更好用的选择器”，Nelson 说，“其惟一的问题就是过重了，拨号上网时得下载多于 30kb 的数据”。

在 Crispy Gamer 网站上使用了大量的 jQuery。展开框、头条过渡和切换标签什么的

其实 jQuery 也不是第一个，2005 年 2 月发布的 Prototype 首先被用来为 Ruby on Rails 开发对 AJAX 的支持，同时也支持 DOM 操做 -- 和后来 jQuery 中广为人知的那些差很少。 转年 jQuery 才发布，而 MooTools 发布于 2007 年。这些框架提供了类似的功能，并有各自独特的实现方法。ProtoType 重写和扩展了不少 JS 原生的方法，有些开发者会以为这样很差。MooTools 更改了 JS 的 Element 对象，也意味着其容许更多的 DOM 操做。

jQuery 并不作以上那些事情，而是聚焦于提供一个以基本的 JS 为基础的框架。短时间内这种途径就被证实很是成功，jQuery 成为了主流框架；直到如今依然是，2017 年仍是有不少网站仍是基于它而非其余的框架开发。

这个框架到底提供了什么呢？先让咱们来看看这个纯JS的代码片断，演示了单击元素时隐藏另外一个元素的逻辑：

var el = document.getElementById('myElement');
var el2 = document.getElementById('myOtherElement');
el.addEventListener('click', function (e) {
  el2.style.display === 'none';
}复制代码

假如你的浏览器支持那些命令，那工做也算完成了，不过当时对于许多 DHTML 和 AJAX 的用例来讲这还是不保险的。用 jQuery 实现相同功能：

$('#myElement').click(function() {
  $('#myOtherElement').hide();
});复制代码

并不仅是更简明易读了，还带来另外的好处：jQuery确保了其在全部浏览器中都能工做，而工程师就没必要花费精力又担惊受怕了。也意味着开发者没必要花费一样多的时间造轮子了。当 jQuery 已经提供了 show/hide/toggle 这些函数时，为何要本身再写一遍呢？“jQuery并未真正改变用JS建立的东西”，Nelson 说，“可是确实改变了如何建立的方式。这使得JS在当时以一种看起来很神奇的方式在运用”。简而言之， jQuery 和相似框架加速并简化了使用者的开发。

...事情发展到某一天。随着网站变得愈来愈动态化，以及众多公司在缺少谷歌那种级别的工程师团队的状况下，也以Gmail等为目标开始构建如此复杂的应用，麻烦就接踵而至了。由成千上万行 jQuery 代码组成的大量代码库变得难以维护，又包含了很是多的自定义函数，使得新上手的开发者头疼不已。若是网页上有5个可点击的元素，那就有5个 $('#myElement').click() 的实例要管理；若是有500个可点击的元素呢，麻烦就出现了；若是是5000个元素，可能噩梦就来临了。

须要作更多的事情了。JS框架开始进化，开始呈现明显的相似后端的特性和开发方法。单页应用时代已经到来。

The Single Page App Era - 单页应用时代

时间轴: 约在 2010 - 2014
问题: 不堪重负的 DHTML, 大规模的数据操做, 速度
创新: 类MVC框架, 双向数据流, 智能操做DOM
主要浏览器: Google Chrome, Microsoft IE, Mozilla Firefox, Apple Safari

还有一些其余的创新也促成了单页应用时代的开启。其中一个就是发布于 2008 年的谷歌 Chrome 浏览器。在谷歌的创新中，包含一组前所未见的强劲开发工具。依靠不断的改进和升级，这些工具帮助开发者对 HTML/CSS/JS 实时检视和编辑。还包括了一个智能化的JS调试工具，从而让这门语言的调试接近于传统的编译型语言调试方法(在从前，开发者只能依赖于浏览器插件或外部程序作到这些)。如今大部分主流浏览器都原生提供了相似的能力。

说到谷歌另外的贡献，V8 JavaScript 渲染引擎是其中一个，正是其为 Node.js 这类JS独立运行平台的出现创造了条件。本文主要聚焦于JS前端的历史，可是若是不说起在网站开发中已经成为一种主要因素的 Node.js 的话，那就是咱们的失职了。因其快速、异步实现的特征，在开发者中大受欢迎，不管是业余爱好者仍是大公司都普遍采用；不少网站都由 Node.js 驱动。

在单页应用时代，并不仅是 Chrome，其余浏览器都比其余时期更平等的被使用，这对开发是某种好事。即使是 IE 这样的浏览器，也从善如流的愈来愈拥抱标准。首次来到了一个有可能不管在哪一个浏览器上打开网站，看起来和用起来都同样 -- 顶多有点细微差异的时候。Sass 等 CSS 框架也出现了，这简化了 web 开发的视觉方面；另外对于盒模型的限制也已经被彻底整理出来(致使了一系列关于有多少所谓 Web2.0 网站看起来雷同的讨论，有些广为流传，有些不为人知)。flexbox即未来临，Ethan Marcotte 在 2010 年发表了他的关于响应式网页设计标志性文章，但过了好长一段时间，该技术看起来才比较稳定了。

在单页应用的世界里，状况没那么复杂了。由于疲于应付成千上万行 jQuery 代码形成的乱局，开发者们开始另寻他法。和上一个时代的框架更关注 DOM 操做以及基本 AJAX 问题不一样，新一代的框架被开发出来 -- 为了管理复杂程度日益增加的应用而提供一整套工具。这些 JS 框架多有借鉴，好比 C++, PHP, Ruby 等后端语言中已经存在的那些。

2010 年，开发者 Jeremy Ashkenas 向单页应用开发者们发布了 Backbone.js。轻量、快速，而且不依赖于 jQuery (固然开发者们仍是能够借助 jQuery 使用更多 Backbone 的特性)，Backbone 被用来应对 “jQuery 沼泽”问题。其网站上的这段文字是这样阐释的：

“采用 jQuery 的选择器和回调建立 JS 应用确实简单，但终将陷入一团乱麻；你将手忙脚乱的保持数据在 HTML UI 和 JS 逻辑，以及服务器数据库之间的同步。对富客户端应用来讲，更结构化的方式才是更好的”

Backbone 的办法是将代码划分为数据模型类、操做这些数据的函数集合、显示它们的视图类；还提供了一些幕后自动处理的方法。借助于数据和视图的链接，当数据改变须要网站随之更新的时候，开发者就无需过于操心了。Backbone 做为一个卓越的产品，获得了普遍的应用，不少知名 web 应用都由它构建。

一样在 2010 年，AngularJS 的首个版本浮出水面。初始开发者是 Miško Hevery 和 Adam Abrons，而且在 Hevery 被谷歌雇佣后，该项目也落入这家公司之手。通过谷歌和不少奉献于此的外部开发者的持续支持，最近发布的 2.x 版本通过了显著的重写并确实进化了一代。而 1.x 版本仍被谷歌和开发者们支持，并普遍应用于互联网。

用 AngularJS 写成的 To-Do list -- 这个时代中应用界的 “Hello World”

AngularJS 以一种不一样于 Backbone.js 的方式提供了一整套前端结构方案。它提供了强有力的工具和一个基于组件的结构，这用 jQuery 是很难或者是不可能搭建起来的。Nelson 说：“数年来我在尝试用 jQuery 和纯 JS 搭建好用的单页应用的过程当中屡战屡败，直到我偶然发现了 AngularJS，它教会了我应用模型不用纠结在 DOM 中。这使得大型应用的运转成为可能”。

使用了双向数据流概念的 AngularJS，容许开发者构建同时在服务器端和客户端反映数据变化的应用。举例来讲：你能够建立一个 AngularJS 应用，让用户填写表单的时候，实时在页面的其余地方看见正在输入的数据，而且获知这些数据也同步保存到了服务器。切实的改变是，不用为了达成这类同步再写大量 jQuery 代码了。

和 Backbone 相似的是，AngularJS 提供了不少操做 DOM 的辅助工具。一样相似的是，也能够很好的结合 jQuery，但并不须要 jQuery 去承担不少主要功能。这就方便了熟悉 jQuery 生态的开发者逐渐迁移到 AngularJS。

该框架同时也促进了对使用组件的普及 -- 用来呈现 HTML 标签且包含了复杂逻辑的独立函数。这提供了更整洁、划分更清晰的标记；能够像下面这样用标签调用一个组件：

<userlist ng-repeat="user in $user.list"></userlist>复制代码

这段代码生成了一个完整的用户列表，包含丰富的细节，并内嵌了诸如跳转到用户详情页的连接等 HTML。一样重要的是，若是数组 $users.list 中的数据变化了，AngularJS 就会自动根据更新后的新数据自动从新渲染列表，而无需开发者的干预。

有了 Backbone 和 AngularJS，开发者一晚上之间就拥有了两个用来开发单页应用的完整工具箱，能够应对以前大规模 jQuery 开发中的短板，并继续用熟悉的方法开发。若是把 JS 比做基本手边工具，而 jQuery 是电动工具的话，那这两个框架就能够说是流水线了 -- 专业集成了为建立单页应用这个特别目的设计的复杂设备。

问题在于...它们都算不上小巧和快速(特别是在移动设备上)，这可能会使其难以维护，而且整个双向数据流机制也可能变成一把双刃剑。

Facebook 在 2013 年发布了 React，一个小巧和极速渲染的前端框架。随后其又在 2014 年发布了其基于事件的应用管理和开发工具 Flux。这些产品以及围绕其成长的相关技术，再一次改变了 JS 应用开发。

The Modern Era - 现代时代

时间轴: 约从 2014 至今
问题: 速度, 增加的应用复杂性, 可靠性
创新: Virtual DOM, 单向数据流, 强类型, 测试
主要浏览器: Google Chrome, Apple Safari

在过去的几年，网页的访问方式发生了深入的变化。曾经是家用 PC 独占的网站访问领域，如今变成了手机、平板电脑、笔记本电脑，以及台式机并存的状况。这些设备的带宽、处理器能力以及可用的屏幕分辨率各有不一样。少许下载和快速渲染变得特别实用...你所熟悉的用大量图片下载、几兆几兆的广告代码、自动播放的视频等来打动用户的做法已通过时！

和用户的期待不一样的是，不少内容网站还不是单页应用。单页应用被用来替代原生应用，在速度和响应能力方面也被寄予和原生应用一样的指望。用户也许能忍受用 5 秒钟加载一条最新的体育新闻，但很难作到花一样的时间在银行应用程序或分析监控面板里去等待点击按钮后的响应。

Facebook 为其开发者们发布了 React，以便迅速易用的进行开发。不少人的努力和智慧凝聚其中。它并不是完美，还有更新更好的后来者层出不穷，且虽然它为开发者提供了不少东西 -- 而其中不少用到的东西其实并非项目中真正须要的...但咱们仍会从中获益。

React 并非做为 JS 框架替代 Backbone 和 AngularJS 的，虽然确实削弱了它们；部分缘由是 React 并非一个完整的框架。React 初期主要被构想成一个 MVC 框架中的视图层语言。尽管不少其余自定义技术也是由 Facebook 开发的，但它确实能够结合各类既有技术；换句话说，对非 Facebook 的技术一视同仁，React 不处理数据、不处理事件、不处理 XHR/AJAX ... 所作的就是渲染组件。

在阅读本文时，极可能你已经据说或正在使用 React 做为整个前端的解决方案了。为何会这样？由于借助 Webpack 或 Browserify 等打包技术，整个生态围绕 React 生长，使得 "React" 其实是 "React 加上一整套的其余东西" 的简称。Nelson 简短的总结为：“在某种程度上，会感受所谓现代时代很像 jQuery 时代，构建单页应用垂手可得，从而不必去搞新类型的应用。React 用更简单的方法建立可重用组件；Webpack 和 NPM 促进了那些组件和其价值的分享；而 Babel 意味着咱们不用建立新语言，用 JS 就行了”。

无论怎样，React 也仍是存在其问题。基于打包的生态意味着若是不付出不少努力，JS 文件尺寸将迅速失控。即使对于资深开发者，要掌控全局也不那么容易，更甭提新手了。高质量的文档和友好的社区会缓和这些问题，但学习曲线依旧陡峭。

其余框架也雨后春笋般的出现。AngularJS 2 借鉴了不少相似 React 的方式大幅重写了其功能；其渲染速度大大优于版本 1，尤为在显示大量数据时。早于 React 至少一年发布的 Meteor (事实上，也能够用 React 做为其视图层)， 也有本身的拥趸。最先在 2014 年发布的 Vue.js，是一个小巧快速的前端框架，能很好的结合其余技术；其语法相似 React，其结构也是相似的基于组件的实现，虽然不是如出一辙吧。Preact 也是一个极小而快速的 React 替代品，它基于日益广泛使用的 ES6 -- 一个日益广受欢迎的更现代化 JS 版本(React 一开始用差很少已经被熟知了十年左右的 ES5 构建，也能够用 ES6 工做)。此外还有一些其余框架。

须要特别关注的是 React、AngularJS 等所作的事情，并非在重复造轮子。“没人再提 DHTML 或 AJAX 了，人们都开始说单页应用，但实际上是新瓶装旧酒” -- 这很大程度上是对的；基础代码还是 JS，也仍旧干着早期的事情。不一样一点的是今天的实现途径。

全部这些框架都倾向于解决相同的问题：建立不少工具方便开发者快速构建，以使单页 web 应用能很好的工做于多种设备上。它们很注重数据流和显示：基本上，对于取得终端用户所需的显示数据，并在数据变化时自动更新显示这部分工做，减轻了开发者必须的工做量。当处理海量数据，而且想给用户提供相似应用的体验时，这些框架真的是能救命啊。

下面说说 Vanilla JS。当前，你可能想知道若是某人在开发一个只需很少 JS 的小网站该用什么呢。AngularJS 和 React 看起来都是杀鸡用牛刀，是吧？

确实是。当你只想监听几个按钮以及切换 tab 的时候，用大量现代 JS 框架组成的好得很的单页应用就过于复杂了。"我该用什么？"的答案就是：取决于具体的需求，用 jQuery 或 Vanilla JS 均可以。

Vanilla JS 可不是一个框架，也不是一个库，其实什么也不是，就是 JavaScript。最近的更新已经使 JS 至关易用了。好比document.querySelector 和document.querySelectorAll，用相似 CSS 的语法提供了类 jQuery 的元素选择(好比 ".exterior-link")。ES5, ES6, 和 ES7 基本上已经被现代浏览器所支持；老旧浏览器正迅速减小，对于那些再也不受制于此的用户，就下降了借助 jQuery 跨浏览器的须要。从性能考虑，书写纯 JS 代码几乎确定会更快(除非你的程序不优化)，即使是在更老更慢的设备上。和不少开发者同样，Smith 对这种新关注点很兴奋：“我从 Vanilla JS 得到了不少回报。我已经完全厌烦了 Stack Overflow 那些滥用 jQuery 和其余框架的家伙。引入 jQuery 就是为了把本来 3 行代码能解决的问题写成 5 行吗？”

因此，在当今，2017年，JS 生态系统繁荣而混乱。没人能预测前方的状况，持续生长的只有变化。web 裹足不前也就意味着 JS 的止步，咱们也很期待将来时代能带来什么。但愿你能以为本文有趣又有益，而且更加留意咱们在何处、咱们如何来到此地，以及为何咱们选择了这条路。感谢阅读。

-------------------------------------

长按二维码或搜索 fewelife 关注咱们哦