了解 JavaScript 的運行方式和時間來設(shè)計網(wǎng)頁

時間：2023-10-03 15:12:01 | 來源：網(wǎng)站運營

時間：2023-10-03 15:12:01 來源：網(wǎng)站運營

了解 JavaScript 的運行方式和時間來設(shè)計網(wǎng)頁：使用 JavaScript 設(shè)計網(wǎng)頁需要注意代碼出現(xiàn)的順序以及是否將代碼封裝到函數(shù)或?qū)ο笾校羞@些都會影響代碼運行的順序。

JavaScript 網(wǎng)頁上的位置

由于頁面上的 JavaScript 基于某些因素執(zhí)行，讓我們考慮在何處以及如何將 JavaScript 添加到網(wǎng)頁?；旧衔覀兛梢栽谌齻€位置附加 JavaScript：

直接進入頁面頭部

直接進入頁面正文

從事件處理程序/偵聽器

JavaScript 是在網(wǎng)頁本身還是在鏈接到頁面的外部文件中沒有任何區(qū)別。 事件處理程序是硬編碼到頁面中還是由 JavaScript 本身添加也無關(guān)緊要（除非它們在添加之前不能被觸發(fā)）。

1. 直接在頁面上編碼

說 JavaScript 直接在頁面的頭部或正文中是什么意思？如果代碼沒有包含在函數(shù)或?qū)ο笾?，則直接在頁面中。在這種情況下，只要包含代碼的文件已加載到足以訪問該代碼，代碼就會按順序運行。

函數(shù)或?qū)ο笾械拇a僅在調(diào)用該函數(shù)或?qū)ο髸r運行?；旧?，這意味著頁面頭部和正文中任何不在函數(shù)或?qū)ο髢?nèi)的代碼都將在頁面加載時運行——只要頁面加載到足以訪問該代碼的程度。






最后一點很重要，它會影響你在頁面上放置代碼的順序：任何直接放置在頁面中且需要與頁面中的元素交互的代碼都必須出現(xiàn)在它所依賴的頁面中的元素之后。一般來說，這意味著如果你使用直接代碼與頁面內(nèi)容進行交互，則此類代碼應(yīng)放在正文的底部。

函數(shù)和對象中的代碼

每當調(diào)用該函數(shù)或?qū)ο髸r，就會運行函數(shù)或?qū)ο笾械拇a。如果它是從直接位于頁面頭部或正文中的代碼調(diào)用的，那么它在執(zhí)行順序中的位置實際上就是從直接代碼調(diào)用函數(shù)或?qū)ο蟮狞c。

2. 分配給事件處理程序和偵聽器的代碼

將函數(shù)分配給事件處理程序或偵聽器不會導(dǎo)致函數(shù)在分配時運行 - 前提是你實際上是在分配函數(shù)本身而不是運行函數(shù)并分配返回的值。 （這就是為什么在將函數(shù)分配給事件時通?？床坏胶瘮?shù)名稱末尾的 ()，因為添加括號會運行函數(shù)并分配返回的值，而不是分配函數(shù)本身。）

附加到事件處理程序和偵聽器的函數(shù)在它們附加到的事件被觸發(fā)時運行。 大多數(shù)事件是由與你的頁面交互的訪問者觸發(fā)的。 但是，存在一些例外情況，例如窗口本身的 load 事件，該事件在頁面完成加載時觸發(fā)。






附加到頁面元素事件的函數(shù)

任何附加到頁面本身元素上的事件的函數(shù)都將根據(jù)每個訪問者的操作運行 - 此代碼僅在發(fā)生特定事件以觸發(fā)它時運行。 出于這個原因，代碼是否永遠不會為給定的訪問者運行并不重要，因為該訪問者顯然沒有執(zhí)行需要它的交互。

當然，所有這一切都假設(shè)你的訪問者使用啟用了JavaScript的瀏覽器訪問了你的頁面。

3. 自定義訪客用戶腳本

一些用戶安裝了可能與你的網(wǎng)頁交互的特殊腳本。這些腳本在你的所有直接代碼之后運行，但在附加到加載事件處理程序的任何代碼之前運行。

由于你的頁面對這些用戶腳本一無所知，因此你無法知道這些外部腳本可能會做什么 - 它們可以覆蓋你附加到你分配處理的各種事件的任何或所有代碼。如果此代碼覆蓋事件處理程序或偵聽器，則對事件觸發(fā)器的響應(yīng)將運行用戶定義的代碼，而不是運行你的代碼，或者除了運行你的代碼之外。

這里的要點是，你不能假設(shè)設(shè)計為在頁面加載后運行的代碼將被允許按照你設(shè)計的方式運行。此外，請注意，某些瀏覽器具有允許在瀏覽器中禁用某些事件處理程序的選項，在這種情況下，相關(guān)事件觸發(fā)器將不會在你的代碼中啟動相應(yīng)的事件處理程序/偵聽器。