四分钟带您玩转jQuery

jQuery是眼前选用最见死不救的前端框架之一,有大量的第三方库和插件基于它支付。为了幸免全局命名空间污染,jQuery提供了jQuery.noConflict(State of Qatar方法消除变量冲突。那么些办法,不容置疑,特别常有效。可惜的是,jQuery的官方文书档案对该方法的陈说非常不够清晰,多数开辟者并不知晓当他们调用jQuery.noConflict(卡塔尔国时,毕竟发生了怎样,从而招致在接受时现身了大多难题。固然如此,jQuery.noConflict(卡塔尔背后实现原理照旧值得Web开荒者学习掌握,成为解决近似全局命名空间污染难点的利器。

jQuery.noConflict()的作用?

  jQuery.noConflict(卡塔尔的存在独有三个目标:它同意你在同一个页面加载多少个jQuery实例,尤其是见智见仁版本的jQuery。你或然会认为诡异,为啥要在一个页面加载/使用八个区别版本的jQuery对象啊?日常而言,有二种情况。第一种景况,你的事体代码应用了流行版的jQuery库,而你选用的第三方插件信赖的更早版本的jQuery库;第三种情状,你正维护着贰个种类,它已部分专门的学业代码由于种种原因,引用了较老版本的jQuery库,你新开辟的模块接受的是其它版本的jQuery库。无论哪一种情景,你都只可以面临,jQuery对象/方法冲突的标题。幸运的是,jQuery.noConflict(卡塔尔(قطر‎帮您解决了这一个烦闷。

jQuery被加载时发出了什么样?

当jQuery被页面引用/加载时,它被封装在叁个自实践函数里,它提供的富有一切变量、函数、对象都在无名函数内部的可实行遇到内,外界情况不能够调用,避防备全局命名空间污染。

jQuery在无名函数内部定义了多个全局对象:jQuery和$,把本身暴露给外界意况。开采者习于旧贯使用的各类公共艺术都以经过那七个对象举行访谈的,如jQuery.ajax等。在最早,它们指向佚名函数内部的同贰个对象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 usualwindow.jQuery = window.$ = jQuery; 

jQuery.noConflict(卡塔尔的美妙功用?

比如你维护的连串现已援用了1.7.0版本的jQuery库,而你在新添长的功力里援用了1.10.2本子的jQuery库。那么,还会有办法重新使用jQuery
1.7.0
或是相同的时候利用五个本子的jQuery库吗?答案是早晚,那正是jQuery.noConflict(State of Qatar。实际上,利用jQuery.noConflict(卡塔尔,你可以致时把全局变量jQuery和$重新指向从前援用的对象。很漂亮妙吗?那就是干什么jQuery在对外揭发本人前内部缓存了事情发生前援用的靶子。

  jQuery.noConflict(卡塔尔采纳二个可选的布尔值参数,日常私下认可值是false。这么些参数会带来什么样影响吗?其实,很简单。纵然调用jQuery.noConflict(State of Qatar或是jQuery.noConflict,唯有全局变量$会被重新初始化苏醒成以前的援用值;假若调用jQuery.noConflict(卡塔尔(قطر‎或是jQuery.noConflict,那么全局变量jQuery和$都会被重新载入参数复苏成以前的援引值。那一点特别主要,提议牢牢记住。当您调用jQuery.noConflict之后,它会回来当前jQuery的实例,利用那几个特点大家能够兑现jQuery的重命名。

// "Renaming" jQueryvar jayquery = jQuery.noConflict;// Now we can call things like jayquery.ajax, and so on

我们再来看三个代码片段,测验一下是否真正通晓了玄妙的noConflict(卡塔尔国

<!-- jQuery and $ now point to jQuery 1.7.0 --><script>jQuery.noConflict();<!-- jQuery and $ now point to jQuery 1.6.4 --><script>var jquery164 = jQuery.noConflict; 

幸免第三方库的冲突

上述的代码片段体现了什么样消除多版本jQuery的冲突。接下来,大家品尝消除jQuery库和第三方库的冲突,下边现身的代码片段在jQuery的官方文书档案中都有,有趣味的程序员能够留神阅读官方文书档案心得个中的分歧。

从来行使No-Conflict格局

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

var $j = jQuery.noConflict();// $j 引用了jQuery对象本身.$j.ready {$j;// $ 被重新指向prototype.js里定义的对象// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.window.onload = function() {var mainDiv = $;} 

利用自施行函数封装

行使这种方法,你能够在无名氏函数内部继续运用正式的$对象,那也是累累jQuery插件接受的法子。须求注意的是,使用这种艺术,函数内部不能够再选取prototype.js定义的$对象了。

jQuery.noConflict {// Your jQuery code here, using the $}); 

运用正式jQuery函数

假如jQuery库在其余库在此之前引进,那么jQuery内部定义的jQuery和$会被第三方库覆盖,此时再选拔noConflict(State of Qatar已经未有何样意义了。解决的法子相当的轻便,直接行使jQuery的正经调用格局。

// Use full jQuery function name to reference jQuery.jQuery.ready {jQuery;// 或者jQuery{// Your jQuery code here, using the $});// Use the $ variable as defined in prototype.jswindow.onload = function() {var mainDiv = $;};

上面给我们介绍jQuery noConflict(卡塔尔(قطر‎ 方法

noConflict(卡塔尔(قطر‎ 方法会释放会 $ 标记符的决定,那样任何脚本就能够运用它了。

人之常情,您还是能因此全名代替简写的点子来使用 jQuery:

$.noConflict.ready{jQuery.click{jQuery.text;

您也足以创建和睦的简写。noConflict(卡塔尔(قطر‎ 可回到对 jQuery
的援引,您能够把它存入变量,以供稍后使用。请看那么些事例:

var jq = $.noConflict.ready{jq.click.text;

设若您的 jQuery 代码块使用 $
简写,并且您不愿意更正这么些飞速方式,那么您能够把 $ 符号作为变量传递给
ready 方法。那样就能够在函数内接受 $ 符号了 – 而在函数外,还是必须要使用
“jQuery”:

$.noConflict.ready{$.click.text;

发表评论

电子邮件地址不会被公开。 必填项已用*标注