IT博客汇 | ES2015实战——面向未来编程

ES2015实战——面向未来编程

颜海镜发表于 2016-04-27 00:00:00

昨天在知识体系做了一次分享，主题是ES2015实战，本文将分享内容整理成博文，帮助没记住，没听懂和错过的同学来看，同时也分享给大家，分享给更多的人。

本文基本是对分享内容的总结，但可能略有差异，或者说文字内容都是经过精雕细琢的，不会有分享现场的错误，所以说绝对值得一看。

开始之前警告一下，内容不少，建议略作准备，让我们开始我们的探险之旅吧，let’s go。

本文的大纲如下，和分享内容一致：

开场
道歉
关于我
历史
新特性
实战
未来
总结
选择
参考资料
问答
彩蛋

注：蛋疼的markdown并不支持锚点，还得手动写html，所以我就不加了，我是纯粹主义者，不能接受在markdown里插入html（其实是太懒），大家顺着往下看吧。

说明：每个大标题相当于上面的大纲，每个二级标题相当于ppt的一页（这把ppt搞成文章还真是不太容易）。

开场

为了等大家的到来（总有人喜欢迟到），避免先到同学的无聊，我专门给大家准备了一个开场小游戏。

相关链接：

游戏：http://yanhaijing.com/color/
源代码：https://github.com/yanhaijing/color

道歉

先给大家道个歉，这个分享本来打算赶在15年分享，因为15年刚好是Web诞生25周年，也刚刚好是我的25周岁，我竟然和web同岁（沾沾嘻嘻），但拖延症很严重的我，一直拖到现在，直到开讲前的半小时我还在改ppt，我希望给大家最好的分享。

PS：其实我还专门买了本《战胜拖延症》的书，但一直拖到现在还没时间看，o(╯□╰)o

关于我

先做个自我介绍，这里不展开了，感兴趣的同学直接点这里。

我的前端启蒙

10年开始接触前端，一路走来到现在刚好5年多一点，说起我的前端入门就像笑话一样，一路自己摸索过来。

开始时为了给安装包写说明文档，我想让我的说明文档更漂亮，所以用到了html，对没错就是这么low，如下图中的许可协议。

我其实是像下面这样写的，现在看low到爆，但我当时觉得简直就是完美啊。

<font size="24">许可协议</font>

我的前端启蒙书

为了制作安装包的文档，我觉得我得学学HTML，这个东西看起来不错啊，比C语言那个黑框框好多了，然后我就去了图书馆挑来挑去我就调到了下面这本书，我之所以挑下面是这本书，是因为这本书是彩色的，比较好看，当时也不懂，也没想那么多。

当时也看到了网页三剑客之类，如果但是入了三剑客的门可能就不能在这里给大家分享了，我可能去做flash了。

好像也很low，囧。

相关链接：

新编HTML网页设计

我的处女作

前段时间我在微博晒了我的处女作，引发了很多晒出自己的第一个作品，今天在整理这个ppt的时候，我发现了我更早的一个前端作品。

三个frame，也是不能更low了，我放这个当然不是让大家看我都low，而是想告诉大家web强大的兼容能力，html5中frame已经废弃了，但是浏览器仍然能够支持，20年前的网页如今依然能看，这么强大的平台，承担人类知识的传播者，简直就是再适合不过了。

强大的兼容性，得已于html和css的设计理念，设计之初就是向后兼容的，不认识的标签识别为行内元素，不认识的css属性直接忽略，而不是报错。

我的前端路

再来说说我的前端路，我10年接触前端，因为我主要是看学校图书馆的书来学习前端的，虽说09年HTML5已经定稿，但国内的环境其实会之后1年，然后国内图书一般会之后2-3年，然后图书馆的书一般会再落后1年，这一下就落后了5年，也就是说我开始时并不知道哪些书特别好，所以我最看是看到的都是03年左右的书，后来看得多了才慢慢知道了选择哪些书，所以我10年入门却还是经历了很多技术上的变革。

写着写着突然发现这部分简直可以单独写一篇文章了，╮(╯▽╰)╭。

先来说说我经历HTML变革如下：

HTML 4
xhtml 1.1
html 5
html
html 5.1

