1. 程式人生 > >ES6模組化(js模組的定義和匯出)

ES6模組化(js模組的定義和匯出)

(一般在開發都會封裝公用的js檔案和一些功能性js檔案,然後在哪個元件用到就在那個元件import引入)

在ES6自帶了模組化, 也是JS第一次支援module, 在es6以後 ,我們可以直接作用import和export在瀏覽器中匯入和匯出各個模組了, 一個js檔案代表一個js模組;

ES6的模組化的基本規則或特點:

1、每一個模組只加載一次, 每一個JS只執行一次, 如果下次再去載入同目錄下同檔案,直接從記憶體中讀取。 一個模組就是一個單例,或者說就是一個物件;
2、每一個模組內宣告的變數都是區域性變數, 不會汙染全域性作用域;
3、模組內部的變數或者函式可以通過export匯出;
4、一個模組可以匯入別的模組。

第一種:模組化定義和匯出的方式(多個export)

在這裡插入圖片描述
(匯入多個需要用英文逗號隔開,可直接呼叫)
在這裡插入圖片描述

第二種:模組化定義和匯出的方式(一個預設的export)

在這裡插入圖片描述
(匯出預設的物件,通過物件訪問屬性的方式呼叫)
在這裡插入圖片描述