轻松搞定jQuery.noConflict()


Posted in Javascript onFebruary 15, 2016

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的官方文档中都有,有兴趣的程序猿可以仔细阅读官方文档体会其中的区别。

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()。

Javascript 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 #Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 #Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 #Javascript
10个JavaScript中易犯小错误
Feb 14 #Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 #Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 #Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 #Javascript
You might like
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
详解vue 命名视图
2019/08/14 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
Python入门篇之面向对象
2014/10/20 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python中is和==的区别详解
2018/11/15 Python
python爬虫容易学吗
2020/06/02 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
中学生期末评语
2014/02/03 职场文书
公务员转正考察材料
2014/02/07 职场文书
母亲节演讲稿
2014/05/27 职场文书
IT工程师岗位职责
2014/07/04 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Python实现仓库管理系统
2022/05/30 Python
源码安装apache脚本部署过程详解
2022/09/23 Servers