jquery的noConflict问题

这其实是个老问题了。

首先, 我们要知道noConflict是干什么的。

我们直接从源码开始:

var
	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,

	// Map over the $ in case of overwrite
	_$ = window.$;

jQuery.noConflict = function( deep ) {
	if ( window.$ === jQuery ) {
		window.$ = _$;
	}

	if ( deep && window.jQuery === jQuery ) {
		window.jQuery = _jQuery;
	}

	return jQuery;
};

  

也就是说, jquery只干了一件事:

那就是备份$和jquery这两个变量。

而当你调用noConflict的时候, 把它还原。

并且把当前的jquery对象返回回去。

默认情况下, 只还原$, 如果传入deep参数, 那么也还原jQuery。

那么, 这个诡异的行为到底有什么作用呢?

这个问题就要从$的来历开始说起了。

$来源于php

这是个合法的名字, 并且打起来方便

对于米国人来说, 还是钱的意思。

所以是个非常合适的短名字。

那么,问题来了(找蓝翔)

当jQuery开始盛行的时候, 还有一个类库:prototype.js

他也用$做选择器。

而很多网站已有的代码,也用$做选择器。

那时候的通常写法是这样:

var $ = document.getElementById

在这种大环境下, jQuery用$, 是个很不得人心的事情。

那么jQuery又不想放弃这个优美的变量, 该怎么办好呢?

开发者想到了个办法,就是前面提到的noConflict,

那么使用者只要这样就可以了:

1 load prototype.js

2 load jQuery.js

3 调用jQuery.noConflict方法。

OK, 现在$被还原了。 那么我如何用jQuery呢?

1 用jQuery, 不用$

2 使用noConflict的返回值。 大概这么写:

(function ($){
    // code here
})(jQuery.noConfilict());

  

这样在这个小空间里, 想怎么写怎么写。

那么, 如果引入了两个jQuery,

比如说, 你用了jQuery1.2.6, 为了用新功能, 又加了jQuery1.4.6,

这时候不只是$冲突, jQuery也冲突啊

于是就有了deep这个参数。

if ( deep && window.jQuery === jQuery ) {
		window.jQuery = _jQuery;
}

  

从这句就可以看的出, 如果deep为true, 那么连jQuery这个变量也会被还原掉。

搞清楚了运行机制, deep参数以及返回值的意义

那么就不会对它的运行结果感到困惑了。

时间: 2024-07-29 08:49:39

jquery的noConflict问题的相关文章

jQuery之noConflict() 方法

jQuery 核心 - noConflict() 方法,运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库.这有助于确保jQuery不会与其他库的$对象发生冲突. noConflict() 方法源码: noConflict: function( deep ) { if ( window.$ === jQuery ) { window.$ = _$; } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery

jQuery用noConflict代替$

js框架很多的情况下,很容易出现冲突,建议使用noConflict代替$ //消除$对jquery缩写 $.noConflict(); //使用了noConflict后,用$就会无效,应用jQuery jQuery(document).ready(function(){ console.log("sdf"); }) 也可以指定新的代替jQuery的名称 var myjq=$.noConflict(); myjq(document).ready(function(){ console.l

jQuery库(noConflict)冲突解决机制

许多的JS框架类库都选择使用$符号作为函数或变量名,而且在实际的项目开发中,使用模板语言的话有可能"$"符号即为该模板语言的关键字.例如Veclocity模板语言,$是关键字.与jQuery一起使用可能会存在冲突(页面中直接写jq代码,引入的js文件不存在该问题).吐槽下为啥这么多js库喜欢用$($ is money?). jQuery是使用$符号作为函数或变量名最为典型的一个.在jQuery中,$符号只是window.jQuery对象的一个引用,因此即使$被删除,jQuery依然能保

jQuery的noConflict以及插件扩展

一.noConflict函数 JavaScript有很多插件,如果jQuery对象的$与其他插件冲突,我们可以使用noConflict()方法去掉$或者使用其他的符号代替 注:noConflict()函数不能调用两次,上面代码是方便向读者展示 二.jQuery的插件扩展 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery 的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQu

jQuery静态方法noConflict的使用和源码分析

所谓静态方法是jQuery本身得公共方法,并不需要通过实例化来调用,一般也称为工具方法,下面先来列绝下jQuery.noConflict方法的用法: noConflict() 方法让渡变量 $ 的 jQuery 控制权. 该方法释放 jQuery 对 $ 变量的控制. 该方法也可用于为 jQuery 变量规定新的自定义名称. var jq=$.noConflict(); 下面来做个测试: <script src='jquery-1.7.1.js'></script> <scr

jQuery 核心 - noConflict() 方法

摘录自W3School>> jQuery 核心参考手册 实例 使用 noConflict() 方法为 jQuery 变量规定新的名称: var jq=$.noConflict(); 定义和用法 noConflict() 方法让渡变量 $ 的 jQuery 控制权. 该方法释放 jQuery 对 $ 变量的控制. 该方法也可用于为 jQuery 变量规定新的自定义名称. 提示:在其他 JavaScript 库为其函数使用 $ 时,该方法很有用. 语法 jQuery.noConflict(remo

jQuery的noConflict应用

JQuery.noConflict(): 让出对$变量的使用权: 例如: <script type="text/javascript" src="/js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/bootstrapSelect/js/jquery-1.10.2.min.js">&

JQuery的noConflict()方法

1.onConflict()方法的作用 在页面同时使用多个js的框架. 2.代码示例 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>无</title> 5 <meta charset="utf-8"> 6 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> 7 &

jQuery中noConflict()机制的冲突解决方法

许多的JS框架类库都选择使用$符号作为函数或变量名,而且在实际的项目开发中,使用模板语言的话有可能"$"符号即为该模板语言的关键字.例如Veclocity模板语言,$是关键字.与jQuery一起使用可能会存在冲突(页面中直接写jq代码,引入的js文件不存在该问题). jQuery是使用$符号作为函数或变量名最为典型的一个.在jQuery中,$符号只是window.jQuery对象的一个引用,因此即使$被删除,jQuery依然能保证整个类库的完整性. jQuery的设计充分考虑了多框架之