解决jQery和其他库的冲突

刺骨的言语ヽ痛彻心扉 2022-07-13 11:48 143阅读 0赞

在jqury库中，几乎所有的插件都被限制在它的命名空间里。通常，全局对像都被很好地存储在jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、Mootools或YUI）一起使用时，不会引起冲突。  
*注意：默认情况下，jQuery用$作为自身的快捷方式。*  
**1、jQuery库在其他库之后导入**  
在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$控制权移交给其他JavaScript库。示例如下：  
（1）方法一：

//...省略其他代码
    <p id="pp">Test-prototype(将被隐藏)</p>
    <p>Test-jQuery（将被绑定单击事件）</p>
    <p>备注：prototype.js是对原生对象的功能增强，多是扩充原生对象。
    jquery.js是对原生语句的封装，多是构建自己的对象。<p>
    
    <script src="lib/prototype.js"></script>
    
    <script src="js/jquery-1.12.4.min.js"></script>
    <script> jQuery.noConflict();//将变量$的控制权移交给prototype.js jQuery(function(){ //使用jQuery jQuery('p').click(function(){ alert(jQuery(this).text()); }); }); $('pp').style.display='none';//使用prototype.js隐藏元素 </script>
    </body>
    //...省略其他代码

这样就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。

（2）方法二：  
可以自定义备注名称，如jq、$j、awesmequery等。  
如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作。

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

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

//...省略其他代码
    jQuery.noConflict();//将变量$的控制权移交给prototype.js
    jQuery(function($){//使用jQuery设定页面加载时执行的函数
        $('p').click(function(){//在函数内部继续使用$()方法
            alert($(this).text());
        });
    });
    $('pp').style.display='none';//使用prototype.js隐藏元素
    //...省略其他代码

②方法四：  
aSuncat备注：个人比较倾向于此方法

//...省略其他代码
    jQuery.noConflict(); //将变量$的控制权移交给prototype.js
    (function($){        //定义匿名函数并设置形参为$
        $(function(){    //匿名函数内部的$均为jQuery
            $('p').click(function(){   //继续使用$()方法
                alert($(this).text());
            });
        });
    })(jQuery);
    $('pp').style.display='none';     //使用prototype.js隐藏元素
    //...省略其他代码

（5）方法五  
aSuncat备注：如果工程项目用到jquery，但是插件要用zepto，就会倾向于使用这种方法。

//jquery与zepto的冲突
    window.$$=window.Zepto=Zepto;
    $(function(){ 
      //jquery用$
      $('p').on('click',funciton(){});
      //zepto用$$
      $$('#delayReason').on('click', function (){ 
          weui.picker(itemsDelayArr, {
            onConfirm: function (index) { 
              alert(1);                          
            }
          });
        });
    }

如果是要用到zepto的插件，直接用$$就行，

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

//...省略其他代码
    <p id="pp">Test-prototype(将被隐藏)</p>
    <p>Test-jQuery（将被绑定单击事件）</p>
    <p>备注：prototype.js是对原生对象的功能增强，多是扩充原生对象。
        jquery.js是对原生语句的封装，多是构建自己的对象。<p>
    
    <script src="js/jquery-1.12.4.min.js"></script>
    
    <script src="lib/prototype.js"></script>
    <script> jQuery(function(){ //直接使用jQuery,无需调用”jQuery.noConflict()函数“ jQuery('p').click(function(){ alert(jQuery(this).text()); }); }); $('pp').style.display='none';//使用prototype.js隐藏元素 </script>
    //...省略其他代码