jQuery与Prototype冲突解决方案：命名空间与立即执行函数

jQuery与Prototype冲突背景

然而，由于jQuery和Prototype框架均使用美元符号“$”作为核心选择器函数，当两者同时引入时，$函数会被重复定义，从而导致其中一个框架的功能失效。

针对这一问题，社区中出现了多种解决思路，其中一种较为流行的方案如下所示。

<script src="http://jquery.com/src/latest/"></script>
<script type="text/javascript">
JQ = $; //rename $ function
</script>
<script src="prototype.js"></script>
<script src="http://jquery.com/src/latest/"></script>
<script type="text/javascript">
JQ = $; //rename $ function
</script>
<script src="prototype.js"></script>

传统重命名方案

通过上述方式，可以将jQuery中的$函数重命名为JQ，而Prototype中的$函数则保持原样继续使用。例如：

<script type="text/javascript">
JQ(document).ready(function(){
JQ("#test_jquery").html("this is jquery");
$("test_prototype").innerHTML="this is prototype";
}); 
</script>
<script type="text/javascript">
JQ(document).ready(function(){
JQ("#test_jquery").html("this is jquery");
$("test_prototype").innerHTML="this is prototype";
}); 
</script>

尽管这种方法在一定程度上缓解了冲突，但对于习惯使用jQuery的开发人员而言，将原有的$符号替换为JQ或其他字符并非理想选择。同理，Prototype的用户也不愿放弃原有的$用法。因此，是否存在一种能让两个框架更和谐共存的解决方案？

下面介绍一种不同的解决思路，请先观察以下代码片段并推测其效果。

效果其实很简单，即弹出一个提示窗口显示“helloworld”。仔细观察这段Script代码，它由前后两组括号构成：第一组括号内包含一个函数定义，第二组括号内则是一个字符串参数。这种结构实际上完成了一次函数调用，即先定义函数，再立即传入参数执行。

基于立即执行函数的解决方案

接下来展示一个实际应用的示例：

<script type="text/javascript" src="jquery-1.2.6.js">
</script>
<script type="text/javascript" src="prototype-1.6.0.2.js">
</script>
<div id="test_jquery"></div>
<div id="test_prototype"></div>
<script type="text/javascript">
<!-- 
(function($){
$(document).ready(function(){
alert($("#test_jquery").html("this is jqeury"));
}); 
})(jQuery);
$("test_prototype").innerHTML="this is prototype";
//--> 
</script>
<script type="text/javascript" src="jquery-1.2.6.js"> </script>
<script type="text/javascript" src="prototype-1.6.0.2.js"> </script>
<div id="test_jquery"></div>
<div id="test_prototype"></div>
<script type="text/javascript">
<!-- 
(function($){ $(document).ready(function(){ alert($("#test_jquery").html("this is jqeury")); }); })(jQuery); $("test_prototype").innerHTML="this is prototype"; //--> </script>

经过测试，jQuery与Prototype在此模式下均能正常工作。与以往不同的是，我们需要在原有的jQuery代码外层包裹一层“外套”：

(function($){
//这里写Jquery代码
})(jQuery);
(function($){
//这里写Jquery代码 })(jQuery);

这种“外套”巧妙地利用了函数局部变量的作用域特性，确保开发者可以继续使用原有的jQuery写法，无需修改$符号。该方案更适合于将现有的jQuery代码升级至同时支持jQuery和Prototype的环境。

方案局限性与插件兼容性

然而，该方案也存在不足之处：

它并未彻底解决jQuery插件的兼容性问题。这一问题在传统方法中同样存在，通常需要手动修改插件脚本中对$的调用。根本解决之道在于未来的插件开发应采用上述立即执行函数的模式编写，以确保其可用性。目前，jQuery UI似乎已采用此方式，从Demo源码中可见端倪。