<script> 有沒有 module 屬性的差別

也是偶然學到記一下。

簡述

本來是好奇這兩個有什麼差異：

<!-- 用 src 引入 -->
<script src="myModule"></script>
<!-- 用 ES6 module 引入 -->
<script type="module">
  import { module } from './myModule';
</script>

但碰巧看到這篇 文章 學到蠻多我不知道的細節，所以才寫這篇。

另外這兩個最主要的差異應該是 scope，等一下會解釋差在哪。

module 的作用域只在 <script> 中

沒辦法在其他 <script> 中存取 module 裡的變數或函式：

<script type="module">
  function add(a, b) {
    return a + b;
  }
</script>
<script>
  // Uncaught ReferenceError: add is not defined
  console.log(add(10, 10));
</script>

強調一下是「只有設定 type=module 的 JS」才有 <script> 作用域，所以以下例子是 OK 的：

<script>
  function add(a, b) {
    return a + b;
  }
</script>
<script type="module">
  console.log(add(10, 10)); // 20
</script>

module 中的內容會以嚴格模式來執行

<script type="module">
  console.log(this); // undefined
  a = 100; // 沒有用 var 來宣告
  console.log(a) // Uncaught ReferenceError: a is not defined
</script>

一般的 <script>：

<script>
  console.log(this); // window
  a = 100; // 沒有用 var 來宣告
  console.log(a) // 100
</script>

只有 module 才可以用 ES6 模組

<script type="module">
  // 引入寫好的模組
  import { multiple }  from './getElement.js';
  console.log(multiple(10, 5)) // 50
</script>

一般的 <script>：

<script>
  // Uncaught SyntaxError: Cannot use import statement outside a module
  import { multiple }  from './getElement.js';
  console.log(multiple(10, 5))
</script>

module 預設就有 defer 效果

不知道 defer 的效果參考這篇：認識 <script> 中的 async 與 defer 屬性

<script type="module">
  // <button>yo</button>
  console.log(document.querySelector('button'));
</script>

<button>yo</button>

一般的 <script>：

<script>
  // null
  console.log(document.querySelector('button'));
</script>

<button>yo</button>

module 可以設定 async 屬性，然後一樣寫 inline script

因為一般 <script> 的 async 僅限於用 src 請求資源的情況，不能寫 inline script，但 module 打破了這個限制：

<script type="module" async>
  import { multiple } from './getElement.js';
  // inline script
  console.log(multiple(10, 5)); // 50
</script>

<button>button</button>