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)
参考文献:
ES6 Cheatsheet(FREE PDF)
http://webapplog.com/ES6/comment-page-1/
Understanding ECMAScript 6 by Nicolas Zakas book
http://ES6-features.org/#DateTimeFormatting
IIFE:立刻运行的函数表达式