>

九分钟带您玩转jQuery

- 编辑:正版管家婆马报彩图 -

九分钟带您玩转jQuery

jQuery是这几天利用最广大的前端框架之一,有大气的第三方库和插件基于它支付。为了幸免全局命名空间污染,jQuery提供了jQuery.noConflict()方法消除变量抵触。那些主意,无可争辩,特别实用。可惜的是,jQuery的法定文书档案对该措施的陈诉远远不足明显,非常多开辟者并不明白当他们调用jQuery.noConflict()时,毕竟发生了何等,进而致使在应用时出现了无数难点。纵然如此,jQuery.noConflict()背后完成原理依然值得Web开拓者学习通晓,成为化解类似全局命名空间污染难题的利器。

五秒钟带您玩转jQuery.noConflict(),jquery.noconflict

jQuery是时下接纳最广泛的前端框架之一,有恢宏的第三方库和插件基于它支付。为了制止全局命名空间污染,jQuery提供了jQuery.noConflict()方法消除变量冲突。这几个艺术,没有什么可争辨的,特别有效。缺憾的是,jQuery的官方文书档案对该方法的汇报远远不够清晰,大多开荒者并不理解当她们调用jQuery.noConflict()时,毕竟发生了什么样,进而导致在接纳时出现了广大标题。尽管如此,jQuery.noConflict()背后完结原理依旧值得Web开拓者学习精晓,成为解决类似全局命名空间污染难题的利器。

jQuery.noConflict()的作用?

  jQuery.noConflict()的留存独有二个目标:它同意你在同三个页面加载几个jQuery实例,越发是见仁见智版本的jQuery。你大概会感觉意外,为何要在一个页面加载/使用多少个不等版本的jQuery对象呢?一般来讲,有三种处境。第一种处境,你的职业代码应用了新式版的jQuery库,而你选用的第三方插件依赖的更早版本的jQuery库;第三种情状,你正维护着三个连串,它已有些职业代码由于各样原因,引用了较老版本的jQuery库,你新开采的模块选取的是任何版本的jQuery库。不论哪一种情形,你都只可以面前遭受,jQuery对象/方法冲突的难点。幸运的是,jQuery.noConflict()帮您消除了这几个烦恼。

jQuery被加载时发生了怎么?

当jQuery被页面援引/加载时,它被封装在多个自试行函数(无名氏函数)里,它提供的有着一切变量、函数、对象都在佚名函数内部的可施行境遇内,外界意况不能调用,以幸免全局命名空间污染。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

jQuery在无名氏函数内部定义了多少个全局对象:jQuery和$,把温馨揭示给外界遭遇。开垦者习于旧贯使用的种种公共措施都是透过那七个对象开展拜望的,如jQuery.ajax(),jQuery.css()等。在开始时代,它们指向无名氏函数内部的同二个目的jQuery(私有变量),通过它访谈无名函数内部的村办变量和函数。那使得无名氏函数在自进行后其里面包车型大巴民用变量和函数照旧进驻在内部存款和储蓄器里,不会被javascript的垃圾堆回收机制清除。

window.jQuery = window.$ = jQuery; 

当jQuery被页面加载后,当前页面有望早已存在了jQuery和$这四个全局变量(例如,加载了其他的第三方库,其内部也定义了它俩),那就能够促成已经存在的对象被覆盖(全局命名空间污染)。为了消除那几个难点,jQuery在在那之中先将早就存在的全局变量缓存起来,保存在个体变量_jQuery和_$中,供后续调用。所以,假设页面在加载jQuery库时,还一纸空文jQuery和$对象,那么_jQuery和_$都以undefined;否则,它们都会保留对已有jQuery和$的援用(可能来自在此之前援引的第三方库或是区别版本的jQuery库)。之后,jQuery会像上文说描述的那么,覆盖那多少个全局变量并将和谐暴露给外界蒙受。至此,页面上的全局变量jQuery和$已经指向刚刚引进的jQuery库。

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// Otherwise expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery; 

jQuery.noConflict()的玄妙效用?

假定你维护的系统已经援引了1.7.0本子的jQuery库,而你在新扩大长的法力里援用了1.10.2版本的jQuery库。那么,还会有办法另行行使jQuery 1.7.0 或是同有时间使用五个版本的jQuery库吗?答案是必定,那就是jQuery.noConflict()。实际上,利用jQuery.noConflict(),你能够及时把全局变量jQuery和$重新指向从前援用的目的。很奇妙啊?那便是为啥jQuery在对外暴露自个儿前内部缓存了事先引用的指标。

  jQuery.noConflict()接受三个可选的布尔值参数,平常暗许值是false。这一个参数会带来怎样震慑呢?其实,异常的粗略。倘诺调用jQuery.noConflict()或是jQuery.noConflict(false),独有全局变量$会被重新恢复设置恢复生机成此前的引用值;即使调用jQuery.noConflict()或是jQuery.noConflict(true),那么全局变量jQuery和$都会被重新恢复设置恢复生机成以前的引用值。那一点特别重要,提出牢记。当您调用jQuery.noConflict(false/true)之后,它会回去当前jQuery的实例,利用那么些性子大家得以完毕jQuery的重命名。

// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

我们再来看三个代码片段,测量试验一下是或不是确实清楚了神奇的noConflict()

<!-- jQuery and $ are undefined -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery and $ now point to jQuery 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.7.0 -->
<script>jQuery.noConflict();</script>
<!-- jQuery still points to jQuery 1.7.0; $ now points to jQuery 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.6.4 -->
<script>var jquery164 = jQuery.noConflict( true );</script>
<!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 --> 

幸免第三方库的争执

如上的代码片段体现了什么样缓慢解决多版本jQuery的冲突。接下来,大家品尝化解jQuery库和第三方库的争辩,下边出现的代码片段在jQuery的官方文书档案中都有,风野趣的程序员可以稳重翻阅官方文档体会其中的分别。

平素利用No-Conflict情势

采用No-Conflict方式,其实正是对jQuery进行重命名,再调用。

<!-- 采用no-conflict模式,jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j 引用了jQuery对象本身.
$j(document).ready(function() {
$j( "div" ).hide();
});
// $ 被重新指向prototype.js里定义的对象
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script> 

利用自实施函数封装

动用这种方法,你能够在佚名函数内部继续选择标准的$对象,那也是多数jQuery插件选用的主意。须要留心的是,使用这种形式,函数内部不能再接纳prototype.js定义的$对象了。

<!-- jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
</script> 

行使标准jQuery(document).ready()函数

假如jQuery库在其他库此前引进,那么jQuery内部定义的jQuery和$会被第三方库覆盖,那时候再使用noConflict()已经未有怎么意思了。消除的秘技很简短,直接选拔jQuery的职业调用格局。

<!-- jquery.js在prototype.js之前被引入. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// 或者
jQuery(function($){
// Your jQuery code here, using the $
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>

上边给我们介绍jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标记符的调控,那样任何脚本就能够动用它了。

实例

自然,您还能够经过全名替代简写的措施来行使 jQuery:

$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行!");
});
});

实例

您也可以制造和睦的简写。noConflict() 可回到对 jQuery 的援用,您能够把它存入变量,以供稍后使用。请看这几个例子:

var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行!");
});
});

实例

设若您的 jQuery 代码块使用 $ 简写,而且您不甘于退换那个快速方式,那么您可以把 $ 符号作为变量传递给 ready 方法。那样就能够在函数Nelly用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":

$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行!");
});
});

jQuery.noConflict()的作用?

你大概感兴趣的文章:

  • 『jQuery』名称争辨使用noConflict方法化解
  • jQuery中 noConflict() 方法应用
  • jquery插件争论(jquery.noconflict)消除办法分享
  • jQuery中noconflict函数的落到实处原理分解
  • jQuery中noConflict()用法实例剖判
  • 轻巧解决jQuery.noConflict()

jQuery是当下使用最常见的前端框架之一,有大批量的第三方库和插件基于它开拓。为了防止全局...

  jQuery.noConflict()的存在唯有八个目标:它同意你在同八个页面加载四个jQuery实例,越发是见仁见智版本的jQuery。你或者会感到奇异,为啥要在三个页面加载/使用五个分化版本的jQuery对象啊?一般来讲,有两种情况。第一种景况,你的工作代码应用了流行版的jQuery库,而你拔取的第三方插件注重的更早版本的jQuery库;第三种意况,你正维护着三个系统,它已部分工作代码由于各类缘由,引用了较老版本的jQuery库,你新开采的模块选用的是任何版本的jQuery库。不论哪一类情景,你都只好面对,jQuery对象/方法抵触的难点。幸运的是,jQuery.noConflict()帮你消除了那一个烦恼。

jQuery被加载时发出了何等?

当jQuery被页面援引/加载时,它被封装在三个自实践函数(无名函数)里,它提供的富有一切变量、函数、对象都在无名氏函数内部的可施行景况内,外界蒙受不或然调用,以免止全局命名空间污染。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

jQuery在无名函数内部定义了四个全局对象:jQuery和$,把本人暴露给外界意况。开拓者习惯使用的种种公共措施都以透过那七个目的开展探望的,如jQuery.ajax(),jQuery.css()等。在早期,它们指向无名函数内部的同二个目的jQuery(私有变量),通过它访谈无名氏函数内部的村办变量和函数。那使得佚名函数在自实践后当中间的民用变量和函数还是进驻在内部存款和储蓄器里,不会被javascript的污源回收机制清除。

window.jQuery = window.$ = jQuery; 

