前端知識 JavaScript-modules模組的學習

modules，就是JS的模組，我的理解就是，當有大量同類型或有關聯的資料和函數，方法需要當作一個整體展示的時候，可以單獨定義成​​一個module也就是模組。 Module意義就使得程式碼模組化，使你的程式碼分成一個個邏輯上獨立的子集，每個子集處理特定的功能，然後被單獨呼叫。

modules，也就是模組，自動採用嚴格模式，不管有沒有在模組頭加上“user strict”，agruments不會自動反映函數參數的變化，以及禁止this指向全域物件

modules有兩個關鍵字，Imports和Exports

• Imports ：用於輸入其他模組提供的功能

• Exports：用來規定對外的介面

##一個模組就是一個獨立的檔案，該檔案內部所有的變量，外部無法取得，如果希望外部讀取模組內部的某個變量，就必須使用export關鍵字輸出變量，export，除了輸出變量，也可以輸出函數，class

let a='a';
let b='b';
let c='c';
export {a,b,c}

如果為輸出的變數重新取一個名字，import指令要使用

as關鍵字，將name改成a，例如：

import {name as a} from '.../xxx.js'

另外

,import具有提升效果，不管在哪裡引用，都會被提升到整個模組的頂部，首先執行

除了指定加載某個值，也可以將整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對像上。例如

import * as a from '.../xxx.js'
console.log(a.area(4));
console.log(a.cire(4));

export default，設定模組檔案的預設輸出，每個module只允許有一個預設輸出，預設輸出不需要知道模組的變數名，另外，export default不需要加大括號，因為，本質上，export default就是輸出了一個叫做default的變數或方法，然後系統允許你為它取任意名字

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

如果加載多次，等同於合併之後加載，例如

import {b} from '.../xxx.js'
import {c} from '.../xxx.js'
//等同于
import {b,c} from '.../xxx.js'

瀏覽器加載ES6 模組，也使用

3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤，但要加入type="module"屬性。

<script type="module">
</script>

瀏覽器對於帶有

type="module"的3f1c4e4b6b16bbbd69b2ee476dc4f83a，都是異步加載，不會造成堵塞瀏覽器，即等到整個頁面渲染完，再執行模組腳本，等同於開啟了3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤的defer屬性。

模組之中，頂層

的this關鍵字回傳undefined，而不是指向window。也就是說，在模組頂層使用this關鍵字，是無意義的，同時利用頂層的this等於undefined這個語法點，可以偵測目前程式碼是否在ES6 模組之中。 。

相關文章：

學習web前端常用知識點的詳細介紹

JavaScript 入門基礎知識 想學習js的朋友可以參考下

以上是前端知識 JavaScript-modules模組的學習的詳細內容。更多資訊請關注PHP中文網其他相關文章！