以下是 HTML 中<script>標簽type屬性的常見取值、說明及使用場景:
type 值 | 說明 | 使用場景 |
不寫(空值) | HTML5 中默認等同于text/javascript,表示普通 JavaScript 腳本 | 絕大多數傳統 JavaScript 代碼,包括內聯腳本和外部.js文件 |
text/javascript | 明確指定為 JavaScript 腳本,與空值效果一致(HTML5 規范中) | 兼容舊版本瀏覽器(HTML4/XHTML 中需顯式聲明,現代瀏覽器可省略) |
module | 表示腳本為 ES6 模塊,支持import/export語法,模塊作用域隔離 | 編寫模塊化 JavaScript 代碼,需導入 / 導出其他模塊時(如import utils from './utils.js') |
importmap | 用于定義模塊導入映射表(JSON 格式),指定模塊標識符與實際路徑的對應關系 | 簡化模塊導入路徑,例如將"vue"映射到"https://unpkg.com/vue@3/dist/vue.esm-browser.js",需放在所有模塊腳本之前 |
text/babel | 表示腳本需要通過 Babel 轉譯(需配合 Babel 工具) | 編寫 ES6 + 語法但需兼容低版本瀏覽器時,由 Babel 轉譯為 ES5 |
text/typescript | 表示腳本為 TypeScript 代碼(需配合 TypeScript 編譯器) | 編寫 TypeScript 代碼,需編譯為 JavaScript 后執行(通常通過構建工具處理) |
application/json | 表示腳本內容為 JSON 數據(瀏覽器不執行,僅作為數據存儲) | 嵌入 JSON 數據供 JavaScript 讀取(需通過JSON.parse()解析內容) |
text/template | 表示腳本為模板字符串(瀏覽器不執行,由框架解析) | 前端模板引擎(如 Underscore、EJS)的模板定義,例如<script type="text/template">...</script> |
說明:
- 現代開發中,type="text/javascript"已很少顯式使用,通常省略
- module類型腳本默認啟用嚴格模式,且會延遲執行(類似defer屬性)
- importmap是 HTML5 新增特性,用于解決模塊導入路徑復雜的問題,需注意瀏覽器兼容性
?