我最开始接触的是html4，我特别不能认识大写的英文，比如strong我认识，但是STRONG我要先写成小写才能认识，所以我特别讨厌大写的标签；后来接触了xhtml，感觉这个真是好啊，至少要求全部小写啊，这么严格的要求我特别喜欢，并奉为至尊。

再到后来xhtml2 失败，html5更空出世充当救世主，坐在我对面的舍友告诉我html5来了，标签又能大写了，也不用闭合，属性也不用双引号了，我当时就懵逼了，这简直是历史的倒退啊。

后来我接受了html5，因为我了解了她，她是那么美，语意标签，不再强迫开发者，慢慢理解了html5的思想，接受现实，因为浏览器就是这么做的，xhtml的理想在现实面前无法落地，散落了一地悲伤。

再后来whatwg将html5改为html，并标榜为活着的语言，还是因为浏览器就是这么做的，我也激动了，web本该如此，早怎么没想到呢。

知道最近w3c说要发布html5.1了，虽然html没有了版本的概念，但是w3c必须要整理出版本来，不然后面想做html解析器的人估计就懵逼了。

说完了html再来说说css，如下：

css2.1
css3
css module

开始接触的也是css2.1，感觉这个东西挺简单啊，但简直就是高大上啊，比c语言那个黑窗口厉害多了，我要学会全部的选择器，全部的属性，后来我真的做到了，每一个属性都如数家珍，横扫了图书馆每一本书籍。

再后来css3来了，我心里说真是什么鬼，css已经够用了，请不要再添加垃圾，虽然我极力反对，但我无能为力，没有人能听到我的呐喊，我除了接受什么都做不了，好吧我又被强奸了，但还高潮了，我爱上了css3，简直棒棒的，我也曾想过全部掌握每一个属性，后来发现my god，臣妾做不到啊。

再后来在知乎上被@winter老师点醒，css3其实也是不存在的，css2.1之后css就拆分了，因为它太大了，必须拆分，就想html是一样的。

说完了css再来说说js，如下：

历史的发展总是相似的，上面的经历，注定我的js入门也是悲剧的，先学js，后来学es3，再后来es5来了，我也是抵制的，js已经够用了，请不要再添加了，我的嗓子都嘶哑了，你们能不能听听我的呼声，开发规范的老古董能不能考虑考虑开发者的声音呢。

结果可想而知，我又爱上了es5，知道去年es6来了，真是日了狗了，class，proxies，generators，reflect轻饶了js吧，给js一条生路号码，js不需要这些垃圾的东西，这是java程序员才需要的狗屎。

结果吗当然就是今天这篇文章啦，我爱上了es6，并且我想推荐给你，让你也爱上。

再来说说我的浏览器，如下：

ie6
ie7
ie8
firefox
opera
chrome

说起来可能是悲剧，但我最开始开发用的浏览器竟然是ie6，后来基本在倒腾ie 6 7 8，可能我入门就选择最难用的浏览器（对开发来说），后来改用firefox，感觉这个加上firebug简直就是神器。

再后来很崇拜opera，因为我感觉这款浏览器简单，好用，后来有了chrome我就放弃了其他浏览器了，这个简直就是开发，生活全好用啊，特别是翻墙后就是无敌了。

相关链接：

最后来说说编辑器之旅，工欲善其事必先利其器，一个程序员必须有一个好的编辑器，虽然熟能生巧，但你用notepad和sublime比都不在同一个级别里，你再怎么熟料也是比不过人家的，我的编辑器之旅如下：

notepad
frontpage
dreamweaver
aptana
sublime

从notepad一路走来，说多了都是泪，现在我推荐大家用sublime。

从写代码，到所见即所得，再到继续写代码，编辑器也在跟着换，目前sublime是我最喜欢的编辑器了，因为我喜欢他的速度。

相关链接：

我的 Sublime Text 2 笔记

历史

以史为鉴可以明得失 —— 李世民温故而知新可以为师矣 —— 孔子学而不思则罔思而不学则殆 —— 孔子

古人早就告诉我们历史的重要性，鉴于很多同学其实不太清楚js的历史，所在在开始学习新知识之前我们先来连接下js的历史。

网景

提到js的历史不得不提网景公司，有兴趣的同学可以自行查阅资料。

这家公司开发了一个牛逼的软件，就是网景浏览器，网景浏览器风靡一时，成为了人们通往因特网的唯一入口，后来为了给浏览器扩展本地验证表的等的功能，于是乎创造了javascript。

