HTML引入JS的三種方式

外鏈式即是在HTML文件中使用<script>標籤來引入外部JS文件。語法如下:

<script type="text/javascript" src="script.js"></script>

其中type屬性是非必需的，默認可以不填，而src屬性是必需的，表示需要引入的JS文件路徑。在使用外鏈式的時候，需要注意一下幾點：

<script type="text/javascript">
  alert("Hello World!");
</script>

這種方式的優點是代碼嵌入簡單，代碼量較少時比較方便。

缺點是代碼耦合度比較高，可讀性比較差，如果代碼較長會影響頁面的載入速度和用戶體驗。

內部腳本即是在HTML文件中使用<script>標籤來嵌入JS代碼。語法如下：

<script type="text/javascript">
  function sayHello() {
    alert("Hello World!");
  }
</script>

這種方式的優點是代碼可讀性較好，適合小段代碼和實現簡單邏輯的功能，缺點是如果代碼比較多，會使HTML文件變得比較臃腫

事件屬性即是在HTML標籤上添加事件屬性，來執行JS代碼。語法如下：

<button type="button" onclick="alert('Hello World!')">Click me!</button>

這種方式的優點是可以直接在HTML標籤上添加事件，邏輯簡單，適合單一事件的JS代碼實現。缺點是不易於維護和擴展，也不利於代碼的重用。

ES6的模塊化是一種比較先進的JS引入方式。通常會把JS代碼寫成模塊，然後使用import和export語法來引入和導出模塊。語法如下：

在聲明模塊時，需要用export關鍵字把模塊中需要導出的對象進行導出：

// script.js
export function sayHello() {
  alert("Hello World!");
}

在導入模塊時，使用import關鍵字把需要導入的對象導入：

// index.js
import { sayHello } from "./script.js";
sayHello();

這種方式的優點是代碼模塊化，代碼結構清晰，易於維護和重用，適合大型項目的開發。缺點是對於一些老舊的瀏覽器不支持。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/183260.html