你经常会用到的ES6核心知识(下)

helloweba.com 作者:月光光 时间:2017年09月19日 20:01 标签: ES6  javascript 

上篇文章我们主要介绍了ES6的6个主要特性,本文将继续学习第二部分的两个特性Promise和模块导入导出,并且在最后还给大家介绍如何使用Babel工具将ES6代码转换成ES5格式代码。

7.Promise

Promise/A+规范, 规定Promise对象是一个有限状态机。它有三个状态:

pending(执行中)

Resolved(已完成)

Rejected(已失败)

其中pending为初始状态,Resolved和rejected为结束状态(表示promise的生命周期已结束)。

使用两个then是异步编程串行化,避免了恐怖的回调:


var wait1000 = new Promise(function(resolve, reject)
{
    setTimeout(resolve, 1000);
});

wait1000
    .then(function()
    {
        console.log("Hello"); // 1秒后输出"Hello"
        return wait1000;
    })
    .then(function()
    {
        console.log("Fundebug"); // 2秒后输出"Fundebug"
    });

8.模块化export和import

ES6中使用export与import关键词实现模块化。

export用于对外输出本模块变量的接口(一般一个文件可以作为一个模块); import则用于在一个模块中加载另一个含有export接口的模块。

导出模块文件app.js:


class Human{
    constructor(name) {
        this.name = name;
    }
    sleep() {
        console.log(this.name + " is sleeping");
    }
}
function walk() {
    console.log('i am walking');
}
function play() {
    console.log('i am playing');
}
export { Human, walk }

模块导出了两个对象:Human类和walk函数,能被其他文件使用。而play函数没有导出,为此模块私有,不能被其他文件使用。

然后再main.js导入app.js模块。


import { Human, walk } from 'app.js';

我们可以使用关键字default,可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。


... //类,函数等
export default App;

在main.js导入app.js模块


import App from 'app.js';

ES6转码器: Babel

由于目前并不是所有的浏览器都能兼容ES6的全部特性,所以需要将ES6代码转为ES5代码,才可以在现有的环境中执行。而Babel是一个广泛使用的ES6转码器。

首先,我告诉大家可以使用Babel在线转换 https://babeljs.io/repl/

其次,我们可以在本地环境中安装Babale命令行环境。

安装和使用babel:


//1.安装babel-cli(用于在终端使用babel)
npm install -g babel-cli

//2.安装babel-preset-es2015插件
npm install --save babel-preset-es2015

//3.在当前目录下建立文件.babelrc,接着在文件中写入:
{
 "presets": ['es2015']
}
//4.命令行使用实例:将es6.js转换后输出到es5.js文件中
babel es6.js -o es5.js

其实,我们基于一些前端框架的开发环境如Vue等,他们脚手架工具都带有类似babel的工具了,如果你用了vue这样的框架,只管写ES6代码,不用担心转换问题了。

总结

目前ES2017(ES8)也出来了,天啦,ES6还没搞完呢,但是我们不难发现,ES7\ES8也好,他们都是在ES6标准的基础上再作文章,所以先老老实实学好ES6,掌握好ES6的语法特性。

参考链接:

ECMAScript 6 入门: http://es6.ruanyifeng.com/

babel官网:http://babeljs.io/

声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于♕千赢国际娱乐_千赢国际娱乐网址_千赢国际娱乐官网并保留原文链接:/view-blog-440.html

0条评论

顶部 反馈 二维码 底部
扫一扫

扫描二维码用手机看文章