js多个库冲突的解决办法

        当一个项目中引入多个第三方库的时候，由于没有命名空间的约束（命名空间就好比同一个目录下的文件夹一样，名字相同就会产生冲突），库与库之间发生冲突在所难免。

        那么，既然有冲突的问题，为什么要使用多个库呢？原因是jQuery 只不过是DOM 操作为主的库，方便我们日常Web 开发。但有时，我们的项目有更多特殊的功能需要引入其他的库，比如用户界面UI 方面的库，游戏引擎方面的库等等一系列。

        而很多库，比如prototype、还有我们JavaScript 课程开发的Base 库，都使用“$”作为基准起始符，如果想和jQuery 共容有两种方法：

1. jQuery库在其他库之后导入

        在其他库和jQuery库都被加载完毕后，可以在任何时候调用 jQuery.noConflict()函数来将变量$的控制权让渡给其他javascript库。示例如下：

//....省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>

<!-- 引入 prototype -->
<script src="./js/prototype.js" type="text/javascript"></script>

<!-- 引入 jQuery -->
<script src="./js/jquery.js" type="text/javascript"></script>

<script>

    jQuery.noConflict();  //将变量$的控制权让渡给 prototype.js

    jQuery(function(){
        jQuery("p").click(function(){
            alert( jQuery(this).text());
        });
    });

    $("pp").style.display = "none";  //使用 prototype.js 隐藏元素

</script>

然后，就可以在程序中将 jQuery() 函数作为jQuery对象的制造工厂。

此外，还有另一种选择。如果想确保jQuery不会和其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：

//....省略其他代码


    var $j = jQuery.noConflict();  //自定义一个快捷方式

    $j(function(){                //使用jQuery，利用自定义快捷方式——$j
        
        $j("p").click(function(){
 alert( $j(this).text()); }); }); $("pp").style.display = "none"; //使用 prototype.js 隐藏元素
//....省略其他代码






如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么可以使用以下两种解决方法。

其一：

//....省略其他代码

    jQuery.noConflict();  //将变量$的控制权让渡给 prototype.js

    jQuery(function($){            //使用jQuery设定页面加载时执行的函数
        $("p").click(function(){   //在函数内部继续使用 $()方法
            alert( $(this).text());
        });
    });

    $("pp").style.display = "none";  //使用 prototype.js 隐藏元素
//....省略其他代码




其二：

//....省略其他代码

    jQuery.noConflict();  //将变量$的控制权让渡给 prototype.js

    (function($){         //定义匿名函数并设置形参为$
        $(function(){     //匿名函数内部的$均为jQuery
            $("p").click(function(){   //继续使用 $()方法
                alert($(this).text());
            });
        });
    })(jQuery);         //执行匿名函数且传递实参jQuery
 
 $("pp").style.display = "none";  //使用 prototype.js 隐藏元素
//....省略其他代码


这应该是最理想的方式，因为可以通过改变最少的代码来实现全面的兼容性



2. jQuery库在其他库之前导入
    如果jQuery库在其他库之前就导入了，那么可以直接使用 "jQuery" 来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。这里无需调用 jQuery.noConflict()函数。示例如下：

//....省略其他代码

<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>

<!-- 引入 jQuery -->
<script src="./js/jquery.js" type="text/javascript"></script>
<!--后引入 prototype --><script src="./js/prototype.js" type="text/javascript"></script><script> jQuery(function(){ jQuery("p").click(function(){ alert( jQuery(this).text()); }); }); $("pp").style.display = "none";
 //使用 prototype.js 隐藏元素</script>//....省略其他代码




建议将jQuery放在所有引用库之前，并利用定义匿名函数，设置形参$，并传递jQuery作为实参的方法