ES6模塊化export和import怎么導(dǎo)出

這篇文章主要介紹“ES6模塊化export和import怎么導(dǎo)出”，在日常操作中，相信很多人在ES6模塊化export和import怎么導(dǎo)出問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”ES6模塊化export和import怎么導(dǎo)出”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

Promise

Promise/A+規(guī)范, 規(guī)定Promise對(duì)象是一個(gè)有限狀態(tài)機(jī)。它有三個(gè)狀態(tài)：

pending（執(zhí)行中）

Resolved（已完成）

Rejected（已失敗）

其中pending為初始狀態(tài)，Resolved和rejected為結(jié)束狀態(tài)（表示promise的生命周期已結(jié)束）。

使用兩個(gè)then是異步編程串行化，避免了恐怖的回調(diào)：

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"    });

模塊化export和import

ES6中使用export與import關(guān)鍵詞實(shí)現(xiàn)模塊化。

export用于對(duì)外輸出本模塊變量的接口（一般一個(gè)文件可以作為一個(gè)模塊）； import則用于在一個(gè)模塊中加載另一個(gè)含有export接口的模塊。

導(dǎo)出模塊文件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 }

模塊導(dǎo)出了兩個(gè)對(duì)象：Human類和walk函數(shù)，能被其他文件使用。而play函數(shù)沒(méi)有導(dǎo)出，為此模塊私有，不能被其他文件使用。

然后再main.js導(dǎo)入app.js模塊。

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

我們可以使用關(guān)鍵字default，可將對(duì)象標(biāo)注為default對(duì)象導(dǎo)出。default關(guān)鍵字在每一個(gè)模塊中只能使用一次。

... //類，函數(shù)等 export default App;

在main.js導(dǎo)入app.js模塊

import App from 'app.js';

ES6轉(zhuǎn)碼器: Babel

由于目前并不是所有的瀏覽器都能兼容ES6的全部特性，所以需要將ES6代碼轉(zhuǎn)為ES5代碼，才可以在現(xiàn)有的環(huán)境中執(zhí)行。而B(niǎo)abel是一個(gè)廣泛使用的ES6轉(zhuǎn)碼器。

我們可以在本地環(huán)境中安裝Babale命令行環(huán)境。

安裝和使用babel：

//1.安裝babel-cli（用于在終端使用babel） npm install -g babel-cli //

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

3.在當(dāng)前目錄下建立文件.babelrc，接著在文件中寫(xiě)入： { 　"presets": ['es2015'] } //

4.命令行使用實(shí)例：將es

5.js轉(zhuǎn)換后輸出到es5.js文件中 babel es6.js -o es5.js

到此，關(guān)于“ES6模塊化export和import怎么導(dǎo)出”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！