HTML是有執行順序的,預設是自上而下執行。所以當我們的js程式碼在html程式碼下邊的時候,可以正常執行,而當我們的js程式碼在html程式碼上邊的時候,可以就無法正常執行了,這時,我們需要在文件載入完畢的時候才去執行js程式碼,所以通常我們會這樣做:
一、當不引入jQuery框架,只寫原生JS程式碼時,需要用window物件的onload事件
window.onload = function(){ //要执行的js代码段 }
(註:在使用時,window.onload可直接簡寫成onload,但是為了不發生歧義及造成不必要的錯誤,最好是把window寫上)
二、在引入jQuery時,可以有多種寫法,這裡只列出一種最複雜(其他寫法基本上都是此種的變形)的,和2種最常見的寫法
1、最複雜的一種寫法:
(function($,window,document,undefined){ //要执行的js代码段 })(jQuery,window,document);
(1)、在最開始使用分號的目的是為了防止多個檔案壓縮合併時,因為其他檔案最後一行語句沒有加分號,而造成合併後的語法錯誤(如果能確保不會有多個檔案壓縮合併的情況,可以不寫這個分號)
(2)、這就是一個匿名函數的自執行,一般js函式庫都採用這種自執行的匿名函數來保護內部變數
(3)、形參中的$是jQuery的簡寫,很多方法和類別庫也使用$,這裡$接收jQuery對象,也是為了避免$變數衝突,保證多個插件之間可以正常運作(如果只引入了jQuery這一個插件,可以不寫這個)
(4)、實參分別接收window,document這兩個對象,window,document這兩個對像都是全局環境下的,而在函數體內的window,document其實是局部變量,不是指全域的window,或是document物件。這樣做有個好處就是可以提高效能,減少作用域的查詢時間(如果在函數體內需要多次呼叫window,或是document對象,這樣把window或是document物件當作參數傳進去,是非常必要的。如果程式碼中沒有用到這兩個對象,那就不需要傳這兩個參數了)
(5)、使用undefined的原因:
①因為undefined是window的屬性,宣告為局部變數之後,在函數中如果再有變數與undefined做比較的話,程式就可以不用到window下搜尋undefined,可以提高程式的效能
②undefined在有些版本較舊的瀏覽器是不被支援的,直接使用會報錯,js框架就要考慮到相容性問題,所以增加一個形參undefined
2、比較常用的寫法:
$(document).ready(function(){ //要执行的js代码段 });
(註:①在不確定是否只引入jQuery一個js框架的時候,程式碼中的$可以像複雜寫法那樣透過參數的形式傳遞,②程式碼中的document可省略)
#3、最簡單的一種寫法:
$(function(){ //要执行的js代码段 });
(註:細節情況與上種方法相同)
三、總結:文件載入完畢的寫法可以有多種,需要按照實際情況和個人習慣使用。
#以上是怎麼書寫JS與jQuery文件載入完畢時的程式碼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!