Mozilla

后来在和IE的竞争中失败了，虽然失败了，但是还是很有钱和技术，于是乎成立了Mozilla基金会。

Mozilla决定将自己的浏览器开源，于是乎有了firefox，火狐浏览器凭借出色的用户体验和丰富而插件，以及开源终于卧薪尝胆，改变了IE一家独大的局面，才有了后面的chrome横空出世，从而形成今天三分天下的局面。

Mozilla带给我们web开发者最大礼物除了firefox还有开发者社区MDN，我现在经常在上面查阅自己不知道的知识。

相关链接：

JS之父

Brendan Eich花了10天时间设计了javascript，借鉴了c的语法，函数借鉴了scheme，原型借鉴了self。

相关链接：

JS进化史

下面的一张图其实完美呈现了javascript的进化史。

开始时js其实叫做livescript，当时java正火，便打上了java的顺飞车，改名叫做javascript，开始时一直伴随Netscape发布，后来ie也加入进了战争，并开发了自己的JScript，网景便去ECMA提交了自己的语言，从此ECMA负责制定js语言的标准，因为刚好是第262号标准，所以变叫做 ecma-262，因为java的版权在java的公司sun手里面，所指便ecma便给自己的规范改名为ecmascript，下文简称ES。

1999年制定了ES3的规范，将近10年时间语言层面没有大的改动，知道08年结尾，筹划了10年之久的ES4被废弃了，而是推出了更少改动，更友好的的ES5。

2011年对ES5进修了一次修订，一直到2015年6月份，ES6的规发布了，并规定以后的ES规范以年份命名，每年发布一个小版本，再不会像ES6这种一下发布很多功能了。

下图是我从网上找到的一个关于重大事情发生的关键时间点的图，可以来看一下。

相关链接：

Ecma国际

ES&JS

需要区分ES(ECMAScript)和JS(JavaScript)的区别，我们常说的js可能包括es+宿主环境，当然有时候js也可指代es，sun只把js的名称使用权限售给了Mozilla。一般说es指代规范，js指代具体的实现。

方言

其实除了JS外还有一些其他的ES方言，比较出名的ActionScript 3，除此之外还有一些，比如：QtScript 和DMDScript等（我都没听过，囧）。其实如果可以的话你自己也可以按照规范写一个ES的方言。

TC39

推进 JavaScript 发展的委员会

会员都是公司
定期召开会议
会议由会员公司的代表与特邀专家出席

TC39 实行的是协商一致的原则：通过一项决议必须得到每一位会员（公司代表）的赞成

下图是TC39的一些会员和其在github上的TC39 team的公开成员。

TC39流程

TC39的工作流程其实也可用下面一张图来总结：

ECMA262 状态

可以在这里查看目前处于各个状态的ecmascript未来版本的特性。其中stage1-4分别对应相面的1-4。

问题

最后抛给大家一个问题，这个问题没有答案，需要大家自己思考，就是TC39这种方式的优缺点，一个语言有一个团队制定规范和个人开发者制定规范的优缺点，可以参考xhtml2.0之死。

新特性

有哪些

我想初次了解ES6的人，一定会懵逼的，就像看到下面的图片一样，我勒个去了，这都是什么，其实ES6改动之多简直不亚于重新设计了一门语言，不说新增的新特性，可以说是原有的几乎每一项都有所修改，改动点不下于数百个之多。

面对如此之多的新特性，那么我们从何入手呢？改如何学起？

相关链接：

ECMAScript 2015 简易教程

ES规范

其实根据80 20原则，我们可以知道，这么多特性中常用的可能只有20%，就像之前的js，其中的精粹部分也只有100多页。

其实ES6中有很多特型都是为node而生，实际上这其中我们能够在平时常用到的，并且好用的可能也就是20%不到，所以大家不要有那么多恐惧。

模块系统

我们最先介绍的是模块系统，因为模块系统是社区做的最多探索的一块，也诞生了很多很多私有的模块系统，我在我的博文《JavaScript模块的前世今生》中有过一些阐述。

常见的模块系统有下面这些：

AMD
CMD
commonjs
UMD
。。。

如果你一个也不知道那么也没关系，因为从今天开始你就不需要这些，因为ES6为我们带来了全新的模块系统。

ES6模块系统的特性：

静态模块（模块名不能是变量）
声明式语法

