jQuery noConflict

最近合作廠商來信說我們的工具會和他們既有的套件衝到
為解決此問題  我去研究了一下jQuery的noConflict 函式
研究記錄如下：

先來個可以跑的程式碼範例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>avoid conflict example</title>
        <script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
        <div id="content"></div>
        <script>
            var tagtoo_jQuery = jQuery.noConflict();
            // Do something with jQuery
            tagtoo_jQuery("body").append("<div>Hello, world!</div>");
            tagtoo_jQuery(document).ready(function(){
                alert("jQuery no conflict!");
            });
            
            $("content").style.border = '1px solid black';
            $("content").style.width = '100px';
            $("content").style.height = '100px';
        </script>
    </body>
</html>

可以注意到上面的範例中, 使用了兩個js函式庫, 都很有代表性, 都用$來當保留字, 要如何避免雙方衝突呢? 我這邊採用jQuery.noConflict()  

要達到這樣的效果, 嵌入的順序和程式內容的順序是有差別的, 怎麼說呢? 我們先從程式碼片段來說, 如果jQuery的noConflict沒有先宣告的話, 會產生以下錯誤：


可見這樣$(content) 是完全取不到DOM element的！
應該是 先include prototype.js 的語法定義被後來的jQuery覆蓋了
要先執行jQuery.noConflict後, jQuery才會把取得的$ 主控權釋放出來


那如果把include的順序調動一下會怎樣呢? 先include jQuery 再 include prototype這樣

會導致$("content") .style.border = '1px solid black';  這個敘述執行錯誤
應該是prototype.js 被後進的程式碼片段所干擾( var tagtoo_jQuery = jQuery.noConflict();  這一段, 註解掉就沒事了)

經過幾種排列組合測試, 應該只有一開始講的那種是可行的, 意即先include prototype.js, 再include jQuery.js, 然後在寫script內容時先執行noConflict  以確保後面的"$" 被釋放, 如此一來使用兩個library 的語法皆可正常執行


留言

張貼留言

熱門文章