閱讀(2.3k) 書簽贊(1) 我要糾錯

ES2015實戰(zhàn)——面向未來編程

2018-06-16 20:41 更新

昨天在知識體系做了一次分享，主題是ES2015實戰(zhàn)，本文將分享內(nèi)容整理成博文，幫助沒記住，沒聽懂和錯過的同學(xué)來看，同時也分享給大家，分享給更多的人。

本文基本是對分享內(nèi)容的總結(jié)，但可能略有差異，或者說文字內(nèi)容都是經(jīng)過精雕細(xì)琢的，不會有分享現(xiàn)場的錯誤，所以說絕對值得一看。

開始之前警告一下，內(nèi)容不少，建議略作準(zhǔn)備，讓我們開始我們的探險之旅吧，let’s go。

本文的大綱如下，和分享內(nèi)容一致：

開場
道歉
關(guān)于我
歷史
新特性
實戰(zhàn)
未來
總結(jié)
選擇
參考資料
問答
彩蛋

注：蛋疼的markdown并不支持錨點，還得手動寫html，所以我就不加了，我是純粹主義者，不能接受在markdown里插入html（其實是太懶），大家順著往下看吧。

說明：每個大標(biāo)題相當(dāng)于上面的大綱，每個二級標(biāo)題相當(dāng)于ppt的一頁（這把ppt搞成文章還真是不太容易）。

開場

為了等大家的到來（總有人喜歡遲到），避免先到同學(xué)的無聊，我專門給大家準(zhǔn)備了一個開場小游戲。

相關(guān)鏈接：

游戲：http://yanhaijing.com/color/
源代碼：https://github.com/yanhaijing/color

道歉

先給大家道個歉，這個分享本來打算趕在15年分享，因為15年剛好是Web誕生25周年，也剛剛好是我的25周歲，我竟然和web同歲（沾沾嘻嘻），但拖延癥很嚴(yán)重的我，一直拖到現(xiàn)在，直到開講前的半小時我還在改ppt，我希望給大家最好的分享。

PS：其實我還專門買了本《戰(zhàn)勝拖延癥》的書，但一直拖到現(xiàn)在還沒時間看，o(╯□╰)o

關(guān)于我

先做個自我介紹，這里不展開了，感興趣的同學(xué)直接點這里。

我的前端啟蒙

10年開始接觸前端，一路走來到現(xiàn)在剛好5年多一點，說起我的前端入門就像笑話一樣，一路自己摸索過來。

開始時為了給安裝包寫說明文檔，我想讓我的說明文檔更漂亮，所以用到了html，對沒錯就是這么low，如下圖中的許可協(xié)議。

我其實是像下面這樣寫的，現(xiàn)在看low到爆，但我當(dāng)時覺得簡直就是完美啊。

<font size="24">許可協(xié)議</font>

我的前端啟蒙書

為了制作安裝包的文檔，我覺得我得學(xué)學(xué)HTML，這個東西看起來不錯啊，比C語言那個黑框框好多了，然后我就去了圖書館挑來挑去我就調(diào)到了下面這本書，我之所以挑下面是這本書，是因為這本書是彩色的，比較好看，當(dāng)時也不懂，也沒想那么多。

當(dāng)時也看到了網(wǎng)頁三劍客之類，如果但是入了三劍客的門可能就不能在這里給大家分享了，我可能去做flash了。

好像也很low，囧。

相關(guān)鏈接：

新編HTML網(wǎng)頁設(shè)計

我的處女作

前段時間我在微博曬了我的處女作，引發(fā)了很多曬出自己的第一個作品，今天在整理這個ppt的時候，我發(fā)現(xiàn)了我更早的一個前端作品。

三個frame，也是不能更low了，我放這個當(dāng)然不是讓大家看我都low，而是想告訴大家web強(qiáng)大的兼容能力，html5中frame已經(jīng)廢棄了，但是瀏覽器仍然能夠支持，20年前的網(wǎng)頁如今依然能看，這么強(qiáng)大的平臺，承擔(dān)人類知識的傳播者，簡直就是再適合不過了。

強(qiáng)大的兼容性，得已于html和css的設(shè)計理念，設(shè)計之初就是向后兼容的，不認(rèn)識的標(biāo)簽識別為行內(nèi)元素，不認(rèn)識的css屬性直接忽略，而不是報錯。

我的前端路

再來說說我的前端路，我10年接觸前端，因為我主要是看學(xué)校圖書館的書來學(xué)習(xí)前端的，雖說09年HTML5已經(jīng)定稿，但國內(nèi)的環(huán)境其實會之后1年，然后國內(nèi)圖書一般會之后2-3年，然后圖書館的書一般會再落后1年，這一下就落后了5年，也就是說我開始時并不知道哪些書特別好，所以我最看是看到的都是03年左右的書，后來看得多了才慢慢知道了選擇哪些書，所以我10年入門卻還是經(jīng)歷了很多技術(shù)上的變革。

寫著寫著突然發(fā)現(xiàn)這部分簡直可以單獨寫一篇文章了，╮(╯▽╰)╭。

先來說說我經(jīng)歷HTML變革如下：

HTML 4
xhtml 1.1
html 5
html
html 5.1

我最開始接觸的是html4，我特別不能認(rèn)識大寫的英文，比如strong我認(rèn)識，但是STRONG我要先寫成小寫才能認(rèn)識，所以我特別討厭大寫的標(biāo)簽；后來接觸了xhtml，感覺這個真是好啊，至少要求全部小寫啊，這么嚴(yán)格的要求我特別喜歡，并奉為至尊。

再到后來xhtml2 失敗，html5更空出世充當(dāng)救世主，坐在我對面的舍友告訴我html5來了，標(biāo)簽又能大寫了，也不用閉合，屬性也不用雙引號了，我當(dāng)時就懵逼了，這簡直是歷史的倒退啊。

后來我接受了html5，因為我了解了她，她是那么美，語意標(biāo)簽，不再強(qiáng)迫開發(fā)者，慢慢理解了html5的思想，接受現(xiàn)實，因為瀏覽器就是這么做的，xhtml的理想在現(xiàn)實面前無法落地，散落了一地悲傷。

再后來whatwg將html5改為html，并標(biāo)榜為活著的語言，還是因為瀏覽器就是這么做的，我也激動了，web本該如此，早怎么沒想到呢。

知道最近w3c說要發(fā)布html5.1了，雖然html沒有了版本的概念，但是w3c必須要整理出版本來，不然后面想做html解析器的人估計就懵逼了。

說完了html再來說說css，如下：

css2.1
css3
css module

開始接觸的也是css2.1，感覺這個東西挺簡單啊，但簡直就是高大上啊，比c語言那個黑窗口厲害多了，我要學(xué)會全部的選擇器，全部的屬性，后來我真的做到了，每一個屬性都如數(shù)家珍，橫掃了圖書館每一本書籍。

再后來css3來了，我心里說真是什么鬼，css已經(jīng)夠用了，請不要再添加垃圾，雖然我極力反對，但我無能為力，沒有人能聽到我的吶喊，我除了接受什么都做不了，好吧我又被強(qiáng)奸了，但還高潮了，我愛上了css3，簡直棒棒的，我也曾想過全部掌握每一個屬性，后來發(fā)現(xiàn)my god，臣妾做不到啊。

再后來在知乎上被@winter老師點醒，css3其實也是不存在的，css2.1之后css就拆分了，因為它太大了，必須拆分，就想html是一樣的。

說完了css再來說說js，如下：

歷史的發(fā)展總是相似的，上面的經(jīng)歷，注定我的js入門也是悲劇的，先學(xué)js，后來學(xué)es3，再后來es5來了，我也是抵制的，js已經(jīng)夠用了，請不要再添加了，我的嗓子都嘶啞了，你們能不能聽聽我的呼聲，開發(fā)規(guī)范的老古董能不能考慮考慮開發(fā)者的聲音呢。

結(jié)果可想而知，我又愛上了es5，知道去年es6來了，真是日了狗了，class，proxies，generators，reflect輕饒了js吧，給js一條生路號碼，js不需要這些垃圾的東西，這是java程序員才需要的狗屎。

結(jié)果嗎當(dāng)然就是今天這篇文章啦，我愛上了es6，并且我想推薦給你，讓你也愛上。

再來說說我的瀏覽器，如下：

ie6
ie7
ie8
firefox
opera
chrome

說起來可能是悲劇，但我最開始開發(fā)用的瀏覽器竟然是ie6，后來基本在倒騰ie 6 7 8，可能我入門就選擇最難用的瀏覽器（對開發(fā)來說），后來改用firefox，感覺這個加上firebug簡直就是神器。

再后來很崇拜opera，因為我感覺這款瀏覽器簡單，好用，后來有了chrome我就放棄了其他瀏覽器了，這個簡直就是開發(fā)，生活全好用啊，特別是翻墻后就是無敵了。

相關(guān)鏈接：

Chrome多賬戶的妙用
我的Chrome插件

