ES6(ECMAScript2015)的出現,無疑給前端開發(fā)人員帶來了新的驚喜,它包含了一些很棒的新特性逝段,可以更加方便的實現很多復雜的操作,提高開發(fā)人員的效率割捅。
在ES5中奶躯,你可以在中直接寫可以運行的代碼(簡稱IIFE),或者一些庫像AMD亿驾。然而在ES6中嘹黔,你可以用export導入你的類。下面舉個例子莫瞬,在ES5中,module.js有port變量和getAccounts 方法:
module.exports?=?{??port:3000,??getAccounts:function(){????...??}}
在ES5中儡蔓,main.js需要依賴require(‘module’) 導入module.js:
varservice?=require('module.js');console.log(service.port);//?3000
但在ES6中醉锄,我們將用export and import。例如浙值,這是我們用ES6 寫的module.js文件庫:
exportvarport?=3000;exportfunctiongetAccounts(url){??...}
如果用ES6來導入到文件main.js中恳不,我們需用import {name} from ‘my-module’語法,例如:
import{port,?getAccounts}from'module';console.log(port);//?3000
或者我們可以在main.js中把整個模塊導入, 并命名為 service:
import*asservicefrom'module';console.log(service.port);//?3000
從我個人角度來說开呐,我覺得ES6模塊是讓人困惑的烟勋。但可以肯定的事,它們使語言更加靈活了筐付。
并不是所有的瀏覽器都支持ES6模塊卵惦,所以你需要使用一些像jspm去支持ES6模塊。
更多的信息和例子關于ES6模塊瓦戚,請看this text不管怎樣沮尿,請寫模塊化的JavaScript。
如何使用ES6 (Babel)
ES6已經敲定较解,但并不是所有的瀏覽器都完全支持畜疾,詳見:http://kangax.github.io/compat-table/es6/。要使用ES6印衔,需要一個編譯器例如:babel啡捶。你可以把它作為一個獨立的工具使用,也可以把它放在構建中奸焙。grunt瞎暑,gulp和webpack中都有可以支持babel的插件。
這是一個gulp案列与帆,安裝gulp-babel插件:
$?npm?install?--save-dev?gulp-babel
在gulpfile.js中了赌,定義一個任務build,放入src/app.js玄糟,并且編譯它進入構建文件中勿她。
vargulp?=require('gulp'),??babel?=require('gulp-babel');gulp.task('build',function(){returngulp.src('src/app.js')????.pipe(babel())????.pipe(gulp.dest('build'));})
Node.js and ES6
在nodejs中,你可以用構建工具或者獨立的Babel模塊 babel-core 來編譯你的Node.js文件茶凳。安裝如下:
$?npm?install?--save-dev?babel-core
然后在node.js中嫂拴,你可以調用這個函數:
require("babel-core").transform(ES5Code,?options);
ES6總結
這里還有許多ES6的其它特性你可能會使用到播揪,排名不分先后:
1贮喧、全新的Math, Number, String, Array 和 Object 方法
2、二進制和八進制數據類型
3猪狈、默認參數不定參數擴展運算符
4箱沦、Symbols符號
5、tail調用
6雇庙、Generators (生成器)
7谓形、New data structures like Map and Set(新的數據構造對像MAP和set)
參考文獻:
http://webapplog.com/ES6/comment-page-1/
Understanding ECMAScript 6?by Nicolas Zakas book
http://ES6-features.org/#DateTimeFormatting
IIFE:立刻運行的函數表達式