首頁 > web前端 > js教程 > 主體

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

yulia
發布: 2018-09-13 18:00:05
原創
1180 人瀏覽過


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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板