iT邦幫忙

7

jQuery 爆冷門: sub

依照主題介紹 jQuery (我認為)冷門或者比較不為人知的 API。****
jQuery.sub() 是 jQuery 1.5 加入,專門針對一個特定情境用的,
基本上並不常用,但是當你需要時你會很感謝他!

這個情境是當你碰到有兩個不同的 plugin ,同時使用同一個 fn name 時。

像是這個問題提到的
http://stackoverflow.com/questions/5740974/jquery-plugins-occupy-the-same-function-name-conflict

舉例遮住一個 dom 元件的畫面(假設是 pluginA ),有的 plugin 會複寫 $.fn.mask ,
但是將 textbox 的內容作遮字或格式,也有人叫 $.fn.mask 。(假設是 pluginB)

你有幾個方式可以解決這個困境:
1.修改原始碼,把其中一個 mask 改成 mask2 或者 input_mask 等其他名字避免衝突。
缺點:不好維護,而且如果有相依性(其他lib調用這裡的 mask ,)你就要改一大票改不完了。

2.不爽不要用 (被拖走)

3.使用 jQuery.sub() (阿~救星來了)

以剛剛那個例子,我們的作法應該會像是這樣。

<script src="jquery.js" ></script>
<script src="pluginA.js" ></script> //assume jQuery.fn.mask is overwrited.

<script>
  window.origJQuery = window.jQuery; 
  window.jQuery = $.sub();//overwrite the existing jQuery to apply following plugins. 
</script>
<script src="pluginB.js" ></script> //assume jQuery.fn.mask is overwrited , it will apply to sub() one .
<script>
   var $b = window.jQuery;
   window.jQuery = window.origJQuery; 
</script>

(PS. 操作全域變數時都加上 window 是我個人偏好的好習慣,讀起來比較順。)

雖然這段 code 看起來不算乾淨,不過這是不需要修改 plugin 最小的作法(最後面會介紹另一種作法)。

然後這樣作之後,你要怎麼操作呢?

透過不同的 jQuery context 查詢回來的,會對應到不同 plugin 。

$("#target").mask()   //jQuery.fn.mask in plugin A 
$b("#target").mask()  //jQuery.fn.mask in plugin B

我知道講一堆抽象跟複雜的東西現在你應該還是滿頭問號,
所以我們照慣例還是程式碼會說話

http://jsfiddle.net/2b6Pm/


你也可以改 plugin 傳入的 "jQuery" 改成自定義的,
就不用這麼麻煩改來改去的改到頭昏,而且相依性的問題會比原本的好一點點(一點點啦XD)。

像是這個範例是不是看起來簡單多了呢? 但是需要改到 plugin 的 code 。
JS 只是工具,所以取捨就在你囉,考驗你的智慧,適當的選用吧! ;)

http://jsfiddle.net/2b6Pm/1/

這個情境是沒撞到就沒事,一撞到就會很痛的問題,所以還是知道一下 sub() 這函式 ,有利無害唷。 ;)


尚未有邦友留言

立即登入留言