Pages

系列文章

2016/06/06

【番外篇】解決JQuery套件衝突問題



俗話說「天有不測風雲,Code有Error,Bug」
相信很多人一定有遇過在夜深人靜Coding時,找到了一個心儀的套件
將這個套件深情款款的套用到自己的網站,然後開始執行時赫然發現
靠~怎麼不會動(一般這時候心中會緩緩響起「真心換絕情」的副歌)
今天就讓小弟跟大家一起手牽手心連心(妹子限定),一起探討並且解決這個問題

操作前注意事項
1.本篇文章參考「w3school」的教學製作,若要詳細研究可參考原文出處
2.一般都是在套用一些早期的教學或元件才會出現類似情況。


這邊我只提供我自己用過的方式,不會把所有的所有的範例都做說明
如果很有興趣的可以自己做研究喔

接下來讓我們進入正題,JQuery套件會產生衝突主要是因為
JQuery核心中用「$」這個別名來代表JQuery自己
而且經常有不同的套件會拿「$」這個符號來當作別名使用
因此造成在呼叫時,在錯誤的套件中呼叫Function因而導致同時套用多個JQuery元件之間會無法相容
能解決的方式有下述幾種(都是我自己用過的)
恢復原本的別名
JQuery元本的別名其實應該是叫做「JQuery」只是官方有把它簡化成「$」符號(可以看JQuery的核心套件裡面其實一開始是用「JQuery」當別名)
因此我們可以利用官方提供的Function 「.noConflict()」來將別名從「$」更換回「JQuery」
使用方式請參考下述範例
<script type="text/javascript" src="JQery核心檔案路徑"></script>
<script type="text/javascript">
/*
 *建議這一段程式碼要再宣告核心檔案後就使用
 *因為之前有遇過奇怪的問題 調整程宣告核心檔案就使用之後就正常了
 *但是一般情況下應該是不會遇到我這種鬼打牆的問題(只遇過一次且年代久遠 因此無法考究原因)
 */
$.noConflict();//刪除「$」符號的別名(要在載入的JQuery檔之後使用才會有效)
//刪除「$」符號的別名後,如果要使用JQuery就要用「JQuery」當別名
JQuery(function(){
    //程式碼內容
});
</script>
<script type="text/javascript" src="其它JQery函式庫檔案路徑"></script>

用其它別名取代「$」的別名

我自己是比較常用其他別名去取代原本的JQuery別名
因為沒有用「$」這個別名的話,原本的別名太長了,小弟我本人比較懶惰
<script type="text/javascript">
var JQ=$.noConflict();//刪除「$」別名並且用新別名「JQ」當作JQuery
//取代「$」符號的別名後,如果要使用JQuery就要用自己宣告的新別名「JQ」當別名
JQ(function(){
    //程式碼內容
});
</script>


以上就是關於我自己在開發過程中遇到元件衝突時的處理方式
希望能在大家遇到困難時能夠有一些幫助



沒有留言:

張貼留言