在網頁編寫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標簽的屬性中,從而更有利于維護。因此在實際開發中不推薦使用行內式。