在 HTML 中的 script 標簽中，type 屬性用于指定腳本的 MIME 類型，也即告訴瀏覽器該如何解釋和處理腳本的內容。常用的 type 值以及它們的含義如下：

1. type=“text/javascript”

含義: 指定腳本是 JavaScript 類型。這是早期的標準方式，現(xiàn)代瀏覽器默認都會將script標簽中的內容當作 JavaScript 處理，因此不再需要顯式指定。

示例

<script type="text/javascript">
    console.log("This is a JavaScript script.");
</script>

2. type=“module”

含義: 指定腳本是一個 JavaScript 模塊。模塊可以導入和導出其他模塊，并且默認以嚴格模式（strict mode）執(zhí)行。使用模塊時，瀏覽器會對每個模塊進行獨立的處理，可以避免全局命名沖突。

特點:

• 可以使用 import 和 export 語法。
• 支持 import.meta 和動態(tài)導入 (import()）。
• 模塊中的代碼自動運行在嚴格模式下

示例:

<script type="module">
    import { myFunction } from './myModule.js';
    myFunction();
</script>

3.type=“application/javascript”

含義: 這是 text/javascript 的另一個有效 MIME 類型，同樣用于指定 JavaScript 類型。雖然技術上是正確的，但在實踐中較少使用。

示例

<script type="application/javascript">
    console.log("This is a JavaScript script.");
</script>

4. type=“application/json”

含義: 用于包含 JSON 數(shù)據(jù)。瀏覽器不會執(zhí)行 script標簽中的內容，而是可以通過 JavaScript 代碼使用該數(shù)據(jù)。通常用于嵌入頁面內的靜態(tài)數(shù)據(jù)。

<script type="application/json" id="myData">
    {
        "name": "John",
        "age": 30
    }
</script>
<script>
    const dataElement = document.getElementById('myData');
    const jsonData = JSON.parse(dataElement.textContent);
    console.log(jsonData.name); // 輸出 "John"
</script>

5. type=“text/babel”

• 含義: 通常用于 JSX 或 ES6+ 代碼，表示這些代碼需要使用 Babel 轉譯器來處理。瀏覽器本身不會識別此類型的腳本，通常需要在開發(fā)過程中通過 Babel 轉換成兼容的 JavaScript 代碼。示例:

<script type="text/babel">
    const element = <h1>Hello, world!</h1>;
    ReactDOM.render(element, document.getElementById('root'));
</script>

6. type=“text/coffeescript”

• 含義: 用于 CoffeeScript 代碼。瀏覽器不能直接執(zhí)行 CoffeeScript，通常需要一個預處理器將其轉換成 JavaScript。
• 示例

<script type="text/coffeescript">
    square = (x) -> x * x
    console.log(square(3))
</script>

7. type=“text/plain”

• 含義: 瀏覽器會將內容作為純文本處理，而不是腳本。這意味著內容不會被執(zhí)行或解析。
• 示例:

<script type="text/plain">
    console.log("This will not be executed as JavaScript.");
</script>

8. type=“application/ld+json”

• 含義: 用于嵌入 JSON-LD（JavaScript Object Notation for Linked Data）數(shù)據(jù)，通常用于結構化數(shù)據(jù)標記（如向搜索引擎提供額外的元數(shù)據(jù)）
• 示例:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "John Doe",
    "jobTitle": "Software Engineer",
    "url": "https://www.example.com"
}
</script>

9. type=“text/x-template”

• 含義: 用于定義 JavaScript 模板（如 Vue.js 的模板）。瀏覽器不會解析和執(zhí)行內容，通常在 JavaScript 代碼中獲取并使用模板。
• 示例：

<script type="text/x-template" id="my-template">
    <div>
        <h1>{{ title }}</h1>
        <p>{{ description }}</p>
    </div>
</script>

10. 省略 type 屬性

• 含義: 如果省略 type 屬性，瀏覽器默認將其作為 text/javascript 處理。這也是現(xiàn)代 Web 開發(fā)中最常用的方式。
• 示例:

<script>
    console.log("This is JavaScript by default.");
</script>

總結
不同的 type 值適用于不同的場景和需求。type=“module” 和 type=“text/javascript” 是目前最常用的用于 JavaScript 的類型。而像 application/json 和 application/ld+json 則用于特定類型的數(shù)據(jù)嵌入，text/x-template 常用于前端模板引擎中。

到此這篇關于js中＜script＞ 標簽中type值及其含義的文章就介紹到這了,更多相關js ＜script＞ 標簽type值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論