论坛首页 Web前端技术论坛

分析jQuery.noConflict()

浏览 2947 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-11-09  

    jQuery是有良好的封装,全局只有一个jQuery对象,不污染顶级域名。

    jQuery默认使用"$"操作符,prototype等其他框架也是是使用"$",于是,如果jQuery在其他库之后引入,那么jQuery将获得"$"使用权。这样的情况也很容易理解,毕竟JS是从上到下流式执行的。

    同样的道理,如果在其他使用"$"的库之前引入jQuery,那么jQuery将不会占用"$"。

 

在第一种情况时,如果想使jQuery让出"$",只需要使用下面的语句:

 

jQuery.noConfilct();
 

 

该函数会返回jQuery对象本身,于是可以用来取别名,例如

 var j = jQuery.noConfilt();

 

 

 其实,如果单纯地想取别名,使用var j = jQuery;就可以,但是上面的用法是更好的,后面会说到原因。

 

jQuery.noConfict()做了什么?怎么能够让出使用权?其实很简单,提前把$的原本对象保存起来,调用该方法的时候再恢复就可以。

下面是源码,相信一定能够看明白了:

 

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

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

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

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

		return jQuery;
	}

 

 

可以看出,这里的noConflict如果指定deep为true,是可以把jQuery的全局对象也让出来,这种用法可以用于多个jQuery版本的替换。

 

其实,这种noConflict用法是很常见的,在backbone中也这样的函数,见代码 

 // Save the previous value of the `Backbone` variable, so that it can be
  // restored later on, if `noConflict` is used.
  var previousBackbone = root.Backbone

  // Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable
  // to its previous owner. Returns a reference to this Backbone object.
  Backbone.noConflict = function() {
    root.Backbone = previousBackbone;
    return this;
  };
 

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics