快來(lái)使用ECMAScript 2015吧

2018-06-16 20:30 更新

ECMAScript 6(以下簡(jiǎn)稱ES6)是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn),已經(jīng)在2015年6月正式發(fā)布了。標(biāo)準(zhǔn)的制定者有計(jì)劃,以后每年發(fā)布一次標(biāo)準(zhǔn),使用年份作為標(biāo)準(zhǔn)的版本。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的,所以又稱ECMAScript 2015。

如果你還不知道ECMAScript,那么你有可能知道javascript,那么可自行查詢js和es的關(guān)系,如果你也不知道javascript可以忽略這篇文章了。

ES6ES5.1的下一個(gè)版本,和ES5不一樣,ES6的改動(dòng)非常大,而且無(wú)法用shim腳本兼容陳舊的瀏覽器,我一開始認(rèn)為這是有違web理論的,web得以繁榮昌盛,得益其強(qiáng)大的兼容性,HTML5的理念也是向后兼容,css3的理念也是向后兼容,我一直認(rèn)為ES6會(huì)步ES4的后塵,就像xhtml2.0的結(jié)局一樣。

直到我遇見了babel,transpiler 的理念真是太棒了,當(dāng)我驀然回首,發(fā)現(xiàn)自己早已深處工程化前端之列,預(yù)編譯已經(jīng)融入到工作中了,如果你還處在前端的蠻荒時(shí)代(沒有編譯流程),那么可以先考慮引入工程化流程,再來(lái)接觸ES6,目前比較流行的有gruntgulp,webpack等。當(dāng)然如果是node的話,那就沒什么壓力了。

babel支持的平臺(tái)非常多,可以參看這里,點(diǎn)擊相應(yīng)平臺(tái),下面會(huì)給出使用的例子。

至此我真的想說(shuō),前端朋友們,是時(shí)候使用ES6了,大膽嘗試吧,真的非常棒。

本文將介紹在fis中借助babel使用ES6的過(guò)程,包括環(huán)境搭建,基本語(yǔ)法,模塊系統(tǒng),優(yōu)秀特性等。

環(huán)境搭建

作為前端開發(fā)者,我非常幸運(yùn)能使用fis這么高大上的工具,fis在前不久剛剛發(fā)布了fis3,我們用的還是fis2,作為國(guó)產(chǎn)工具最大的杯具就是babel不提供默認(rèn)支持,好的方面是fis團(tuán)隊(duì)已經(jīng)開發(fā)出了插件支持——fis-parser-babel-5.x。

借助這個(gè)插件就搞定了編譯問(wèn)題,先來(lái)說(shuō)說(shuō)我的思路吧,我只希望給固定的js引入編譯過(guò)程,我的思路是這樣的,后綴為.es或.es.js的文件才引入編譯流程,這樣就可以共存了。

test.js // 普通js文件
test.es // es文件
test.es.js //es文件

我使用的是fis2,配置的js也非常容易,所以在此就不列舉了。

babel會(huì)將es6代碼編譯為es5代碼,所以其代碼需要在支持es5語(yǔ)法的瀏覽器里運(yùn)行,如果你支持的瀏覽器都是現(xiàn)代瀏覽器可以忽略這個(gè)問(wèn)題,如果你要兼容一些陳舊瀏覽器,比如ie8那么我建議使用es5-shim,需要引入es5-shim.js和es5-sham.js。

很多編輯器其實(shí)還不支持es6的語(yǔ)法,我使用的編輯器是sublime,借助JavaScriptNext - ES6 Syntax這個(gè)插件,可以讓sublime支持es6語(yǔ)法。

如果你的編輯器沒有類似的功能,那么推薦你用subliem吧,我總結(jié)了一些使用subliem的經(jīng)驗(yàn),推薦給你《我的 Sublime Text 2 筆記》。

基本語(yǔ)法

ES6帶來(lái)了很多新的語(yǔ)法,參考資料里面列舉了一些資料可以參考,我看的是阮一峰老師的ECMAScript 6 入門,新知識(shí)點(diǎn)還是蠻多的,邊掃語(yǔ)法邊實(shí)驗(yàn),看看babel編譯完的es5語(yǔ)法是什么樣子,我建議你也這么做,這樣效率極高,而且能知道babel干了些什么。

babel有一個(gè)try is out,可以時(shí)時(shí)預(yù)覽原語(yǔ)法和編譯后的語(yǔ)法。本文下面的部分就將用這個(gè)作為演示系統(tǒng)。