最后來說說編輯器之旅，工欲善其事必先利其器，一個程序員必須有一個好的編輯器，雖然熟能生巧，但你用notepad和sublime比都不在同一個級別里，你再怎么熟料也是比不過人家的，我的編輯器之旅如下：

notepad
frontpage
dreamweaver
aptana
sublime

從notepad一路走來，說多了都是淚，現(xiàn)在我推薦大家用sublime。

從寫代碼，到所見即所得，再到繼續(xù)寫代碼，編輯器也在跟著換，目前sublime是我最喜歡的編輯器了，因為我喜歡他的速度。

相關(guān)鏈接：

我的 Sublime Text 2 筆記

歷史

以史為鑒可以明得失 —— 李世民溫故而知新可以為師矣 —— 孔子學(xué)而不思則罔思而不學(xué)則殆 —— 孔子

古人早就告訴我們歷史的重要性，鑒于很多同學(xué)其實不太清楚js的歷史，所在在開始學(xué)習(xí)新知識之前我們先來連接下js的歷史。

網(wǎng)景

提到j(luò)s的歷史不得不提網(wǎng)景公司，有興趣的同學(xué)可以自行查閱資料。

這家公司開發(fā)了一個牛逼的軟件，就是網(wǎng)景瀏覽器，網(wǎng)景瀏覽器風(fēng)靡一時，成為了人們通往因特網(wǎng)的唯一入口，后來為了給瀏覽器擴(kuò)展本地驗證表的等的功能，于是乎創(chuàng)造了javascript。

Mozilla

后來在和IE的競爭中失敗了，雖然失敗了，但是還是很有錢和技術(shù)，于是乎成立了Mozilla基金會。

Mozilla決定將自己的瀏覽器開源，于是乎有了firefox，火狐瀏覽器憑借出色的用戶體驗和豐富而插件，以及開源終于臥薪嘗膽，改變了IE一家獨大的局面，才有了后面的chrome橫空出世，從而形成今天三分天下的局面。

Mozilla帶給我們web開發(fā)者最大禮物除了firefox還有開發(fā)者社區(qū)MDN，我現(xiàn)在經(jīng)常在上面查閱自己不知道的知識。

相關(guān)鏈接：

JS之父

Brendan Eich花了10天時間設(shè)計了javascript，借鑒了c的語法，函數(shù)借鑒了scheme，原型借鑒了self。

相關(guān)鏈接：

Javascript:10天設(shè)計一門語言
JS之父博客

JS進(jìn)化史

下面的一張圖其實完美呈現(xiàn)了javascript的進(jìn)化史。

開始時js其實叫做livescript，當(dāng)時java正火，便打上了java的順飛車，改名叫做javascript，開始時一直伴隨Netscape發(fā)布，后來ie也加入進(jìn)了戰(zhàn)爭，并開發(fā)了自己的JScript，網(wǎng)景便去ECMA提交了自己的語言，從此ECMA負(fù)責(zé)制定js語言的標(biāo)準(zhǔn)，因為剛好是第262號標(biāo)準(zhǔn)，所以變叫做 ecma-262，因為java的版權(quán)在java的公司sun手里面，所指便ecma便給自己的規(guī)范改名為ecmascript，下文簡稱ES。

1999年制定了ES3的規(guī)范，將近10年時間語言層面沒有大的改動，知道08年結(jié)尾，籌劃了10年之久的ES4被廢棄了，而是推出了更少改動，更友好的的ES5。

2011年對ES5進(jìn)修了一次修訂，一直到2015年6月份，ES6的規(guī)發(fā)布了，并規(guī)定以后的ES規(guī)范以年份命名，每年發(fā)布一個小版本，再不會像ES6這種一下發(fā)布很多功能了。

下圖是我從網(wǎng)上找到的一個關(guān)于重大事情發(fā)生的關(guān)鍵時間點的圖，可以來看一下。

相關(guān)鏈接：

Ecma國際

ES&JS

需要區(qū)分ES(ECMAScript)和JS(JavaScript)的區(qū)別，我們常說的js可能包括es+宿主環(huán)境，當(dāng)然有時候js也可指代es，sun只把js的名稱使用權(quán)限售給了Mozilla。一般說es指代規(guī)范，js指代具體的實現(xiàn)。

方言

其實除了JS外還有一些其他的ES方言，比較出名的ActionScript 3，除此之外還有一些，比如：QtScript 和DMDScript等（我都沒聽過，囧）。其實如果可以的話你自己也可以按照規(guī)范寫一個ES的方言。

TC39

推進(jìn) JavaScript 發(fā)展的委員會

