原生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代碼段
}); 

(注:細節情況與上種方法相同)

三、總結:文檔加載完畢的寫法可以有多種,需要按照實際情況和個人習慣使用。

(注:文章內容部分來源於網絡,如有侵權,請與博主聯繫)

發佈了17 篇原創文章 · 獲贊 18 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章