ES Modules -- 使用特點 · 前端知識 -- 學習整理

[TOC] >[success] # ES Modules 用法 1. ESM 自動采用**嚴格模式**，忽略 'use strict' 2. 每個 ES Module 都是運行在**單獨的私有作用域中**，在不導出的情況下其他文件訪問不到別的文件變量 3. ESM 是通過 **CORS（跨源資源共享）的方式請求外部 JS 模塊的** （[CORS](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)） 4. ESM 的 script 標簽會延**遲執行腳本(等同于 script 標簽的 defer 屬性)**，就是說HTML 文件呈現完成后才開始**執行下載的資源**并不會阻礙**dom 樹渲染** >[danger] ##### 在頁面執行 ESM 標準的Js 代碼 1. HTML頁面可以使用帶有特殊 **type="module" 屬性的 `<script>` 標記添加模塊**，瀏覽器自動當作ES module引入內聯腳本或者外部腳本,這樣就可區分`script`標簽采用的是那種方式引用 2. 下面案例可以發現在沒有 type="module" 屬性的 `<script>` 標簽中使用import和 export 會報錯的，只有在加**type="module" 屬性的`<script>`標簽才可以使用import和 export** ~~~html <script type="module"> import num from './test.js' export default 2 </script>   ~~~ >[danger] ##### ESM 采用了嚴格模式 1. ESM 自動采用**嚴格模式**,嚴格模式下'禁止this關鍵字指向全局對象',下面案例使用ESM 規范打印的this 是undefined，非ESM 打印的是window 對象 ~~~html <script type="module"> console.log(this,1) // undefined </script> <script> console.log(this, 2) // window </script> ~~~ >[danger] ##### 每個 ES Module 都是運行在單獨的私有作用域中 1. 之前在了解js模塊化歷史的時候，有一段時間大家都在變相解決模塊成員不可以在模塊外部被訪問或者修改在ESM 新的規范里已經支持了'**每個 ES Module 都是運行在單獨的私有作用域中**' 2. 下面案例中使用ESM 規范的foo變量是在其他模塊**不能訪問**的，但是非ESM標準的foo1 就可以在其他模塊被訪問 ~~~html <script type="module"> var foo = 100 console.log(foo) </script> <script type="module"> console.log(foo) // 報錯foo is not defined </script> <script> var foo1 = 100 console.log(foo1) </script> <script> console.log(foo1) // 100 </script> ~~~ >[danger] ##### ESM 是通過 CORS 的方式請求外部 JS 模塊的 1. 在沒有 type="module" 屬性的 `<script>` 標簽，我通常利用`<script>`能過跨域來解決一些跨域問題但是在有 type="module" 屬性的 `<script>` 標簽，想訪問外部鏈接形式是會**產生跨域問題**，想解決需要將這個外部鏈接的cors頭配置正確 2. 下面例子中，**第一個案例**訪問的是本地文件不會有跨域，**第二個案例**訪問了一個不支持跨域的cdn導致請求失敗，**第三個**通過一個支持跨域cdn 請求成功 3. src 也不能是文件形式（**通過本地加載Html 文件 (比如一個 file:// 路徑的文件), 你將會遇到 CORS 錯誤，因為Javascript 模塊安全性需要**），需要啟動一個服務來 4. 當通過import xx from 'url' 這個url的cors頭配置正確是**必修允許跨域的** [參考文章](https://zhuanlan.zhihu.com/p/44362738) ~~~html  <script type="module" src='./test.js'></script>  <script type="module" src='https://lib.baomitu.com/react/17.0.1/cjs/react-jsx-dev-runtime.development.js'></script>  <script type="module" src="https://lib.baomitu.com/vue/3.0.2/vue.esm-browser.prod.js"></script> ~~~ >[danger] ##### ESM 的 script 標簽會延遲執行腳本(等同于 script 標簽的 defer 屬性) 1. **defer 屬性的 JS 文件將與其他文件同時下載**，僅在 HTML 文件呈現完成后才開始**執行下載的資源**，而不是像 async 在資源下載完成后立即執行。因此，**延遲文件的下載和執行都不會阻塞渲染。** 2. defer **加載順序將始終按照執行**它會等待**DOM Tree**構建完成，DOMContentLoaded事件之前先執行defer中的代碼 [參考鏈接](http://www.hmoore.net/cyyspring/more/2401820)