通過(guò)將 JavaScript 移動(dòng)到外部文件來(lái)改進(jìn)網(wǎng)頁(yè)
將 JavaScript 直接放入包含網(wǎng)頁(yè) HTML 的文件中非常適合在學(xué)習(xí) JavaScript 時(shí)使用的短腳本。
但是,當(dāng)你開(kāi)始創(chuàng)建腳本來(lái)為你的網(wǎng)頁(yè)提供重要功能時(shí),JavaScript 的數(shù)量可能會(huì)變得非常大,并且將這些大型腳本直接包含在網(wǎng)頁(yè)中會(huì)帶來(lái)兩個(gè)問(wèn)題:如果 JavaScript 占據(jù)了頁(yè)面內(nèi)容的大部分,它可能會(huì)影響你的頁(yè)面在各種搜索引擎中的排名。這降低了使用關(guān)鍵字和短語(yǔ)來(lái)識(shí)別內(nèi)容的頻率;這使得在你網(wǎng)站的多個(gè)頁(yè)面上重用相同的 JavaScript 功能變得更加困難。每次你想在不同的頁(yè)面上使用它時(shí),你都需要將其復(fù)制并插入到每個(gè)附加頁(yè)面中,以及新位置所需的任何更改。
如果我們讓 JavaScript 獨(dú)立于使用它的網(wǎng)頁(yè)會(huì)更好。
選擇要移動(dòng)的 JavaScript 代碼
幸運(yùn)的是,HTML 和 JavaScript 的開(kāi)發(fā)者已經(jīng)為這個(gè)問(wèn)題提供了解決方案。我們可以將我們的 JavaScript 移出網(wǎng)頁(yè),但仍保持其功能完全相同。
我們需要做的第一件事是在使用它的頁(yè)面外部創(chuàng)建 JavaScript 代碼,即選擇實(shí)際的 JavaScript 代碼本身(不包括周?chē)?HTML 腳本標(biāo)簽)并將其復(fù)制到單獨(dú)的文件中。
例如,如果以下腳本在我們的頁(yè)面上,我們將選擇并復(fù)制粗體部分:
<script type="text/javascript">
var hello = 'Hello World';
document.write(hello);
</script>
曾經(jīng)有一種做法是將 JavaScript 放在 HTML 文檔中的注釋標(biāo)記內(nèi),以阻止舊版瀏覽器顯示代碼; 但是,新的 HTML 標(biāo)準(zhǔn)規(guī)定瀏覽器應(yīng)該自動(dòng)將 HTML 注釋標(biāo)簽內(nèi)的代碼視為注釋?zhuān)@會(huì)導(dǎo)致瀏覽器忽略你的 Javascript。
如果你從其他人那里繼承了帶有注釋標(biāo)簽內(nèi)的 JavaScript 的 HTML 頁(yè)面,那么你不需要在你選擇和復(fù)制的 JavaScript 代碼中包含這些標(biāo)簽。
例如,你將只復(fù)制粗體代碼,省略以下代碼示例中的 HTML 注釋標(biāo)記 :
<script type="text/javascript"><!--
var hello = 'Hello World';
document.write(hello);
// --></script>
將 JavaScript 代碼保存為文件
選擇要移動(dòng)的 JavaScript 代碼后,將其粘貼到新文件中。為文件命名,以暗示腳本的作用或標(biāo)識(shí)腳本所屬的頁(yè)面。
給文件一個(gè) .js 后綴,以便你知道該文件包含 JavaScript。例如,我們可以使用 hello.js 作為保存上例中的 JavaScript 的文件名。
鏈接到外部腳本
現(xiàn)在我們已經(jīng)將我們的 JavaScript 復(fù)制并保存到一個(gè)單獨(dú)的文件中,我們需要做的就是在我們的 HTML 網(wǎng)頁(yè)文檔中引用外部腳本文件。
首先,刪除腳本標(biāo)簽之間的所有內(nèi)容:
<script type="text/javascript">
</script>
這還沒(méi)有告訴頁(yè)面運(yùn)行什么 JavaScript,所以我們接下來(lái)需要向 script 標(biāo)簽本身添加一個(gè)額外的屬性,告訴瀏覽器在哪里可以找到腳本。
我們的示例現(xiàn)在看起來(lái)像這樣:
<script type="text/javascript"
src="hello.js">
</script>
src 屬性告訴瀏覽器應(yīng)該從中讀取該網(wǎng)頁(yè)的 JavaScript 代碼的外部文件的名稱(chēng)(在我們上面的示例中是 hello.js)。你不必將所有的 JavaScript 放在與 HTML 網(wǎng)頁(yè)文檔相同的位置。你可能希望將它們放入單獨(dú)的 JavaScript 文件夾中。在這種情況下,你只需修改 src 屬性中的值以包含文件的位置。你可以為 JavaScript 源文件的位置指定任何相對(duì)或絕對(duì) Web 地址。
你現(xiàn)在可以獲取你編寫(xiě)的任何腳本或從腳本庫(kù)中獲取的任何腳本,并將其從 HTML 網(wǎng)頁(yè)代碼移動(dòng)到外部引用的 JavaScript 文件中。然后,你可以通過(guò)添加調(diào)用該腳本文件的適當(dāng) HTML 腳本標(biāo)簽從任何網(wǎng)頁(yè)訪問(wèn)該腳本文件。