模組使用不同方式載入的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 引數預設值表示式 引數預設值除了是基本型別的值,也可以執行乙個函式來產生預...