會員都是公司
定期召開會議
會議由會員公司的代表與特邀專家出席

TC39 實行的是協(xié)商一致的原則：通過一項決議必須得到每一位會員（公司代表）的贊成

下圖是TC39的一些會員和其在github上的TC39 team的公開成員。

TC39流程

TC39的工作流程其實也可用下面一張圖來總結(jié)：

ECMA262 狀態(tài)

可以在這里查看目前處于各個狀態(tài)的ecmascript未來版本的特性。其中stage1-4分別對應(yīng)相面的1-4。

問題

最后拋給大家一個問題，這個問題沒有答案，需要大家自己思考，就是TC39這種方式的優(yōu)缺點，一個語言有一個團(tuán)隊制定規(guī)范和個人開發(fā)者制定規(guī)范的優(yōu)缺點，可以參考xhtml2.0之死。

新特性

有哪些

我想初次了解ES6的人，一定會懵逼的，就像看到下面的圖片一樣，我勒個去了，這都是什么，其實ES6改動之多簡直不亞于重新設(shè)計了一門語言，不說新增的新特性，可以說是原有的幾乎每一項都有所修改，改動點不下于數(shù)百個之多。

面對如此之多的新特性，那么我們從何入手呢？改如何學(xué)起？

相關(guān)鏈接：

ECMAScript 2015 簡易教程

ES規(guī)范

其實根據(jù)80 20原則，我們可以知道，這么多特性中常用的可能只有20%，就像之前的js，其中的精粹部分也只有100多頁。

其實ES6中有很多特型都是為node而生，實際上這其中我們能夠在平時常用到的，并且好用的可能也就是20%不到，所以大家不要有那么多恐懼。

模塊系統(tǒng)

我們最先介紹的是模塊系統(tǒng)，因為模塊系統(tǒng)是社區(qū)做的最多探索的一塊，也誕生了很多很多私有的模塊系統(tǒng)，我在我的博文《JavaScript模塊的前世今生》中有過一些闡述。

常見的模塊系統(tǒng)有下面這些：

AMD
CMD
commonjs
UMD
。。。

如果你一個也不知道那么也沒關(guān)系，因為從今天開始你就不需要這些，因為ES6為我們帶來了全新的模塊系統(tǒng)。

ES6模塊系統(tǒng)的特性：

靜態(tài)模塊（模塊名不能是變量）
聲明式語法

可以像下面這樣引入模塊：

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

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

像下面這樣導(dǎo)出模塊：

export {$}; // es6

export.$ = $; // amd

注意：從這里開始，負(fù)責(zé)任的我在每一個ES6代碼下面都寫上了對等的ES5實現(xiàn)方法 注意：從這里開始，負(fù)責(zé)任的我在每一個ES6代碼下面都寫上了對等的ES5實現(xiàn)方法 注意：從這里開始，負(fù)責(zé)任的我在每一個ES6代碼下面都寫上了對等的ES5實現(xiàn)方法

ES6模塊系統(tǒng)和AMD相比有一些不一樣的思想，總結(jié)一下就是：

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

模塊思想代碼解釋：

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

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


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

module.exports = _; // amd

需要注意的是目前還沒有任何一款瀏覽器支持ES6模塊系統(tǒng)，這主要是因為ES規(guī)范僅僅定義了一套引入和導(dǎo)出的規(guī)范，而沒有定義具體如何實現(xiàn)，其實現(xiàn)方式在瀏覽器端和node端都有很多大爭議，在ES7以及未來的規(guī)范中很可能解決這個問題，目前社區(qū)也在做積極的探索。詳細(xì)內(nèi)容可以參考這篇文章《為何 ES Module 如此姍姍來遲》。

所以目前為止我們想使用ES6的模塊系統(tǒng)可以有兩種方案：

SystemJS
transpiler（轉(zhuǎn)換器），如ES6 module transpiler，babel，Traceur

字符串

ES6對字符串做了擴(kuò)展，引入了一種新的字符串，可以支持字符串插值和多行字符串。

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

'yanhaijing' + abc;

`yanhaijing
.
com`; // es6

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

其中字符串插值還可配合模版一起使用，同時現(xiàn)在支持全部Unicode碼了，另外還增加了一組字符串接口，感興趣的同學(xué)可以深入了解，個人感覺比較實用的就是字符串插值和多行字符串了。

解構(gòu)

ES6帶來了解構(gòu)的功能，解構(gòu)支持下面的一些場景：

