04 September 2015
号外号外:专注于移动端的fullPage.js来啦!!!快点我查看

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。标准的制定者有计划,以后每年发布一次标准,使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015

如果你还不知道ECMAScript,那么你有可能知道javascript,那么可自行查询js和es的关系,如果你也不知道javascript可以忽略这篇文章了。

ES6ES5.1的下一个版本,和ES5不一样,ES6的改动非常大,而且无法用shim脚本兼容陈旧的浏览器,我一开始认为这是有违web理论的,web得以繁荣昌盛,得益其强大的兼容性,HTML5的理念也是向后兼容,css3的理念也是向后兼容,我一直认为ES6会步ES4的后尘,就像xhtml2.0的结局一样。

直到我遇见了babel,transpiler 的理念真是太棒了,当我蓦然回首,发现自己早已深处工程化前端之列,预编译已经融入到工作中了,如果你还处在前端的蛮荒时代(没有编译流程),那么可以先考虑引入工程化流程,再来接触ES6,目前比较流行的有gruntgulpwebpack等。当然如果是node的话,那就没什么压力了。

babel支持的平台非常多,可以参看这里,点击相应平台,下面会给出使用的例子。

至此我真的想说,前端朋友们,是时候使用ES6了,大胆尝试吧,真的非常棒。

本文将介绍在fis中借助babel使用ES6的过程,包括环境搭建,基本语法,模块系统,优秀特性等。

环境搭建

作为前端开发者,我非常幸运能使用fis这么高大上的工具,fis在前不久刚刚发布了fis3,我们用的还是fis2,作为国产工具最大的杯具就是babel不提供默认支持,好的方面是fis团队已经开发出了插件支持——fis-parser-babel-5.x

借助这个插件就搞定了编译问题,先来说说我的思路吧,我只希望给固定的js引入编译过程,我的思路是这样的,后缀为.es或.es.js的文件才引入编译流程,这样就可以共存了。

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

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

babel会将es6代码编译为es5代码,所以其代码需要在支持es5语法的浏览器里运行,如果你支持的浏览器都是现代浏览器可以忽略这个问题,如果你要兼容一些陈旧浏览器,比如ie8那么我建议使用es5-shim,需要引入es5-shim.js和es5-sham.js。

很多编辑器其实还不支持es6的语法,我使用的编辑器是sublime,借助JavaScriptNext - ES6 Syntax这个插件,可以让sublime支持es6语法。

如果你的编辑器没有类似的功能,那么推荐你用subliem吧,我总结了一些使用subliem的经验,推荐给你《我的 Sublime Text 2 笔记》。

基本语法

ES6带来了很多新的语法,参考资料里面列举了一些资料可以参考,我看的是阮一峰老师的ECMAScript 6 入门,新知识点还是蛮多的,边扫语法边实验,看看babel编译完的es5语法是什么样子,我建议你也这么做,这样效率极高,而且能知道babel干了些什么。

babel有一个try is out,可以时时预览原语法和编译后的语法。本文下面的部分就将用这个作为演示系统。

需要注意的是babel并不支持全部的es6语法,有些并没有实现,babel首页有个清单,babel还不止支持es6,还支持部分es7的语法。

模块系统

先来说说模块系统吧,如果你还未使用模块开发(AMD OR CMD),那可以跳过这个章节,或者看看我的另一篇文章《JavaScript模块的前世今生》,了解下javascript模块的历史,ES6的模块系统和现有模块系统是兼容的,也就是说你既可以在AMD中引用ES6中的模块,也可以在ES6中引用AMD中的模块。

在ES6模块系统中,引用其他模块系统可以用下面的代码:

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默认使用的模块系统是commonjs,上面编译完的代码就是commonjs的代码。

再来看看如何导出能被其他模块系统引用的模块。

var $ = '';

export default $;

上面的代码,导出了默认导出模块,下面看看babel编译的结果:

'use strict';

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

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

编译完还是符合commonjs规范的模块。好了对于其他导入和导出已发,不妨自己试试吧。

注意:babel编译完的代码会好使用严格模式。

关于模块的更多细节可以参考这里:

优秀特性

模块系统介绍完了,来看看ES6中一些其他优秀特性,babel并未对ES6的全部语法提供支持,下面我列举一些自己认为优秀的特性,并可立即使用的特性列举出来。

字符串

动态字符串使用反引号。并且支持模块变量和多行模式。

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

// babel编译完的代码
"yanhaijing " + abc;

后面只列举源码,babel编译完的结构可自行查看。

解构赋值

使用数组和对象成员对变量赋值,优先使用解构赋值。

// 数组结构赋值
var arr = [1, 2, 3, 4];
var [first, second] = arr;

// 对象结构赋值
var obj = {a: 1, b: 2};
var {a, b} = obj;

对象

ES6扩展了对象字面量的语法。

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

数组

使用扩展运算符(…)拷贝数组。

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

函数

箭头函数:

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

不要在函数体内使用arguments变量,使用rest运算符(…)代替:

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

使用默认值语法设置函数参数的默认值:

function f(a = 1) {}

Class

总是用class,取代需要prototype操作。因为class的写法更简洁,更易于理解

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

更多优秀特性,请参看这里

总结

好了这就是本文的全部内容了,读完本文按捺不住心中的小激动就快快来适用吧,es6真的很棒,babel非常重要,ES6还有很多特性等待你去挖掘哦,另外babel也有很多功能,你自己去发现吧。

如果你有什么疑问或建议在评论区和我一起讨论吧。

参考资料

原文网址:http://yanhaijing.com/javascript/2015/09/04/try-es2015/

欢迎订阅我的微信公众帐号,只推送原创文字。扫码或搜索:颜海镜
微信公众号:颜海镜


暂无评论,抢沙发!!!