非主流javascript教學（六）

呃， 這次我們提下jQuery

我們知道jQuery是javascript裡面一個很優秀的傢伙。

很多人甚至是為了jQuery而開始學習javascript的。

比如undefined同學。

 

=。=

然後某同事在用jQuery的時候出問題了。

 

呃， 出什麼問題？

jQuery能出問題無非就這麼幾種：

1 jQuery有bug。

2 Ajax的問題（基本上可以認為jQuery有bug）

3 $符號的衝突問題。

 

大家都知道$符號衝突了， 調用noConflict就OK了唄。

其實不是這樣的。

其實問題比這嚴重的多。

 

 比如我同事碰到這個， 他們在項目中使用了$， 大概就是這麼定義的：

 

function $(id){
    return document.getElementById(id);
}

 

 

讀過前面文章的人都知道， 這種寫法是最糟糕的。

理由：

1 你丫的使用全域變數！

2 用全域變數我們也就認了，你丫的沒有用匿名函數! 你應該var $ = function(){。。。。} 這樣才對嗎！！！

3 你丫的居然用這麼不裝13的寫法， 你怎麼好意思說自己會javascript啊！！！

 

當然了， 代碼已經寫好了， 也就沒有去改的必要了。 

但是問題來了：

同事在項目二期的時候計劃引入jQuery， 然後呢？ 大家可以猜到， 一定會用noConflict了吧？一定可以完美解決了吧？錯！

首先是， 兩個js誰放前面？

 

大家說， 那還用問， 當然是jQuery放前面， 類庫放前面嗎， 自己的代碼放後面嗎， 國際慣例。

so， 問題來了：

那麼jQuery豈不是被我們的$給覆蓋了嗎？

錯！沒有覆蓋。 這個問題就蛋疼了。 說起來也挺麻煩噁心的。 反正， 如果他的定義是這樣的：

 

window.$ = function(id){
    return document.getElementById(id);
}

 

 就是我們提倡的裝13的寫法， 這樣就不會出問題~

這個不管了。 現在， 反正$衝突了， 總該讓noConflict出場了吧？

又錯了。。。

我們用noConflict的時候一定要知道為什麼noConflict可以解決衝突。

 

jQuery在載入的時候， 備份了一次$， 然後如果你調用noConflict， 那麼jQuery會將備份的值給還原回去。

好， 問題來了。

我們看下：

1 最初， $沒有定義。 那麼$===undefined

2 jQuery載入。 他備份了$， 然後定義$ 所以備份的是undefined， 

3 載入同事的代碼。  由於一個詭異的問題， $衝突了。

4 這個時候試圖用noConflict來解決衝突(當然這個思路是完全錯誤的。 暫時不去責備他)。

5 undefined被還原。

 

怎麼怎麼， 怎麼回事？undefined你咋這麼喜歡湊熱鬧， 到處都有你啊？

 

=。=

不好意思， 事情已經發生。 請尋找解決方案， 而不是一味的去責備誰。

那麼， 解決方案是什麼呢？

其實根本不需要noConflict這麼麻煩， 我們的代碼在jQuery之後載入， 我們覆蓋它不就行了嗎？

 

代碼：就用剛剛我們說的裝13寫法。

$變數輕鬆的被覆蓋掉了。 

而使用jQuery的辦法則是大家熟知的：

(function($, undefined){
    //自己的代碼在這裡
})(jQuery);

 

 搞定。 裝13寫法再次戰勝其他語言中的常規寫法。。。。