如何解决jQuery和mootoools冲突？

Question

我用来

<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script> 

加载 jquery，然后加载包含这些的外部脚本：

---

var jkpanel={
    controltext: 'menu',
    $mainpanel: null, contentdivheight: 0,
    openclose:function($, speed){
    this.$mainpanel.stop() //stop any animation
    if (this.$mainpanel.attr('openstate')=='closed')
        this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
    else
        this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},

init:function(file, height, speed){
    jQuery(document).ready(function($){
        jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
        var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
        var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
        $contentdiv.load(file, '', function($){
                var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
                $contentdiv.css({height: heightattr})
                jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
                jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
                $controldiv.css({cursor:'hand', cursor:'pointer'})
        })
        jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})       
    })
}
}

//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('1', '80px', 1000)

---

当然也使用 mootools 插件。

我的问题是我应该如何在上面的脚本中使用var $j = jQuery.noConflict();来防止冲突

Answer 1

如果问题只是，您加载 MooTools，然后加载 jQuery，然后 MooTools 不起作用，因为 jQuery 已经接管了美元功能，那么您可能只需要这样的代码：

<script type="text/javascript" src="mootools.js"> </script>
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

That should get jQuery to relinquish $()。您问题中的代码已经做了其他方便的事情，即使用就绪事件处理程序的参数作为在本地使用 jQuery 对象的较短名称的方法。

我强烈建议阅读 有关使用其他库的 jQuery 页面，也许还有 noConflict() 函数。

Answer 2

将所有依赖 jQuery 的 JavaScript 封装在一个闭包中，以防止命名空间冲突，如下所示：

// Start closure to prevent namespace conflicts
;(function($) {

  // Whatever code you want that relies on $ as the jQuery object

// End closure
})(jQuery);

看起来很奇怪，但语法是正确的（是的，第一行以分号开头）。这会自动用 jQuery 替换 $ 对象，jQuery 和 mootools 都使用该对象。由于您同时使用两者，因此您应该将所有 jQuery 代码包装在像这样的闭包中（每个 .js 文件或 script 标记一个）。