ES6(ECMAScript2015)的出現,無疑給前端開發人員帶來了新的驚喜,它包含了一些很棒的新特性,可以更加方便的實現很多復雜的操作,提高開發人員的效率。
在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:立刻運行的函數表達式