需要注意的是babel并不支持全部的es6語(yǔ)法,有些并沒有實(shí)現(xiàn),babel首頁(yè)有個(gè)清單,babel還不止支持es6,還支持部分es7的語(yǔ)法。

模塊系統(tǒng)

先來(lái)說(shuō)說(shuō)模塊系統(tǒng)吧,如果你還未使用模塊開發(fā)(AMD OR CMD),那可以跳過(guò)這個(gè)章節(jié),或者看看我的另一篇文章《JavaScript模塊的前世今生》,了解下javascript模塊的歷史,ES6的模塊系統(tǒng)和現(xiàn)有模塊系統(tǒng)是兼容的,也就是說(shuō)你既可以在AMD中引用ES6中的模塊,也可以在ES6中引用AMD中的模塊。

在ES6模塊系統(tǒng)中,引用其他模塊系統(tǒng)可以用下面的代碼:

import $ from 'jquery.js';
$('#test');

babel編譯完的代碼如下:

'use strict';

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _jqueryJs = require('jquery.js');

var _jqueryJs2 = _interopRequireDefault(_jqueryJs);

(0, _jqueryJs2['default'])('#test');

babel默認(rèn)使用的模塊系統(tǒng)是commonjs,上面編譯完的代碼就是commonjs的代碼。

再來(lái)看看如何導(dǎo)出能被其他模塊系統(tǒng)引用的模塊。

var $ = '';

export default $;

上面的代碼,導(dǎo)出了默認(rèn)導(dǎo)出模塊,下面看看babel編譯的結(jié)果:

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});
var $ = '';

exports['default'] = $;
module.exports = exports['default'];

編譯完還是符合commonjs規(guī)范的模塊。好了對(duì)于其他導(dǎo)入和導(dǎo)出已發(fā),不妨自己試試吧。

注意:babel編譯完的代碼會(huì)好使用嚴(yán)格模式。

關(guān)于模塊的更多細(xì)節(jié)可以參考這里:

優(yōu)秀特性

模塊系統(tǒng)介紹完了,來(lái)看看ES6中一些其他優(yōu)秀特性,babel并未對(duì)ES6的全部語(yǔ)法提供支持,下面我列舉一些自己認(rèn)為優(yōu)秀的特性,并可立即使用的特性列舉出來(lái)。

字符串

動(dòng)態(tài)字符串使用反引號(hào)。并且支持模塊變量和多行模式。

// 源碼
`yanhaijing ${abc}`;

// babel編譯完的代碼
"yanhaijing " + abc;

后面只列舉源碼,babel編譯完的結(jié)構(gòu)可自行查看。

解構(gòu)賦值

使用數(shù)組和對(duì)象成員對(duì)變量賦值,優(yōu)先使用解構(gòu)賦值。

// 數(shù)組結(jié)構(gòu)賦值
var arr = [1, 2, 3, 4];
var [first, second] = arr;

// 對(duì)象結(jié)構(gòu)賦值
var obj = {a: 1, b: 2};
var {a, b} = obj;

對(duì)象

ES6擴(kuò)展了對(duì)象字面量的語(yǔ)法。

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

數(shù)組

使用擴(kuò)展運(yùn)算符(…)拷貝數(shù)組。

var arr1 = [1, 2, 3];
var arr2 = [...arr1];

函數(shù)

箭頭函數(shù):

(() => {
  console.log('Welcome to the Internet.');
})();

不要在函數(shù)體內(nèi)使用arguments變量,使用rest運(yùn)算符(…)代替:

function concatenateAll(...args) {
  return args.join('');
}

使用默認(rèn)值語(yǔ)法設(shè)置函數(shù)參數(shù)的默認(rèn)值:

function f(a = 1) {}

Class

總是用class,取代需要prototype操作。因?yàn)閏lass的寫法更簡(jiǎn)潔,更易于理解

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

更多優(yōu)秀特性,請(qǐng)參看這里。

總結(jié)

好了這就是本文的全部?jī)?nèi)容了,讀完本文按捺不住心中的小激動(dòng)就快快來(lái)適用吧,es6真的很棒,babel非常重要,ES6還有很多特性等待你去挖掘哦,另外babel也有很多功能,你自己去發(fā)現(xiàn)吧。

如果你有什么疑問(wèn)或建議在評(píng)論區(qū)和我一起討論吧。

參考資料

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)