數(shù)組解構(gòu)
對象解構(gòu)
字符串結(jié)構(gòu)
數(shù)值和布爾值的解構(gòu)賦值
函數(shù)參數(shù)的解構(gòu)賦值

代碼：

// 解構(gòu)
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

關(guān)于解構(gòu)還有一些其他的黑魔法，感興趣的同學(xué)可自行了解。

對象

ES6對對象字面量進(jìn)行了擴(kuò)展，支持屬性同名變量簡寫，屬性名求值，屬性為函數(shù)的簡寫等：

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

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

同時ES6還擴(kuò)展了一批對象的接口，感興趣的同學(xué)可自行了解。

Spread

Spread是數(shù)組的一個新功能，可以快速實現(xiàn)數(shù)組的拷貝，需要注意的是這里是對直接子元素的淺拷貝。

// 數(shù)組
var arr1 = [1, 2, 3];
var arr2 = [...arr1]; //es6 淺拷貝

var arr2 = [].concat(arr1); // es5
var arr2 = arr1.slice(0);

min(...arr2);

函數(shù)

ES6的函數(shù)也帶來了很多新特性，這里主要介紹下面三點：

箭頭函數(shù)
rest參數(shù)
默認(rèn)值

先來說說箭頭函數(shù)吧，這個是為lamada表達(dá)式而生，個人感覺和數(shù)組方法結(jié)合起來特別好用。

// 箭頭函數(shù)
[1, 2, 3].map(x => x + 1); // es6

[1, 2, 3].map(function(x) {
        return x + 1;
}.bind(this)); // es5

[1, 2, 3].filter(x => {return x > 2});

(x, y, z) => {***}

注意：箭頭函數(shù)中的this是綁定的。

再來說說rest參數(shù)，在之前可以通過arguments參數(shù)來模擬rest參數(shù)，但現(xiàn)在有了真正的rest參數(shù)了。

rest必須放在最后，代表后面的傳入?yún)?shù)，其是一個真正的數(shù)組。

// rest參數(shù)
function aaa(...args) {
        return args.join(',');
} // es6

function aaa() {
        return [].slice.call(arguments, 0).join(',');
} // es5

function bbb(x, y, ...args) {

}

bbb(1, 2, ...[3, 4, 5]); // 和數(shù)組的spread結(jié)合起來簡直完美

再來說說函數(shù)參數(shù)的默認(rèn)值吧，有了這個就省了不少事了。

// 默認(rèn)值
function f(a = 1) {} // es6

function f(a) {
        a = typeof a === 'undefined' ? 1: a; // es5
}

Class

ES6之前想要模擬一個class真是費了牛勁了，我們一般通過new 構(gòu)造函數(shù)的方式來模擬，社區(qū)也是有很多種方法，光學(xué)會這些方法都得花費很多精力。

class典型的特色如下：

公有共享屬性/方法
公有靜態(tài)屬性/方法
公有特權(quán)方法（訪問私有成員）
公有成員
私有靜態(tài)成員/方法
私有成員/方法

現(xiàn)在ES6為我們帶來了原生的class，終于讓世界重歸一統(tǒng)。

// class
class Child extends Parent {
    constructor() {
        super();
        this.value = 1;
    }
    get() {
        return this.value;
    }
}

關(guān)于這個問題我之前還寫過兩篇文章可以參考：

JavaScript對象繼承一瞥
一段代碼詳解JavaScript面向?qū)ο?/a>

Promise

Promise的典型狀態(tài)如下，這里不做過多介紹，如果你感興趣可以看我的這篇文章《快來使用ES2015的Promise吧》。

關(guān)于Promise我想說的就是思想的轉(zhuǎn)變，以前我們是傳入一個回調(diào)函數(shù)，現(xiàn)在返回給我們一個將來會改變的值。

Promise的兼容性目前還有很大問題，所以必須使用pollyfill庫，具體可以查看我上面介紹的文章。

我們一般像下面這樣使用Promise

// Promise
function async() {
    return new Promise((resolve, reject) => {
        window.setTimeout(() => {resolve(123);}, 1000);
    });
}

async().then(function() {
    // xxx
});

對應(yīng)的回調(diào)函數(shù)代碼如下：

// es5
function async(cb) {
    window.setTimeout(function() {
        cb();
    }, 1000);
}

async(function() {
    // ***
})

一個典型的回調(diào)地獄的例子如下：

function delay(time, cb) {
    window.setTimeout(function() {cb()}, time);
}

delay(100, function() {
    delay(200, function() {
        delay(300, function() {
            delay(400, function() {
                delay(500, function() {
                    delay(600, function() {
                        delay(700, function() {
                            delay(800, function() {
                                console.log('yanhaijing.com');
                            })
                        })
                    })
                })
            })
        })
    })
});

