jquery 多库共存机制
在web项目开发中,经常需要引用第三方js库，如果第三方js库与自已的一个js库使用相同的全局变量，是一个比较麻烦的事.程序员多半可能会修改其中一方的js代码.能不能有一个比较好的方法解决呢?让我们看一下jquery如何做到的.
jquery 多库共存机制指 jquery 库完全兼容第三方库, 例如jquery中使用 $ 做为函数入口,在该页面同时引入另一个库,其中也使用了 $ 做为函数名。因此jQuery与该库发生冲突
例1:
代码
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript" ></ script >
< SCRIPT LANGUAGE ="JavaScript" >
<!--
// 第三方库
function $(str)
{
return document.getElementById(str) ;
}
function jQuery(str)
{
return document.getElementById(str) ;
}
// -->
</ SCRIPT >
</ HEAD >
< BODY >
< input type = "text" id = "txt1" value = "aa" />
</ BODY >
</ HTML >
在如上示例中 第三方库同时使用了"$"与"jQuery",此时jquery入口被第三方库覆盖了. jquery 提供了noConflict函数解决冲突.
例2:
代码
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript" ></ script >
< script >
// 兼容代码
var $ 1 = $.noConflict();
$ 1 (document).ready( function (){
alert($ 1 ( " #txt1 " ).val())
alert($( " txt1 " ).value) ;
})
</ script >
< SCRIPT LANGUAGE ="JavaScript" >
<!--
// 第三方库
function $(str)
{
return document.getElementById(str) ;
}
function jQuery(str)
{
return document.getElementById(str) ;
}
// -->
</ SCRIPT >
</ HEAD >
< BODY >
< input type = "text" id = "txt1" value = "aa" />
</ BODY >
</ HTML >
noConflict重新将jquery 入口指针指向 $1,此时可以用$1访问jquery库,其中兼容代码要写在第三方库载入之前(如果写在之后，jquery 的 $和jQuery 入口被第三方库覆盖了,无法调用兼容代码).
在实际应用中，如果jquery载入位置在第三方库之后，jquery会覆盖第三方js库么? 如下代码.
例3:
代码
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< SCRIPT LANGUAGE ="JavaScript" >
<!--
// 第三方库
function $(str)
{
return document.getElementById(str) ;
}
function jQuery(str)
{
return document.getElementById(str) ;
}
// -->
</ SCRIPT >
< script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript" ></ script >
</ HEAD >
< BODY >
< input type = "text" id = "txt1" value = "aa" />
</ BODY >
</ HTML >
此处jquery 加载完毕已经将第三方库覆盖了.如果想调用第三方库，似乎有点困难. 当然jquery 已经提供了解决方法
例4:
代码
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< SCRIPT LANGUAGE ="JavaScript" >
<!--
// 第三方库
function $(str)
{
return document.getElementById(str) ;
}
function jQuery(str)
{
return document.getElementById(str) ;
}
// -->
</ SCRIPT >
< script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript" ></ script >
< script >
// 兼容代码
var $ 1 = $.noConflict();
$ 1 (document).ready( function (){
alert($ 1 ( " #txt1 " ).val())
alert($( " txt1 " ).value) ;
})
</ script >
</ HEAD >
< BODY >
< input type = "text" id = "txt1" value = "aa" />
</ BODY >
</ HTML >
例4中同样在jquery载入之后调用"兼容代码",和例2兼容代码相同,但意义上有差别.在例2中第三方库覆盖了jquery,其中兼容代码 的作用在第三方库覆盖jquery前，jquery 入口指针赋给"$1".在例4中与上相反,由于jquery库在载入完成时，已经将第三方库覆盖了,此时"$"指向jquery库,兼容代码作用是 将"$"重新指向第三方库.同时充许重新定义jquery入口.
jquery 兼容机制实现原理:
(示例代码以jquery-1.4.3为例 )
代码
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
//394-402行
noConflict: function( deep ) {
window.$ = _$;
if ( deep ) {
window.jQuery = _jQuery;
}
return jQuery;
},
其中29-32行，jquery执行前,将window.$,window.jQuery值保存到_$和_jQuery中(此时函数指针"jQuery","$"可能指向第三方库,此处为兼容处理做准备).
394-402 行将_jQuery和_$重新赋给window.$,window.jQuery,同时返回jquery函数指针. 不难看出调用noConflict函数后，被jquery"占用"的$与"jQuery"又交还给第三方库了.