在網頁編寫JavaScript時，可以通過嵌入式、外鏈式和行內式

在網頁編寫JavaScript時，可以通過嵌入式、外鏈式和行內式這3種方式來引入JavaScript代碼，下面針對這3種方式分別進行講解。

1．嵌入式

嵌入式就是使用<script>標簽包裹JavaScript代碼，直接編寫到HTML文件中，具體實例如下：

<script>

JavaScript語句

</script>

<script type="text/javascript">

JavaScript語句

</script>

上述示例演示了兩種書寫方式，其中<script>標簽的type屬性用于告知瀏覽器腳本的類型，由于HTML5中該屬性默認值為"text/javascript"，因此在編寫時可以省略。

2．外鏈式

外鏈式是指將JavaScript代碼保存到一個單獨的文件中，通常使用“js”作為文件的擴展名，然后使用<script>標簽的src屬性引入文件，具體示例如下：

HTML文件

……

<script src="js/demo.js"></script>

……

js/demo.js文件

……

alert("Hello World");

……

通過示例可以看出，src屬性是一個文件路徑或URL地址，可以指定為如下形式。

• 相對路徑：“js/demo.js”引入當前目錄下的js子目錄中的demo.js文件；“../js/demo.js”引入上級目錄下的js子目錄中的demo.js文件。

• 絕對路徑：“/js/demo.js”引入網站根目錄下的js子目錄中的demo.js文件；如果網頁在本地，可以通過“file://c:/js/demo.js”引入本地文件

• URL地址：如“http://js.test/demo.js”；若自動使用當前頁面協議，可寫為“//js.test/demo.js”。

在實際開發中，當需編寫大量、邏輯復雜、特有功能的JavaScript代碼時，推薦大家使用外鏈式。相比嵌入式，外鏈式的優勢可以總結為以下3點。

• 嵌入式會導致HTML與JavaScript代碼混合在一起，不利于修改和維護。

• 嵌入式會增加HTML文件的體積，影響網頁本事的加載速度，而外鏈式可以利用瀏覽器緩存提高速度。例如，在多個頁面中引入了相同的js文件是，打開第一個頁面后，瀏覽器就會將js文件緩存下來，下次打開其他頁面時，就不用重新下載js文件了。

• 外鏈式有利于分布式部署。網頁中鏈接的js、css、圖片等靜態文件可以部署到CDN服務器上，利用CDN的優勢加快下載速度。

為了降低JavaScript阻塞問題對頁面造成的影響，可以使用HTML5為<script>標簽新增的兩個可選屬性：async和defer，下面分別介紹其作用。

1. 1)async

async用于異步加載，即先下載文件，不阻塞其他代碼執行，下載完成后再執行。

<script src="http://js.test/demo.js" async></script>

1. 2)defer

defer用于延后執行，即先下載文件，知道網頁加載完成后再執行。

<script src="http://js.test/demo.js" defer></script>

添加async或defer屬性后，即使文件下載失敗，也不會阻塞后面的JavaScript代碼執行。

3．行內式

行內式是將JavaScript代碼作為HTML標簽的屬性值使用。例如，單擊“test”按鈕時，彈出一個警告框提示“Hello World”,具體示例如下。

<a href="javascript:alert('Hello World');">test</a>

JavaScript還可以寫在HTML標簽的實際屬性中，事件是JavaScript中的一種機制。例如，單擊網頁中的一個按鈕時，就會觸發按鈕的單擊事件，具體示例如下。

<input type="button" onclick="alert('Hello World');" value="test">

上述代碼實現了單擊“test”按鈕時，彈出一個警告框提示“Hello World”。

由于現代網頁開發提倡結構、樣式、行為的分離，即分離HTML、CSS、JavaScript三部分的代碼，避免直接寫在HTML標簽的屬性中，從而更有利于維護。因此在實際開發中不推薦使用行內式。