如果我们需要同时使用jQuery和其他JavaScript库,我们可以使用 $.noConflict()把$的控制权交给其他库。旧引用的$ 被保存在jQuery的初始化; noConflict() 简单的恢复它们。
通过类似swap交换的概念,先把之前的存在的命名空间给缓存起来,通过对比当前的命名空间达到交换的目的,首先,我们先判断下当前的的$空间是不是被jQuery接管了,如果是则让出控制权给之前的_$引用的库,如果传入deep为true的话等于是把jQuery的控制权也让出去了。
如果不通过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.$ = _$;//window.$被释放 } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; //window.jQuery被释放,两个版本jQuery时 } return jQuery; };
demo:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试noConflict效果</title> <script src="jquery.js"></script> </head> <body> <div id="aaron">测试noConflict效果</div> <script type="text/javascript"> $("#aaron").click(function() { $.noConflict(); //让出控制权 // $.noConflict(true); //window.$,window.jQuery让出控制权 if (!$) { show("使用noConflict后,$不存在") console.log("使用noConflict后,$不存在") } if (jQuery) { show("使用noConflict后,jQuery存在") } //通过闭包隔离出$
(function($) { if ($) { show("通过闭包隔离后,转为局部变量$存在") } })(jQuery); }) function show(data) { jQuery("body").append('<li>' + data + '</li>') } </script> </body> </html>
通过闭包隔离出$,我们的代码很多地方是这样用的。尤其嵌入别的网站内的。
(function($) { })(jQuery || $);
有的js是jquery的结构