原生JS與jQuery文檔加載完畢的寫法

HTML是有執行順序的，默認是自上而下執行。因此當咱們的js代碼在html代碼下邊的時候，能夠正常執行，而當咱們的js代碼在html代碼上邊的時候，能夠就沒法正常執行了，這時，咱們須要在文檔加載完畢的時候纔去執行js代碼，因此一般咱們會這樣作：

1、當不引入jQuery框架，只寫原生JS代碼時，須要用window對象的onload事件

window.onload = function(){
  //要執行的js代碼段  
}

（注：在使用時，window.onload可直接簡寫成onload，可是爲了避免發生歧義及形成沒必要要的錯誤，最好是把window寫上）

2、在引入jQuery時，能夠有多種寫法，這裏只列出一種最複雜（其餘寫法基本都是此種的變形）的，和2種最多見的寫法

一、最複雜的一種寫法：

;(function($,window,document,undefined){
    //要執行的js代碼段
})(jQuery,window,document);

(1)、在最開始使用分號的目的是爲了防止多個文件壓縮合並時，由於其餘文件最後一行語句沒加分號，而引發合併後的語法錯誤（若是能確保不會有多個文件壓縮合並的狀況，能夠不寫這個分號）

(2)、(function(){})();：這就是一個匿名函數的自執行，通常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

二、比較經常使用的寫法：

$(document).ready(function(){
    //要執行的js代碼段
});

（注：①在不肯定是否只引入jQuery一個js框架的時候，代碼中的$能夠像複雜寫法那樣經過參數的形式傳遞，②代碼中的document可省略）

三、最簡單的一種寫法：

$(function(){
    //要執行的js代碼段
}); 

（注：細節狀況與上種方法相同）

3、總結：文檔加載完畢的寫法能夠有多種，須要按照實際狀況和我的習慣使用。

（注：文章內容部分來源於網絡，若有侵權，請與博主聯繫）