成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6學(xué)習(xí)筆記之模塊

Airmusic / 2748人閱讀

摘要：但是一直沒有在語言層面支持模塊，直到的出現(xiàn)。相信在不久的將來，的模塊一定會(huì)全面取代和。的模塊提供了個(gè)新的語法，分別是和。就是模塊用來對(duì)外暴露數(shù)據(jù)的接口，具體用法如下。

本文同步自我得博客：http://www.joeray61.com

簡(jiǎn)介

在當(dāng)今的Javascript程序中，模塊的作用不言而喻，目前廣泛應(yīng)用的主要有AMD（瀏覽器端）和CommonJS（服務(wù)器端）。但是Javascript一直沒有在語言層面支持模塊，直到ES6的出現(xiàn)。相信在不久的將來，ES6的模塊一定會(huì)全面取代AMD和CommonJS。

export

ES6的模塊提供了2個(gè)新的語法，分別是export和import。export就是模塊用來對(duì)外暴露數(shù)據(jù)的接口，具體用法如下。

export let a = 1;
export class A {};
export let b = () => {};

輸出多個(gè)數(shù)據(jù)時(shí)不必分別export，可以用一個(gè)export統(tǒng)一輸出

let a = 1;
class A {};
let b = () => {};
export {a, A, b};
import

與export對(duì)應(yīng)，import就是ES6的模塊用來引入數(shù)據(jù)的命令。

我們先來建立一個(gè)數(shù)據(jù)數(shù)據(jù)的文件a.js:

// a.js
let a = 1;
export {a};

然后再創(chuàng)建一個(gè)b.js用來導(dǎo)入a.js暴露的數(shù)據(jù)

// b.js
import {a} from "./a";
console.log(a);    // 1

如果要導(dǎo)入的模塊暴露了很多變量，而你又不想一個(gè)一個(gè)地去寫要import的數(shù)據(jù)時(shí)，可以使用*

// b.js
import * as obj from "./a";
console.log(obj.a);    // 1

需要注意的是，import使用的變量名必須跟export使用的變量名一致

rename

import和export的時(shí)候都是可以對(duì)變量進(jìn)行重命名的

// a.js，用于export變量a，但是導(dǎo)出時(shí)將a改名為aa
let a = 1;
export {a as aa};

// b.js用于import從a.js導(dǎo)出的數(shù)據(jù)aa，但是在導(dǎo)入時(shí)將aa改名為b
import {aa as b} from "./a";
console.log(a);   // undefined
console.log(aa);  // undefined
console.log(b);   // 1
default

export時(shí)可以指定要默認(rèn)導(dǎo)出的數(shù)據(jù)

// a.js
let a = 1;
let aa = 2;
export default a;
export {aa};
// 也可以寫成
export {a as default, aa};

導(dǎo)入默認(rèn)數(shù)據(jù)時(shí)需要這樣寫：

// b.js
import x from "./a";
console.log(x);  // 1

細(xì)心的同學(xué)可能發(fā)現(xiàn)了，這里import的時(shí)候使用的變量名是x，這就是default的特權(quán)了，導(dǎo)入時(shí)使用的變量名可以隨便取，不需要跟導(dǎo)出時(shí)的變量名一致。

另外，如果同時(shí)要導(dǎo)入default和其他數(shù)據(jù)時(shí)該怎么寫呢？

// b.js
import x, {aa} from "./a";
console.log(x);    // 1
console.log(aa);   // 2
ES6模塊加載實(shí)質(zhì)

CommonJS加載模塊時(shí)，加載的是值的副本，而ES6的模塊加載，加載的是值的引用。還是直接上代碼吧

// lib.js
export let x = 1;
export let changeX = () => {
    x++;
};

// a.js
import {x, changeX} from "./lib";
changeX();
console.log(x);

// b.js
import {x, changeX} from "./lib";
changeX();
console.log(x);

// index.js
import "./a";
import "./b";

執(zhí)行index.js輸出的值是2和3，這就說明a.js和b.js執(zhí)行的時(shí)候改變的都是lib.js里的x，而不是各自操作了一份副本

注意點(diǎn)

ES6的模塊采用嚴(yán)格模式，無論你是否申明use strict;

