歡迎光臨
每天分享高質量文章

是時候使用ES 2015了

作者:AlloyTeam

網址:http://www.alloyteam.com/2015/08/its-time-to-use-es2015/

在Web中使用ES 2015

想要在瀏覽器端使用ES 2015最新語法,其實很簡單,只需要一個轉換器即可,Babel是ES 2015最流行的轉換器之一,Babel加上各種插件和polyfill能基本上支持絕大部分新語法。

在你的構建中,插入一步使用Babel將ES 2015的代碼轉換成完全兼容ES5的代碼的任務,你甚至都不必瞭解Babel的具體用法,就可以爽爽的開始寫ES 2015代碼了。

使用gulp-babel在需要的地方轉換一下即可。

var gulp = require(‘gulp’);

var babel = require(‘gulp-babel’);

gulp.task(‘babel’, function () {

return gulp.src(‘src/js/*.js’)

.pipe(babel())

.pipe(gulp.dest(‘dist’));

});

筆者在實際生產中已使用到一些ES 2015新特性,通過Babel轉換成完全兼容ES5的語法,然後發佈到正式環境,大大提高了開發體驗。下麵將一部分使用的較多,能改善編碼體驗的點列出來,當然也有一些坑,希望讀者能儘早熟悉儘早投入ES 2015的懷抱。

最基本的:let和const

let a = 1;

const A = 2;

轉換成

var a = 1;

var A = 2;

Babel只是單純將let和const轉換成了var,並沒有真正實現塊作用域和常量的功能,也沒有消除變數提升的問題,這樣避免了引入一些額外的代碼,而且也已經完全與ES5兼容了。

模板字串

const name = ‘Jarvis’;

const template = `My name is ${name}`;

轉換成

var name = ‘Jarvis’;

var template = ‘My name is ‘ + name;

模板字串(兩個反丿號)是ES 2015的一個重要的新功能,允許模板字串裡面通過${variable}的方式直接嵌變數,可以替代老舊的字串拼接方法,而且裡面可以任意使用單雙引號。

這個改進很實用,現在就可以用起來了,再也不用擔心單雙引號誰該寫在誰的外面了。

模板字串還直接支持多行文本,如:

const tmpl = `text line 1,

text line 2,

textline 3`;

在拼接html的時候特別有用。

箭頭函式

箭頭函式語法:

const fn = () => {

console.log(‘hello world’);

};

轉換成

var fn = function() {

console.log(‘hello world’);

};

箭頭函式通常比匿名函式還要簡潔,幾乎可以取代所有使用function的地方,不過用起來別太嗨了,下麵有這個坑還是值得註意。

箭頭函式最大的特點在於this關鍵字在宣告或者定義箭頭函式的時候就已經被系結好了,而且不會改變,這個特性用來解決setTimeout等一些異步函式this會改變的問題很爽,但下麵這個卻是個大問題:

$(‘#selector’).on(‘tap’, () => {

$(this).addClass(‘new’);

});

將會轉換成

var _this = this;

$(‘#selector’).on(‘tap’, function() {

$(_this).addClass(‘new’);

});

看出問題了吧,相當於箭頭函式是在事件監聽器外面就先定義好了,這時候的this指向的全域性變數,並非我們期望中的那個dom元素。

這時候就不適合用箭頭函式了,除非你明確知道this指向的誰或者根本用不上this。

…args

我在前面的文章介紹過V8新的Strong Mode已經不允許使用arguments關鍵字了,取而代之是…args。

function (…args) {

console.log(args);

}

這裡的args是個真正的陣列了,使用到arguments的地方推薦都換成…args吧,還能避免一些意想不到的坑,比如下麵這個。

箭頭函式裡面是獲取不到argunents變數的,如果你這樣寫

const fn = () => {

console.log(arguments);

};

將被轉換成

var _arguments = arguments;

var fn = function() {

console.log(_arguments);

};

這時候的arguments映射的是外層函式的arguments,如果使用…args就不會有這個問題。

預設引數

預設函式引數我想用處非常大了,從此再也不用寫一大堆引數判斷的代碼了。

function fn(params = {}, options = {}, callback = () => {}) {

// TODO

}

再也不用去費力判斷哪一個引數才是callback了。 Babel已經完全支持預設引數一些強大的語法,如

function f([x, y] = [1, 2], {z: z} = {z: 3}) {

return x + y + z;

}

物件屬性縮寫

const url = ‘http://www.alloyteam.com’;

const type = ‘GET’;

const timeout = 10000;

$.ajax({

url, type, timeout

});

轉換成

var url = ‘http://www.alloyteam.com’;

var type = ‘GET’;

var timeout = 10000;

$.ajax({

url: url,

type: type,

timeout: timeout

});

屬性縮寫還可與解構賦值搭配使用

// options: {url: url, type: type, timeout: timeout}

const {url, type} = options;

const opt = {url, type};

這樣輕鬆就能讓opt成為options的一個子集了,在做欄位過濾和引數白名單過濾的時候很有用。

好了,時間已經很晚了,本期就先寫到這裡了。

赞(0)

分享創造快樂