可以像下面这样引入模块：

import {$} from 'jquery.js'; // es6

var $ = require('jquery.js')['$']; // amd

像下面这样导出模块：

export {$}; // es6

export.$ = $; // amd

注意：从这里开始，负责任的我在每一个ES6代码下面都写上了对等的ES5实现方法

ES6模块系统和AMD相比有一些不一样的思想，总结一下就是：

按需引入 vs 全局引入
多点暴漏 vs 全局暴漏

模块思想代码解释：

import {each, ...} from 'underscore.js'; // es6

var _ = require('underscore.js'); // amd


export {each, map, ...}; // es6

module.exports = _; // amd

需要注意的是目前还没有任何一款浏览器支持ES6模块系统，这主要是因为ES规范仅仅定义了一套引入和导出的规范，而没有定义具体如何实现，其实现方式在浏览器端和node端都有很多大争议，在ES7以及未来的规范中很可能解决这个问题，目前社区也在做积极的探索。详细内容可以参考这篇文章《为何 ES Module 如此姗姗来迟》。

所以目前为止我们想使用ES6的模块系统可以有两种方案：

SystemJS
transpiler（转换器），如ES6 module transpiler，babel，Traceur

字符串

ES6对字符串做了扩展，引入了一种新的字符串，可以支持字符串插值和多行字符串。

// 字符串
`yanhaijing ${abc}`; // es6

'yanhaijing' + abc;

`yanhaijing
.
com`; // es6

'yanhaijing' +
'.' +
'com'; // es5

其中字符串插值还可配合模版一起使用，同时现在支持全部Unicode码了，另外还增加了一组字符串接口，感兴趣的同学可以深入了解，个人感觉比较实用的就是字符串插值和多行字符串了。

解构

ES6带来了解构的功能，解构支持下面的一些场景：

数组解构
对象解构
字符串结构
数值和布尔值的解构赋值
函数参数的解构赋值

代码：

// 解构
var arr = [1, 2, 3, 4];

var [first, second] = arr; // es6

var first = arr[0]; // es5
var second = arr[1]; // es5

var obj = {a: 1, b: 2};

var {a, b} = obj; // es6

var a = obj.a; // es5
var b = obj.b; // es5

function add([x, y]){
    return x + y;
}

add([1, 2]) // 3

关于解构还有一些其他的黑魔法，感兴趣的同学可自行了解。

对象

ES6对对象字面量进行了扩展，支持属性同名变量简写，属性名求值，属性为函数的简写等：

// 对象
var a = 1;
var obj = {
    a,
    [a + 1]: 3,
    add() {}
} // es6

obj[a+1] = 3; // es5

同时ES6还扩展了一批对象的接口，感兴趣的同学可自行了解。

Spread

函数

Class

Promise

相关链接：

快来使用ES2015的Promise吧

其他

实战

ES5

兼容性

我为什么支持/抵制ES6

编译器/转换器/编码器

无处不在的编译器

转换器

Babel

Babel 5vs6

如何使用

fis插件

fis配置

兼容老代码

优点

缺点

广告1

广告2

未来

精粹

浏览器

我们怎么做

总结

优点

缺点

收益

为什么

做出选择

参考资料

问答

悲催的是没有一个人提问，╮(╯▽╰)╭，连我的托都听懵逼了。。。

彩蛋

一般来说到这里就该结束了，但作为一个负责人的步道师，我还是给大家准备了彩蛋。

ES2015实战——面向未来编程

开场

道歉

关于我

我的前端启蒙

我的前端启蒙书

我的处女作

我的前端路

历史

网景

Mozilla

JS之父

JS进化史

ES&JS

方言

TC39

TC39流程

ECMA262 状态

问题

新特性

有哪些

ES规范

模块系统

推荐特性

字符串

解构

对象

Spread

函数

Class

Promise

其他

实战

ES5

兼容性

我为什么支持/抵制ES6

编译器/转换器/编码器

无处不在的编译器

转换器

Babel

Babel 5vs6

如何使用

fis插件

fis配置

兼容老代码

推荐规范

优点

缺点

广告1

广告2

未来

更多ES规范

精粹

浏览器

我们怎么做

总结

优点

缺点

收益

为什么

做出选择

参考资料

问答

彩蛋

值得关注的项目

我的一些开源库

我写的小游戏