用Promise后的典型代碼如下：

function delay(time) {
    return new Promise(function (resolve, reject) {
        window.setTimeout(function() {resolve()}, time);
    });
}

delay(100).then(function() {
    return delay(200);
}).then(function() {
    return delay(300);
}).then(function() {
    return delay(400);
}).then(function() {
    return delay(500);
}).then(function() {
    return delay(600);
}).then(function() {
    return delay(700);
}).then(function() {
    return delay(800);
}).then(function() {
    console.log('yanhaijing.com');
});

一個常見的誤區(qū)我們不要像下面這樣使用Promise：

delay(100).then(function() {
    delay(200).then(function() {
        delay(300).then(function() {
            delay(400).then(function() {
                delay(500).then(function() {
                    delay(600).then(function() {
                        delay(700).then(function() {
                            delay(800).then(function() {
                                console.log('yanhaijing.com');
                            })
                        })
                    })
                })
            })
        })
    })
});

關(guān)于Promise的更多誤區(qū)我們可以查看這篇文章《We have a problem with promises》。

相關(guān)鏈接：

JavaScript Promise迷你書（中文版）

其他

這里還有很多其他新特性我們沒有介紹到，如果你感興趣可以自行了解，文章結(jié)尾的相關(guān)資料是個不錯的參考：

generators
unicode
module loaders
map + set + weakmap + weakset
proxies
symbols
subclassable built-ins
math + number + string + array + object APIs
binary and octal literals
reflect api
tail calls

實戰(zhàn)

ES5

先來看看ES5目前的兼容性，從下圖看兼容性還是很好的。

兼容性

再來看看ES6的兼容性，簡直慘不忍睹啊。

我為什么支持/抵制ES6

作為一個來自ES3時代的老古董，堅決反對ES4，經(jīng)歷并擁護(hù)ES5的變革的我，起初我對ES6是抵制的，對ES6是抵制的，對ES6是抵制的。

ES6在搞什么鬼，竟然不能向后兼容，這簡直違背Web的設(shè)計理念，HTML，css都是向后兼容的，你竟然不向后兼容，對不起我不能使用你。滾，滾，滾。。。

編譯器/轉(zhuǎn)換器/編碼器

其實直到我了解了編譯器，才轉(zhuǎn)變了我的想法，并開始支持和使用ES6。

編譯器的靈感其實其實并不是憑空而生的，想coffeescript/typescript中早就開始使用了，我們可以把ES5比喻成匯編語言（目標(biāo)語言），而降ES5+比喻成C語言（源語言），從而完成下面的轉(zhuǎn)換。

這是一場思想的轉(zhuǎn)變，ES5 是Web時代的匯編語言，編譯不可避免。

無處不在的編譯器

其實對于編譯器，我們早就開始使用了，不信你看下面的列表，你肯定使用過其中一個呢。

masm
gcc
javac
coffeescript/typescript
less/sass

轉(zhuǎn)換器

那么將我們的ES6轉(zhuǎn)換成ES5的轉(zhuǎn)換器有哪些呢？其實也是有不少的，比如：

babel
Traceur（google）

Babel

我要給大家分享的就Babel，通過babel我們在今天就可以使用ES6，甚至是ES7。

Babel是一個杰出的編譯器，前身是大名鼎鼎的6to5，后來為了順應(yīng)未來ES7，便改名為babel，不再局限于6to5。

Babel 5vs6

Babel最近推出了v6版本，關(guān)于版本的選擇也是個藝術(shù)問題，我一般是推薦選擇最新版的。

6相對于5最大的變化就是擁抱ES*，每個ES屬性都是一個插件，而不是像之前那樣都揉在了一起，我們可以自由拼裝自己想要的特性，自由組合，每個團(tuán)隊都可以有自己的的選擇權(quán)。

但目前6在npm2的架構(gòu)下，安裝起來太大了，而且問題也是蠻多的，我們可以坐等其成成熟了再來使用，現(xiàn)在可以先選擇相對穩(wěn)定的5.x，當(dāng)然如果是嘗鮮的話還是推薦6的，這個版本一旦選擇了，以后就要謹(jǐn)慎更新，最好是寫死不要更新。

如何使用

Babel提供了一個在線的編譯器，方便大家上手體驗，感興趣的同學(xué)請猛戳這里。

真正到項目中我們還是得解構(gòu)構(gòu)建工具來使用，Babel提供了各種構(gòu)建工具的使用方法，可以查看這里。

