转载

快来使用ECMAScript 2015吧

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

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

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

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

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

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

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

环境搭建

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

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

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

我使用的是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 的模块系统

优秀特性

模块系统介绍完了，来看看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也有很多功能，你自己去发现吧。

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

参考资料

正文到此结束

所属分类：编程技术

本文标签： web HTML5 参数 java js CSS REST struct 开发者插件 ip UI value node jquery parse cmd 配置 HTML 源码 cat CTO 总结编译压力代码开发
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

快来使用ECMAScript 2015吧

环境搭建

基本语法

模块系统

优秀特性

字符串

解构赋值

对象

数组

函数

Class

总结

参考资料

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流