成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Airmusic / 2765人閱讀

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

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

簡介

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

export

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

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

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

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

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

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

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

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

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

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

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

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

rename

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

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

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

export時可以指定要默認(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ù)時需要這樣寫：

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

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

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

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

CommonJS加載模塊時，加載的是值的副本，而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í)行的時候改變的都是lib.js里的x，而不是各自操作了一份副本

注意點(diǎn)

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/79803.html

相關(guān)文章

  • 2017-07-07 前端日報

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

    import. 評論0 收藏0

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

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

    galaxy_robot 評論0 收藏0

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

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

    LoftySoul 評論0 收藏0

  • 正則表達(dá)式

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

    yibinnn 評論0 收藏0

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

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

    Meils 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<