怎麼書寫JS與jQuery文件載入完畢時的程式碼？

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中文網其他相關文章！