返回列表 發帖

jquery init ready 寫法疑問

請問關於 jquery 的 init ready method, 官網介紹了下列三種模式:

$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )

第一個問題是想請教,為何前輩都習慣在寫之前,先加一個 ; 符號,不加會怎麼樣嗎?
第二個問題是在 (jQuery); 後面已經有加 ; 符號,為何下面一行還要再加一個?
第三個問題是請教寫法

下列的寫法,看起來是用是用 (  handler  )(jQuery);   並沒有在官網介紹的三種方法裡面,請問這種方法是出自何處呢?
;
(function($) {
        // many code in here
})(jQuery);
;

其實第1和第5行的;都是不必要的
在寫 function 時常會在前面加入;是為了避免前方的代碼漏寫了;
js 是斷行自動視為下一段代碼的, 所以在完結部份如果不寫;運行時也不會有問題
只是現在都很流行將代碼pack為min版本, 所有代碼會縮在一起變成一行, 那麼如果本身是利用斷行作編碼分段的話, 在pack後便會出現錯誤, 所以多寫個;可確保pack時不會出錯

至於 (function($) { ... })(jQuery); 的寫法其實是 pure js 的寫法, 並非 jquery 的
它的用處是在運行這段代碼時傳入指定參數, 而該參數在內在執行的代碼不會受 global 所影響
簡單舉個例子, 如果你要做一件 settimeout 運行的事件
var a = 1.1;
setTimeout(function() { alert(Math.round(a)); },1000);
a = 'abc';
這段代碼你嘗運行一次, alert 的結果會是 NaN, 因為 a 是在 alert 時已變成 string 'abc', 所以無法做到 round

改為 (function(v) { ... })(v); 的寫法看看
var a = 1.1;
(function(a){ setTimeout(function() { alert(Math.round(a)); },1000); })(a);
a = 'abc';
這次你可以正確見到 alert 1 了
這次因為在運行 alert 時, 他所採用的 a 是 function 提供的 a, 而這個 a 在傳入時是 1.1, 所以即使過了 1000ms 才執行 alert, 它仍然是 1.1, round 後就是 1, 而不會因為 global 的 a 已變成 'abc' 而受影響

TOP

返回列表 回復 發帖