ES6學習筆記之模塊

Airmusic 發(fā)布于2019-08-19 18:38 / 2688人閱讀

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

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

簡介

在當今的Javascript程序中，模塊的作用不言而喻，目前廣泛應用的主要有AMD（瀏覽器端）和CommonJS（服務器端）。但是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對應，import就是ES6的模塊用來引入數(shù)據(jù)的命令。

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

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

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

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

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

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

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

rename

import和export的時候都是可以對變量進行重命名的

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

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

default

export時可以指定要默認導出的數(shù)據(jù)

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

導入默認數(shù)據(jù)時需要這樣寫：

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

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

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

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

ES6模塊加載實質

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，而不是各自操作了一份副本

注意點

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

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

本文為學習過程中整理，如有問題歡迎交流~

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79803.html

2017-07-07 前端日報

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

import. 2019-08-20 17:48 評論0 收藏0
angularV4+學習筆記

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

galaxy_robot 2019-08-22 18:40 評論0 收藏0
angularV4+學習筆記

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

LoftySoul 2019-08-02 10:53 評論0 收藏0
正則表達式

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

yibinnn 2019-08-21 17:57 評論0 收藏0
es6學習筆記-頂層對象_v1.0_byKL

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

Meils 2019-08-21 11:31 評論0 收藏0