欢迎光临
我们一直在努力

JQuery的$和其它JS发生冲突的快速解决方法

本篇文章主要是对JQuery的$和其它JS发生冲突的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery将浏览器DOM树定义为$,通过$来获取各个子节点。

然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题。现在我们来看看如何解决这个冲突问题。请看下文:

我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点。

第一种情况:先加载Prototype.js,再加载jQuery.js
jQuery noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。
使用jQuery.noConflict();主要作用是在任何时候,只要在jQuery加载后就可以调用,将$符号的使用权返回给其它的js库,jQuery在创建它自己的名字空间时就将其它库的$保存在自己的一个变量当中。

第二种情况:先加载jQuery.js,再加载Prototype.js
按照这样的顺序加载,就不存在其它js库的$符号被jQuery占用的问题。

举例:
方法一:通过全名替代简写的方式来使用 jQuery

< script type = "text/javascript" >
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function() { //使用jQuery
    jQuery("p").click(function() {
        alert(jQuery(this).text());
    });
});
$("pp").style.display = 'none'; //使用prototype
< /script>/

方法二:可以创建自己的简写,通过noConflict()函数来定义一个快捷方式用来获取dom节点

< script type = "text/javascript" >
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function() { //使用jQuery
    $j("p").click(function() {
        alert($j(this).text());
    });
});
$("pp").style.display = 'none'; //使用prototype
< /script>/

缺点:引入了这段代码后,不仅是当前的js文件,该html引用的所有js中,如果有用到jquery中的$,都得用$j来代替之前的$

方法三:如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 – 而在函数外,依旧不得不使用 “jQuery”:

< script type = "text/javascript" > 
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

//方法3-1
jQuery(document).ready(function($) {
    $("p").click(function() { //继续使用 $ 方法
        alert($(this).text());
    });
});

//方法3-2
jQuery(function($) { //使用jQuery
    $("p").click(function() { //继续使用 $ 方法
        alert($(this).text());
    });
});

$("pp").style.display = 'none'; //使用prototype
< /script>

方法3-1 缺点:只对ready嵌套内的代码有效,对嵌套外的代码是无效的。如果你所有的逻辑,都在写ready函数中,那没问题。但我们一般都会在ready函数之外写一些子函数,然后ready函数再去调用这些函数。这个方案对这些函数是无效的,因此这套方案有局限性。

方法四:使用语句块

< script type = "text/javascript" > 
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($) { //定义匿名函数并设置形参为$
    $(function() { //匿名函数内部的$均为jQuery
        $("p").click(function() { //继续使用 $ 方法
            alert($(this).text());
        });
    });
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
< /script>

这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

推荐方法三(3-2),方法四,特别是开发js插件时:

这两个方法,没有上面两个方法的缺点,只会影响到被包在jQuery(function($){}中的代码。 不会影响到其他js代码,这一点很重要。试想一下,假如你写了一个js公共组件,该组件需要用到jquery,为了提高鲁棒性,需考虑$符号冲突问题。如果使用方案二,那么别人在使用时,还得遵守你的约定,把自己js代码中的$改成$j,而如果使用方案三(3-2),方案四,既能避免$冲突对该组件的影响,又无需要求使用公共组件的人修改自己的代码。

 


注意:
1.引用javascript类库时,把jQuery引用放在最后面,可以避免冲突。
2.特别要注意jQuery()代替$()时,jQuery是区分大小写的,因为javascript本身就是区分大小写的。

作者:大道路漫漫
链接:https://www.jianshu.com/p/6b0a4656e525
來源:简书

未经允许不得转载:向凯旋的博客 » JQuery的$和其它JS发生冲突的快速解决方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网站建设 微信开发 网络营销 电子商务

联系我们在线咨询