javascript - 在 2 个 jQuery 插件上使用 jQuery noConflict 的示例

Question

我正在寻找一个 jQuery noConflict 示例，该示例在同一代码片段中显示 2 个 jQuery 插件，以及如何使用 jQuery.noConflict 以便这些插件正常运行。在下面的场景中它会应用在什么地方？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_1.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_2.js"></script>

<script type="text/javascript">    
$(document).ready(function() {
    // plugin_1 code...
}
</script>

<script type="text/javascript">    
$(document).ready(function() {
    // plugin_2 code...
}
</script>

Answer 1

大多数 Joomla 安装还与 MooTools 捆绑在一起，MooTools 使用 $ 和 $$ 以及使用 $ 的 jQuery。这听起来像是您遇到的问题。然而，这两个框架也有自己可以使用的全局变量。对于 MooTools，它是 document.id，对于 jQuery，它是 jQuery。作为一般规则，闭包有助于解决插件的兼容性问题。您可以选择使用闭包来修复插件或用它们包装您的 $(document).ready() 。我个人两者都做。

jQuery https://api.jquery.com/jquery.noconflict/

(function($){
   //jQuery code here
}(jQuery));

MooTools http://mootools.net/blog/2009/06/22/the-dollar-safe-mode

(function($){
   //MooTools code here
}(document.id));

许多全局值/变量也可能会出现同样的问题，例如使用某些插件覆盖未定义。

var undefined = null;
var isDefined = (typeof myVar === undefined);