JavaScript引入方式
JavaScript引入方式
在網頁編寫JavaScript時，可以通過嵌入式、外鏈式和行內式這3種方式來引入JavaScript代碼，下面針對這3種方式分別進行講解。
1．嵌入式
嵌入式就是使用<script>標簽包裹JavaScript代碼，直接編寫到HTML文件中，具體實例如下：
上述示例演示了兩種書寫方式，其中<script>標簽的type屬性用于告知瀏覽器腳本的類型，由于HTML5中該屬性默認值為"text/javascript"，因此在編寫時可以省略。
2．外鏈式
外鏈式是指將JavaScript代碼保存到一個單獨的文件中，通常使用“js”作為文件的擴展名，然后使用<script>標簽的src屬性引入文件，具體示例如下：
通過示例可以看出，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) async
async用于異步加載，即先下載文件，不阻塞其他代碼執行，下載完成后再執行。
2) defer
defer用于延后執行，即先下載文件，知道網頁加載完成后再執行。
添加async或defer屬性后，即使文件下載失敗，也不會阻塞后面的JavaScript代碼執行。
3．行內式
行內式是將JavaScript代碼作為HTML標簽的屬性值使用。例如，單擊“test”按鈕時，彈出一個警告框提示“Hello World”,具體示例如下。
JavaScript還可以寫在HTML標簽的實際屬性中，事件是JavaScript中的一種機制。例如，單擊網頁中的一個按鈕時，就會觸發按鈕的單擊事件，具體示例如下。
上述代碼實現了單擊“test”按鈕時，彈出一個警告框提示“Hello World”。
由于現代網頁開發提倡結構、樣式、行為的分離，即分離HTML、CSS、JavaScript三部分的代碼，避免直接寫在HTML標簽的屬性中，從而更有利于維護。因此在實際開發中不推薦使用行內式。
