解决多类库冲突——“$”变量冲突问题

来源：互联网发布：php怎么搭建sup 编辑：程序博客网时间：2024/04/19 22:09

解决多类库冲突——“$”变量冲突问题

因为在其他的javascript类库中，也会使用“$”变量作为类库对象的引用，比如Prototype。当一个页面需要同时使用两个脚本库时，就会产生冲突，导致“$”变量的引用不明确。

jQuery提供了jQuery.noConfilct()及其重载用来解决此问题，jQuery.noConflict函数有两个重载：

jQuery提供了jQuery.noConflict(extreme )，虽然官方类库提供了两个重载方法，但是javascript并支持重载，内部实现仅仅是一个函数，根据是否传入了参数而执行不同的处理。

jQuery.noConflict()的作用是将变量$的控制全转交给第一个实现他的那个库。如果extreme参数为“true”即表示同时将“jQuery”变量的控制权也转交出去。也许有的脚本中不仅仅占用了“$”变量而且连“jQuery”变量也占用了，比如：

jQuery.noConflict(true);

下面是一个同时使用jQuery类库和Prototype类库的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>jQueryStorm – 常见错误</title>

<scriptsrc=”../jquery-1.7.0.js” type=”text/javascript”></script>

</head>

<body>

<!—页面本部分 -->

<divid=”divMsg” style=”border:solid 1px #000000”;padding=20px;”>

[输出控制台 ]<br>

</div>

<!—尾部脚本块 –->

<scripttype=”text/javascript”>

jQuery.noConfilct();

$(“divMag”).innerHTML=”writtenby Prototype”; //调用Prototype

</script>

</body>

</html>

在上面的例子中先引用了prototype的类库，在引用了jQuery类库。因为javascript文件是顺序执行的，所以如果不使用jQuery.noConflict(),”$”变量将被jQuery使用。使用“$”调用prototype类库时将失效。使用noConflict函数后，“$”变量重新被Prototy类库使用。

jQuery.noConflict()函数返回原“jQuery”变量本身，应用此原理可以改变“jQuery”变量的引用名称：

$=jQuery.noConflict();

$(“divMsg”).innerHTML=”writtenby Prototype”; //调用Prototype

$$(“#divMsg”).html($$(“#divMsg”).html()+”<br/>”+”writtenby jquery”); //调用jQuery

上例子中将“jQuery”变量的引用赋给了“$$”变量，则可以使用”$”调用Prototype类库，使用“$$”调用jQuery类库。