当jQuery被页面加载后,当前页面有异常的大恐怕早已存在了jQuery和$这多少个全局变量(举例,加载了其他的第三方库,其内部也定义了它俩),那就能够产生已经存在的目的被掩盖(全局命名空间污染)。为了减轻这一个难题,jQuery在其间先将已经存在的全局变量缓存起来,保存在民用变量_jQuery和_$中,供后续调用。所以,如果页面在加载jQuery库时,还海市蜃楼jQuery和$对象,那么_jQuery和_$都以undefined;不然,它们都会保留对已有jQuery和$的援引(或然来自在此之前援用的第三方库或是不一样版本的jQuery库)。之后,jQuery会像上文说描述的那么,覆盖那七个全局变量并将团结揭示给外界情况。至此,页面上的全局变量jQuery和$已经指向刚刚引进的jQuery库。

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// Otherwise expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery; 

jQuery.noConflict()的美妙作用?

比如你维护的连串现已引用了1.7.0版本的jQuery库,而你在新加上的机能里援引了1.10.2本子的jQuery库。那么,还应该有办法重新使用jQuery 1.7.0 或是同一时候利用七个本子的jQuery库吗?答案是必定,这正是jQuery.noConflict()。实际上,利用jQuery.noConflict(),你能够及时把全局变量jQuery和$重新指向此前引用的靶子。很神奇啊?那正是干什么jQuery在对外暴光本身前内部缓存了事先援用的目的。

  jQuery.noConflict()接受三个可选的布尔值参数,常常默许值是false。那么些参数会拉动哪些影响啊?其实,非常的粗略。假诺调用jQuery.noConflict()或是jQuery.noConflict(false),唯有全局变量$会被重新恢复设置复苏成此前的援用值;若是调用jQuery.noConflict()或是jQuery.noConflict(true),那么全局变量jQuery和$都会被重新设置苏醒成以前的引用值。这点格外重大,建议牢记。当你调用jQuery.noConflict(false/true)之后,它会回到当前jQuery的实例,利用那些特点大家可以完毕jQuery的重命名。

// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

大家再来看四个代码片段,测验一下是或不是确实精通了美妙的noConflict()

<!-- jQuery and $ are undefined -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery and $ now point to jQuery 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.7.0 -->
<script>jQuery.noConflict();</script>
<!-- jQuery still points to jQuery 1.7.0; $ now points to jQuery 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.6.4 -->
<script>var jquery164 = jQuery.noConflict( true );</script>
<!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 --> 

防止第三方库的争辩

如上的代码片段呈现了怎么着缓慢解决多版本jQuery的争辨。接下来,大家尝试消除jQuery库和第三方库的抵触,上面出现的代码片段在jQuery的官方文书档案中都有,有意思味的程序员能够细心阅读官方文书档案体会个中的界别。

直接行使No-Conflict格局

使用No-Conflict情势,其实正是对jQuery举办重命名,再调用。

<!-- 采用no-conflict模式,jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j 引用了jQuery对象本身.
$j(document).ready(function() {
$j( "div" ).hide();
});
// $ 被重新指向prototype.js里定义的对象
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script> 

选择自进行函数封装

选取这种方法,你能够在无名氏函数内部继续运用正式的$对象,那也是非常多jQuery插件选拔的不二等秘书籍。必要小心的是,使用这种格局,函数内部不可能再采用prototype.js定义的$对象了。

<!-- jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
</script> 

动用规范jQuery(document).ready()函数

一经jQuery库在别的库从前引入,那么jQuery内部定义的jQuery和$会被第三方库覆盖,那时候再使用noConflict()已经远非什么意思了。化解的方式极粗略,直接动用jQuery的正规调用格局。

<!-- jquery.js在prototype.js之前被引入. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// 或者
jQuery(function($){
// Your jQuery code here, using the $
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>

下边给大家介绍jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标志符的支配,那样任何脚本就足以应用它了。

实例

自然,您还是能经过全名替代简写的主意来行使 jQuery:

$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行!");
});
});

实例

您也能够创立和睦的简写。noConflict() 可回到对 jQuery 的援引,您能够把它存入变量,以供稍后使用。请看这些例子:

var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行!");
});
});

实例

如果您的 jQuery 代码块使用 $ 简写,况且您不甘于改造这一个急迅格局,那么您能够把 $ 符号作为变量传递给 ready 方法。这样就能够在函数Nelly用 $ 符号了 - 而在函数外,照旧不得不使用 "jQuery":

$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行!");
});
});

你可能感兴趣的小说:

  • 制止jQuery名字冲突noConflict()方法
  • 自在解决jQuery.noConflict()
  • jQuery中noConflict()用法实例深入分析
  • jQuery中noconflict函数的贯彻原理分解
  • jquery插件争辩(jquery.noconflict)化解办法分享
  • jQuery中 noConflict() 方法应用
  • 『jQuery』名称争持使用noConflict方法化解
  • jQuery用noConflict取代$的兑现方式

本文由网络计算发布,转载请注明来源:九分钟带您玩转jQuery