分析jQuery.noConflict()

阅读更多

    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;
  };