App下載
3. 簡單的案例
JavaScript 原生模塊 / 3. 簡單的案例
手機也能上課
App下載
1/2

簡單的案例

簡單的案例

我們用模塊來改變<p>元素的文字顏色。

index.html

<script type="module">
  // 導入 firstBlood 模塊
  import { pColor } from './firstBlood.mjs';
  // 設置顏色為藍色
  pColor('blue');
</script>

firstBlood.mjs

// export 一個改變<p>元素顏色的方法
export function pColor (color) {
  const p = document.querySelector('p');
  p.style.color = color;
}

可以看到<p>文字變成藍色了:


提示:

  • 對于需要引入模塊的?<script>?元素,我們需要添加?type="module"?,
  • 這個時候,瀏覽器會把這段內(nèi)聯(lián) script 或者外鏈 script 認為是 ?ECMAScript ?模塊。
  • 模塊 JS 文件,業(yè)界或者官方約定俗成命名為?.mjs?文件格式,
  • 一來可以和普通 JavaScript 文件(.js后綴)進行區(qū)分,一看就知道是模塊文件;
  • 二來 Node.js 中 ES6 的模塊化特性只支持?.mjs?后綴的腳本,可以和 Node.js 保持一致。
  • 當然,我們直接使用.js作為模塊 JS 文件的后綴也是可以的。
  • 在瀏覽器側(cè)進行 import 模塊引入,其對模塊 JS 文件的 mime type 要求非常嚴格,務必和 JS 文件一致。
  • 這就導致,如果我們使用?.mjs?文件格式,則需要在服務器配置 ?mime type? 類型,否則會報錯:



擴展閱讀:

Nginx 對于不識別后綴默認會給一個application/octet-stream的 MIME type,方便下載等處理,

但是,在模塊化引入這里,這個 MIME type 無效。

無論是 Apache 服務器還是 Nginx,都可以修改 mime.types 文件使.mjs的 MIME type 和.js文件一樣。


+10 經(jīng)驗 +10積分
解析
提示
參考答案
+10 經(jīng)驗 +10積分
視頻播放結(jié)束,是否學習下一節(jié)?