快来使用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也有很多功能,你自己去发现吧。

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

参考资料

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有着作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog? ? 快来使用ECMAScript 2015吧

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址