JQuery官方学习资料：避免与其他库的冲突

 

• 避免与其他库的冲突

    JQuery库和它所有的插件都是包含在jQuery命名空间下的，作为一般规则，全局对象被存储在jQuery的命名空间内，所以你不会得到jQuery和任何其他库之间的冲突（例如：prototype.js、MooTools、YUI）。

    需要注意的是，默认情况下可以使用$符号作为jQuery的缩写。如果你使用其他JavaScript库，而且使用了$符号，那么运行的时候会出现一些冲突。为了避免这些冲突，需要设置JQuery为无冲突模式。

 

• 设置无冲突模式

    当你设置JQuery为无冲突模式，你必须分配一个新的变量来取代$符号。

<!-- 无冲突模式 --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // $j是jQuery方法的别名;创建新的别名是可选的。 $j(document).ready(function() { $j( "div" ).hide(); }); // $的意义是document.getElementById()的快捷方式. mainDiv是一个DOM元素,而不是一个jQuery对象。 window.onload = function() { var mainDiv = $( "main" ); } </script>

    在上面的代码中，$将在原库中恢复它的意义。你仍然是能够在你的应用程序的其余部分使用jQuery作为全功能名称以及新的别名$ J。新别名可以被命名为任何你想要的名称。例如，JQ$ J、awesomeQuery等。

    最后，如果你不想定义另一个替代完整的jQuery函数名，那么你还是可以尝试另一种方法，只需添加$作为参数传递给jQuery( document ).ready()函数，这是使用最频繁的方法，不会引起与其他库的冲突。

<!-- 无冲突模式的另一种设置方式 --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); jQuery( document ).ready(function( $ ) { // 你可以在这里使用$作为JQuery的别名。 $( "div" ).hide(); }); // $在全局范围内是有prototype.js意义的. window.onload = function(){ var mainDiv = $( "main" ); } </script>

    考虑到用更少的代码以实现完全的兼容，这可能是最理想的解决方案。

 

• 引用JQuery在其他库之前

    上面的代码片段，在prototype.js加载后再加载jQuery。如果引用jQuery在其他库之前，你可以使用jQuery当你做一些工作的时候，但$符号将为其他库中定义的涵义。这里不需要通过调用jQuery.noConflict()放弃$符号。

<!-- 在其他库之前加载JQuery --> <script src="jquery.js"></script> <script src="prototype.js"></script> <script> // 使用完整的JQuery名称来进行操作。 jQuery( document ).ready(function() { jQuery( "div" ).hide(); }); // 使用$作为prototype.js的定义 window.onload = function() { var mainDiv = $( "main" ); }; </script>

 

• 引用JQuery函数的多种方式

    下面的方法，你可以引用JQuery函数在其他库创建了一个存在冲突的变量$的时候。

 

• • 创建一个新别名

    这jQuery.noConflict()函数返回一个JQuery函数引用，这样你就可以捕获任何一个你想要的变量。

<script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $jq = jQuery.noConflict(); </script>

 

• • 使用立即调用的函数表达式

    您可以继续使用标准的$符号来包装你的代码，并立即调用函数表达式，这也是一个jQuery插件创作的标准模式，在这里作者也不知道是否将会采取另一个库超出了$的标准模式。

<!-- 在立即调用的函数中使用$ --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); (function( $ ) { // 你可以在这里使用$。 })( jQuery ); </script>

    请注意，如果你使用这个技巧，你将不能够立即调用函数来使用其内部的prototype.js的方法。

 

• • 使用参数传递给jQuery( document ).ready()函数

<script src="jquery.js"></script> <script src="prototype.js"></script> <script> jQuery(document).ready(function( $ ) { // 你可以在这里使用$。 }); </script>

    或者使用更简洁的语法：

<script src="jquery.js"></script> <script src="prototype.js"></script> <script> jQuery(function($){ // 你可以在这里使用$。 }); </script>