import具有提升效果，即使寫在文件的后面，也會(huì)被提到頭部首先執(zhí)行

本文為學(xué)習(xí)過程中整理，如有問題歡迎交流~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79803.html

相關(guān)文章

  • 2017-07-07 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選了解中的全局對(duì)象和全局作用域張?chǎng)涡聆慰臻g鑫生活子進(jìn)程你應(yīng)該知道的一切直出內(nèi)存泄露問題的追查實(shí)踐我他喵的到底要怎樣才能在生產(chǎn)環(huán)境中用上模塊化騰訊前端大會(huì)大咖說大咖干貨，不再錯(cuò)過發(fā)布發(fā)布中文翻譯在使用進(jìn)行本地開發(fā)代碼 2017-07-07 前端日?qǐng)?bào) 精選 了解JS中的全局對(duì)象window.self和全局作用域self ? 張?chǎng)涡?鑫空間-鑫生活Node.js 子進(jìn)程：你應(yīng)該知道...

    import. 評(píng)論0 收藏0

  • angularV4+學(xué)習(xí)筆記

    摘要：注解的元數(shù)據(jù)選擇器頁(yè)面渲染時(shí)，組件匹配的選擇器使用方式采用標(biāo)簽的方式。當(dāng)然必要的，在需要用到的的模塊中引入引入的指令，放在聲明里面引入的模塊引導(dǎo)應(yīng)用的根組件關(guān)于的元數(shù)據(jù)還未完全，所以后面會(huì)繼續(xù)完善。 angular學(xué)習(xí)筆記之組件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1組件注解 @Component注解，對(duì)組件進(jìn)行配置。 1....

    galaxy_robot 評(píng)論0 收藏0

  • angularV4+學(xué)習(xí)筆記

    摘要：注解的元數(shù)據(jù)選擇器頁(yè)面渲染時(shí)，組件匹配的選擇器使用方式采用標(biāo)簽的方式。當(dāng)然必要的，在需要用到的的模塊中引入引入的指令，放在聲明里面引入的模塊引導(dǎo)應(yīng)用的根組件關(guān)于的元數(shù)據(jù)還未完全，所以后面會(huì)繼續(xù)完善。 angular學(xué)習(xí)筆記之組件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1組件注解 @Component注解，對(duì)組件進(jìn)行配置。 1....

    LoftySoul 評(píng)論0 收藏0

  • 正則表達(dá)式

    摘要：最全正則表達(dá)式總結(jié)驗(yàn)證號(hào)手機(jī)號(hào)中文郵編身份證地址等是正則表達(dá)式的縮寫，作用是對(duì)字符串執(zhí)行模式匹配。學(xué)習(xí)目標(biāo)了解正則表達(dá)式語法在中使用正則表達(dá)式在中使 JS高級(jí)技巧 本篇是看的《JS高級(jí)程序設(shè)計(jì)》第23章《高級(jí)技巧》做的讀書分享。本篇按照書里的思路根據(jù)自己的理解和經(jīng)驗(yàn)，進(jìn)行擴(kuò)展延伸，同時(shí)指出書里的一些問題。將會(huì)討論安全的類型檢測(cè)、惰性載入函數(shù)、凍結(jié)對(duì)象、定時(shí)器等話題。1. 安全的類型檢測(cè)...

    yibinnn 評(píng)論0 收藏0

  • es6學(xué)習(xí)筆記-頂層對(duì)象_v1.0_byKL

    摘要：學(xué)習(xí)筆記頂層對(duì)象雖然是筆記但是基本是抄了一次大師的文章了頂層對(duì)象頂層對(duì)象，在瀏覽器環(huán)境指的是對(duì)象，在指的是對(duì)象。之中，頂層對(duì)象的屬性與全局變量是等價(jià)的。的寫法模塊的寫法上面代碼將頂層對(duì)象放入變量。參考引用頂層對(duì)象實(shí)戰(zhàn) es6學(xué)習(xí)筆記-頂層對(duì)象_v1.0 (雖然是筆記,但是基本是抄了一次ruan大師的文章了) 頂層對(duì)象 頂層對(duì)象，在瀏覽器環(huán)境指的是window對(duì)象，在Node指的是gl...

    Meils 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<