八 ES6之模組化

2022-10-07 20:33:09 字數 4811 閱讀 2211

es6 引入了模組化， es6 的模組化分為匯出（export） @與匯入（import）兩個模組。

es6模組化特點：

（1）es6 的模組自動開啟嚴格模式，不管你有沒有在模組頭部加上use strict;。

（2） 模組中可以匯入和匯出各種型別的變數，如函式，物件，字串，數字，布林值，類等。

（3） 每個模組都有自己的上下文，每乙個模組內宣告的變數都是區域性變數，不會汙染全域性作用域。

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

export 命令用於匯出， import 命令 用於匯入：

module1.js

// export let name = "孫悟空";


// export let *** = "男";


//或let name = "孫悟空";


let *** = "男";


export ;
test1.js

// import  from "../export/module1.js";


// console.log(name); //孫悟空


// console.log(***); //男


//或匯入部分變數


import from "../export/module1.js";


console.log(***); //男
demo01.html

module1.js

// export let name = "孫悟空";


// export let *** = "男";


//或let name = "孫悟空";


let *** = "男";


export ;
html:
（1）as在export中的用法：變數使用別名,隱藏模組內部的變數

module2.js：

let name = "孫悟空";


let *** = "男";


export ;
html:
（2）as在import中的用法：匯入多個模組的變數,使用as解決命名衝突。

module1.js

// export let name = "孫悟空";


// export let *** = "男";


//或let name = "孫悟空";


let *** = "男";


export ;
module3.js

// export let name = "孫悟空";


// export let *** = "男";


//或let name = "豬八戒";


let *** = "男";


export ;
html:
module4.js

// function add(...items)


// // return sum;


// }


// export;


//或export function add(...items)


return sum;


};
html

module4.js

// class student


// // sayhi()


// 


// }


// export ;


//或export class student


sayhi()


}
html

module5.js

let name = "孫悟空";


let *** = "男";


let emp = ;


export ;
html

module5.js

let name = "孫悟空";


let *** = "男";


let emp = ;


export ;
html

使用import命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入，export default 向外暴露的

成員，可以使用任意變數來接收，解決上述問題。

export default 命令特點:

（1）在乙個檔案或模組中，export、import 可以有多個，export default 僅有乙個。

（2）export default 中的 default 是對應的匯出介面變數。

（3）匯入匯出不需要{}符號。

（4）export default 向外暴露的成員，可以使用任意變數來接收。

module6.js

//export default匯出變數不需要var


//export var a = 10; // 正確


// 正確


var a = 10;


export default a;


// 錯誤


//export default var a = 10;
html

module6.js

function add(...items)


return sum;


}//此處add不需要{}


export default add
html

export 與 import 可以在同一模組使用，我們稱為復合使用。

module1.js

// export let name = "孫悟空";


// export let *** = "男";


//或let name = "孫悟空";


let *** = "男";


export ;
module7.js

//復合使用的語法


let emp = ;


export from './module1.js';


// //上面的export等於如下：


// // import from './module1.js';


// // export ;


export
html

module1.js

// export let name = "孫悟空";


// export let *** = "男";


//或let name = "孫悟空";


let *** = "男";


export ;
module7.js

//復合寫法實現介面改名


let emp = ;


export from './module1.js';


export
html

module1.js

// export let name = "孫悟空";


// export let *** = "男";


//或let name = "孫悟空";


let *** = "男";


export ;
module7.js

// 轉換為預設介面


let emp = ;


export from './module1.js';


export
html

module6.js

function add(...items)


return sum;


}//此處add不需要{}


export default add
module7.js

//將預設介面轉換為命名介面


export from './module6.js';
html

module1.js

// export let name = "孫悟空";


// export let *** = "男";


//或let name = "孫悟空";


let *** = "男";


export ;
module7.js

//匯出所有


export * from './module1.js'
html

ES6之模組化

本文介紹es6實現模組化的方法 使用import和export。匯入的時候需不需要加大括號的判斷 1.當用export default people匯出時，就用 import people 匯入 不帶大括號 2.乙個檔案裡，有且只能有乙個export default。但可以有多個export。3.當...

es6 的模組化

這個是需要複習下的，否則後面的react vue 就理解不清晰了 我覺得js 很牛，為啥，因為前後端都是js 這樣結合起來，很順暢 而且node 作為後端，搭建輕量級伺服器，很是好用，寫個介面絲毫沒有任何問題 後面的基本三大塊，1，node express koa 2,三大框架，react vue ...

ES6的模組化

模組化的特點 1 模組 自動執行在嚴格模式下,沒有任何辦法跳出嚴格模式 2 在模組的作用域下建立的變數,不會被新增到全域性作用域中 3 如果外部可以讀取模組當中的內容,需要模組的匯出 4 模組頂級作用域的this為undefined 匯出資料 export var color pink export...