下面我們主要介紹如何在fis中使用babel。

fis插件

如果你不了解fis可以先猛戳這里進(jìn)行了解，簡單說就是一個前端集成構(gòu)建工具，在fis中我們想使用babel，需要用到下面兩個插件：

fis-parser-babel-5.x
fis-parser-babel-6.x

fis配置

配置這個簡單了，你想用哪個插件都寫得很清楚了，這里就不展開了。

兼容老代碼

我們遇到最大的一個問題就是歷史代碼絕對不能用babel編譯，不然可能各種報錯，這里提供兩種解決這個問題的思路：

.es
.es.js

可以將需要編譯的代碼后綴名設(shè)置為.es，或者.es.js，或者自定義的xxx.js。

優(yōu)點

先來說說Babel的優(yōu)點，Babel可以讓我們現(xiàn)在就是用ES6，如果等著瀏覽器都支持恐怕要到2020年了，甚至現(xiàn)在就能讓我們使用ESnext中的一些特性。

缺點

Babel的缺點也是顯而易見的，比如需要引入編譯流程，對于沒有構(gòu)建工具的團(tuán)隊是一大挑戰(zhàn)，對于已經(jīng)邁入前端工程化的團(tuán)隊也會帶來額外的編譯時間。

同時線上代碼的排錯問題也變得更難了，因為線上都是編譯后的代碼，雖然sourcemap能一定程度上解決這個問題。

Babel作為一個編譯工具，其自身的問題也是不容忽略的，5升級6都是有風(fēng)險的，起穩(wěn)定性和兼容性是最大的問題，遠(yuǎn)沒有g(shù)cc這種工具穩(wěn)定得多。前段時間發(fā)生的left-pad事件對于我們的功能都是有威脅的。

Babel的局限性也是個問題，Babel只能解決語法層面的問題，api相關(guān)的還是需要shim來解決，還有一些是Babel和shim都不能解決的，我們只能坐等瀏覽器更新了，好消息是現(xiàn)在瀏覽器更新速度越來越快了，O(∩_∩)O哈哈~

廣告1

終于來到我喜歡的廣告時間了，如果你想體驗es6，而又自己懶得搭環(huán)境，那么沒關(guān)系我都給你搭好了，你可以適用我的fis3-base，拿來即用的fis3腳手架。

廣告2

如果你原來適用baidutemplate，那么用了es6后，你一定會郁悶的，因為es6會全部是嚴(yán)格模式，而baidutemplate在嚴(yán)格模式下報錯，我推薦你用我的template.js，和baidutemplate 100%兼容，同時支持嚴(yán)格模式。

你可能踩過的坑，我都踩過啦，O(∩_∩)O哈哈~

未來

未來已經(jīng)到來。

精粹

現(xiàn)在的迫切希望能有個ES6語言精粹，因為我偏執(zhí)的認(rèn)為，新特性一定也有糟粕，坐等了，如果沒人動手，我可能會嘗試來做這個事情。

我還想要的是ES的前端子集，ES6有太多東西都是為了Node而生的，并不適合前端，這對于前端工程師學(xué)習(xí)成本還是蠻大的，我希望大家都能用最少的精力，做更多的事情，而不是恰恰相反，特別是對于團(tuán)隊內(nèi)部的普及，這將起到事半功倍的效果，今天的這篇文章中提到的部分，可能就是我認(rèn)為的精粹和前端子集部分。

瀏覽器

目前主流的瀏覽器有chrome，firefox，ie，safari，現(xiàn)在的瀏覽器廠商已經(jīng)達(dá)成一致，沒6周會發(fā)布一個版本，ie6 10年一個版本的時代再也不會有了，ie團(tuán)隊更是激進(jìn)每4周會發(fā)一個大版本。

這讓我看到了js無限的潛能，感覺有些無限演進(jìn)的意思，這個平臺的活力真正還是爆發(fā)了。

我們怎么做

首先需要說明下，我們特指前端FE，babel必不可少，我們可以定制自己的babel插件，然后等那個屬性沒有兼容性問題了就刪掉這個插件。

未來已經(jīng)到來，我們應(yīng)該面向未來。

總結(jié)

堅持看到這里的同學(xué)，我想先給你們一個鼓勵，你們真是棒棒的，我想大家此刻的腦子里可能下下面這幅畫一樣，暈暈的，亂亂的，下面我們就來做個總結(jié)，幫你理理思路。

優(yōu)點

ES6的優(yōu)點非常明顯，總結(jié)起來大概有如下：

