深入理解ES6讀書筆記10 模組

2021-10-22 19:16:25 字數 2690 閱讀 8768

模組使用不同方式載入的js檔案。

模組化分為匯出(export)@與匯入(import)兩個模組。

特點:(1)模組自動開啟嚴格模式;

(2)每乙個模組內宣告的變數都是區域性變數;

(3)模組中可以匯入和匯出各種型別的變數;

(4)每乙個模組只載入一次(是單例的),若再去載入同目錄下同檔案,直接從記憶體中讀取;

(5)對於需要讓模組外部**訪問的內容,模組必須匯出它們;

基本的匯出

使用export關鍵字將已發布**部分公開給其他模組。

新建乙個example.js檔案,內容如下:

// 匯出資料

export var color = "red";

export let name = "nicholas";

export const magicnumber = 7;

// 匯出函式

export function sum(num1, num2)

// 匯出類

export class rectangle

}// 此函式為模組私有

function subtract(num1, num2)

// 定義乙個函式……

function multiply(num1, num2)

// ……稍後將其匯出

export ;

單個匯入

import  from "./example.js";

let result = sum(1,2);

console.log(result); //3

多個匯入

import  from "./example.js";

console.log(sum(1,magicnumber)); // 8

console.log(multiply(1, 2)); // 2

完全匯入(命名空間匯入)

import * as example from "./example.js";

console.log(example.sum(1, example.magicnumber)); // 8

console.log(example.multiply(1, 2)); // 2

重新命名匯出,使用as關鍵字指定新名稱

function sum(num1, num2) 

export ;

重新命名匯入

import  from "./example.js";
匯出預設值,使用default關鍵字,函式不需要名稱,因為代表此模組自身。

export default function(num1, num2)
匯出預設值也可以使用下面兩種方式

function sum(num1, num2) 

export default sum; //方式2

//export ; //方法3

匯入預設值(不使用花括號)

import sum from "./example.js";

console.log(sum(1, 2)); // 3

既匯出預設值,又匯出非預設的繫結模組

export let color = "red";

export default function(num1, num2)

同時匯入 color 以及作為預設值的函式

import sum,  from "./example.js";

//import from "example"; //使用重新命名語法進行預設值的匯入,等價於上行

console.log(sum(1, 2)); // 3

console.log(color); // "red"

當前模組已匯入內容再匯出

//方式1

import from "./example.js";

export

//方式2

//export from "./example.js";

//方式3:將乙個值用不同名稱匯出

//export from "./example.js";

//方式4:將所有值完全匯出

//export * from "./example.js";

無繫結的匯入,如有些模組只是修改全域性作用域的物件,則匯入時可以簡化為

import "./example.js";
web瀏覽器使用模組

讀書筆記 深入理解ES6 (二)

1.更好的unicode支援。先說一下前提,在字串中,字串裡面的字元有兩種 一種是有乙個編碼單元16位表示的bmp字元 另一種是由兩個編碼單元32位表示的輔助平面字元。這兩種字元是不一樣的。1.1normalize 方法。這個方法接受乙個可選的字串,然後將該字串轉化為相應的標準unicode的形式,...

讀書筆記 深入理解ES6(一)

開篇詞 這是一篇關於 深入理解es6 的讀書筆記的第一篇,主要是讀第一章的筆記。該筆記基本上只記錄思路和核心知識點,具體內容可以參考書上的 和細節講解,以求達到提綱挈領和後期方便溫習的作用。1.var宣告和變數提公升 hoisting 機制。該節中,主要講述了作為原來es5中經常使用到的關鍵字 va...

深入理解ES6讀書筆記3 函式

引數預設值 未提供引數,或將引數值指定為undefined時,預設值會被使用。function add a,b 2,c 3 add 1 6 add 1,2 6 add 1,undefined,4 7 add 1,null,4 引數預設值表示式 引數預設值除了是基本型別的值,也可以執行乙個函式來產生預...