>

自在化解jQuery,四分钟带您玩转jQuery

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

自在化解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 方法。那样就可以在函数内使用 $ 符号了 - 而在函数外,依然不得不使用 "jQuery":

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

jQuery.noConflict()的作用?   jQuery.noConflict()的留存唯有叁个指标:它同意你在同五个页面加载四个jQuery实例,极度是例外版本的jQuery。你可能会以为意外,为啥要在多个页面加载/使用多个不等版本的jQuery对象啊?一般来说,有两种景况。第一种景况,你的事务代码应用了流行版的jQuery库,而你选用的第三方插件依赖的更早版本的jQuery库;第三种情景,你正维护着二个系统,它已部分职业代码由于种种缘由,援引了较老版本的jQuery库,你新开拓的模块采纳的是别的版本的jQuery库。不论哪一类状态,你都只好面前遇到,jQuery对象/方法争论的难题。幸运的是,jQuery.noConflict()帮您化解了这一个烦恼。

您可能感兴趣的稿子:

  • 『jQuery』名称争辨使用noConflict方法消除
  • jQuery中 noConflict() 方法运用
  • jquery插件争辩(jquery.noconflict)化解方式分享
  • jQuery中noconflict函数的兑现原理分解
  • jQuery中noConflict()用法实例深入分析
  • 轻巧解决jQuery.noConflict()

jQuery是近期采纳最广大的前端框架之一,有雅量的第三方库和插件基于它开拓。为了制止全局...

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的法定文档中都有,风野趣的程序员能够稳重翻阅官方文书档案体会在那之中的区分。

1、直接运用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>

2、使用自实行函数封装
  使用这种措施,你可以在无名函数内部继续选取典型的$对象,那也是无数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>

3、使用专门的学问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()使用方式,希望我们分分钟能够玩转jQuery.noConflict()。

您只怕感兴趣的作品:

  • 幸免jQuery名字争辨noConflict()方法
  • 四分钟带你玩转jQuery.noConflict()
  • jQuery中noConflict()用法实例深入分析
  • jQuery中noconflict函数的兑现原理分解
  • jquery插件争论(jquery.noconflict)化解方式分享
  • jQuery中 noConflict() 方法应用
  • 『jQuery』名称争执使用noConflict方法消除
  • jQuery用noConflict代替$的贯彻方式

本文由计算机操作发布,转载请注明来源:自在化解jQuery,四分钟带您玩转jQuery