官方規(guī)范，趨勢，面向未來，未來會原生支持
代碼變現(xiàn)力更強(qiáng)了，代碼行數(shù)更少
同時開發(fā)效率大大提升
減少對第三方庫的依賴，比如underscore，promise等

缺點

ES6沒有缺點嗎？沒有，但是還是可以總結(jié)出來一些：

ES6很多特性面向node.js，對前端無用
需要我們學(xué)習(xí)新東西，對某些人可能是挑戰(zhàn)
js變得更復(fù)雜了，新人生手難度更大
這么多東西糟粕在所難免，需要去取精華

收益

借用babel在線編輯器提供的例子來看一下收益，實現(xiàn)同樣邏輯功能的代碼ES6是100行，而ES5卻要200行，這收益簡直就是100%啊。

然而我們實際測試發(fā)現(xiàn)并沒有這么完美，實際中大概能節(jié)省30%左右的代碼量（工作量）。

其次更少的意味著邏輯更清晰，可維護(hù)性更好，一個人能完成的工作量也就更多了，哈哈。

開發(fā)時間可以大幅減少，開發(fā)消息大大提升。

為什么

下面我們來說說為什么要學(xué)習(xí)ES6，我想能看到這里的同學(xué)多半是有興趣的，所以我給大家解惑一下，大概可以有一下幾點：

遲早要學(xué)（區(qū)別ts，cs），因為是規(guī)范，所以你遲早要學(xué)的，被動不如主動，晚學(xué)不如早學(xué)，規(guī)范即標(biāo)準(zhǔn)，你遲早要學(xué)
社區(qū)的趨勢，和你團(tuán)隊的趨勢都會想規(guī)范靠攏，目前的瀏覽器也是如此，大趨勢不可違背
ES6的表現(xiàn)力更強(qiáng)，這往往意味著可維護(hù)性更高
學(xué)習(xí)成本很小，相信我只要你用心3天足夠了，塌下心來嘗試一下吧
編程激情，如果你有黑客精神，那么你應(yīng)該學(xué)習(xí)，相信我ES6重新燃起了我編程的激情
如果你也不想加班，那么你該學(xué)習(xí)ES6，他會讓你寫代碼變得更快
面試中的加分項，如果你想在出去面試，ES6會成為你的加分項

做出選擇

下圖出自黑客帝國，neo需要做出選擇，是回到dream world，還是real world，關(guān)鍵是選擇，但關(guān)鍵的關(guān)鍵是做出選擇，用于不用就看你了。

參考資料

http://www.ecma-international.org/ecma-262/6.0/
http://es6.ruanyifeng.com/
http://www.infoq.com/cn/es6-in-depth/
http://es6-features.org/
https://github.com/lukehoban/es6features
https://github.com/es6-org/exploring-es6
http://yanhaijing.com/es5/

問答

悲催的是沒有一個人提問，╮(╯▽╰)╭，連我的托都聽懵逼了。。。

彩蛋

一般來說到這里就該結(jié)束了，但作為一個負(fù)責(zé)人的步道師，我還是給大家準(zhǔn)備了彩蛋。

我的一些開源庫

我寫的小游戲

翻一下
變色方塊
連連看
貪吃蛇
Painter

以上內(nèi)容是否對您有幫助：

← 不可錯過的javascript迷你庫

快來使用ES2015的Promise吧 →

寫筆記

我要補(bǔ)充

ES2015實戰(zhàn)——面向未來編程

開場

道歉

關(guān)于我

我的前端啟蒙

我的前端啟蒙書

我的處女作

我的前端路

歷史

網(wǎng)景

Mozilla

JS之父

JS進(jìn)化史

ES&JS

方言

TC39

TC39流程

ECMA262 狀態(tài)

問題

新特性

有哪些

ES規(guī)范

模塊系統(tǒng)

推薦特性

字符串

解構(gòu)

對象

Spread

函數(shù)

Class

Promise

其他

實戰(zhàn)

ES5

兼容性

我為什么支持/抵制ES6

編譯器/轉(zhuǎn)換器/編碼器

無處不在的編譯器

轉(zhuǎn)換器

Babel

Babel 5vs6

如何使用

fis插件

fis配置

兼容老代碼

推薦規(guī)范

優(yōu)點

缺點

廣告1

廣告2

未來

更多ES規(guī)范

精粹

瀏覽器

我們怎么做

總結(jié)

優(yōu)點

缺點

收益

為什么

做出選擇

參考資料

相關(guān)資料

問答

彩蛋

值得關(guān)注的項目

我的一些開源庫

我寫的小游戲