手機(jī)也能上課
1/2
簡(jiǎn)單的案例
簡(jiǎn)單的案例
我們用模塊來(lái)改變<p>
元素的文字顏色。
index.html
<script type="module">
// 導(dǎo)入 firstBlood 模塊
import { pColor } from './firstBlood.mjs';
// 設(shè)置顏色為藍(lán)色
pColor('blue');
</script>
firstBlood.mjs
// export 一個(gè)改變<p>元素顏色的方法
export function pColor (color) {
const p = document.querySelector('p');
p.style.color = color;
}
可以看到<p>
文字變成藍(lán)色了:
提示:
- 對(duì)于需要引入模塊的?
<script>
?元素,我們需要添加?type="module"
?, - 這個(gè)時(shí)候,瀏覽器會(huì)把這段內(nèi)聯(lián) script 或者外鏈 script 認(rèn)為是 ?
ECMAScript
?模塊。 - 模塊 JS 文件,業(yè)界或者官方約定俗成命名為?
.mjs
?文件格式, - 一來(lái)可以和普通 JavaScript 文件(.js后綴)進(jìn)行區(qū)分,一看就知道是模塊文件;
- 二來(lái) Node.js 中 ES6 的模塊化特性只支持?
.mjs
?后綴的腳本,可以和 Node.js 保持一致。 - 當(dāng)然,我們直接使用.js作為模塊 JS 文件的后綴也是可以的。
- 在瀏覽器側(cè)進(jìn)行 import 模塊引入,其對(duì)模塊 JS 文件的 mime type 要求非常嚴(yán)格,務(wù)必和 JS 文件一致。
- 這就導(dǎo)致,如果我們使用?
.mjs
?文件格式,則需要在服務(wù)器配置 ?mime type
? 類型,否則會(huì)報(bào)錯(cuò):
擴(kuò)展閱讀:
Nginx 對(duì)于不識(shí)別后綴默認(rèn)會(huì)給一個(gè)application/octet-stream的 MIME type,方便下載等處理,
但是,在模塊化引入這里,這個(gè) MIME type 無(wú)效。
無(wú)論是 Apache 服務(wù)器還是 Nginx,都可以修改 mime.types 文件使.mjs的 MIME type 和.js文件一樣。