Question

让我提出一些问题。我有一个JavaScript小部件。该小部件包含我网站上的jQuery副本。此小部件位于第三方网站上。该小部件解析JSON提要并将内容注入DOM。非常简单的东西。

如果第三方页面已经引用了jQuery并依赖于jQuery插件，则可能会出现冲突。特别是，当第三方站点引用不同版本的jQuery时。 $ .noConflict（）很有用，但插件的存在使它不可靠。来自$.noConflict() documentation：

如果有必要，我们可以释放 jQuery名称以及传递true为方法的一个参数。这是很少有必要，如果我们必须这样做这（例如，如果我们需要使用多个版本的jQuery 我们需要在同一页面上的库）考虑到大多数插件依赖存在jQuery变量并且可能无法正常运行情况。

为了解决这个问题，我的想法是重置jQuery全局对象的名称。在jQuery源代码的底部，有以下几行：

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

我可以将这些行重构为：

// Expose jQuery to the global object
window.myjQuery = jQuery;

我已经删除了速记$变量，我已经将jQuery更改为myjQuery。现在我的代码看起来像这样：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>myjQuery</title>
    <script type="text/javascript" src="myjquery-1.4.js" />
    <script type="text/javascript">
      // .ready() can alias the jQuery object
      // I can pass $ and write code as normal
      myjQuery(document).ready(function($) {
        $('p').css('color', 'red');
      });

      // Fails
      jQuery(document).ready(function($) {
        $('p').css('color', 'blue');
      })

      // Fails
      $(document).ready(function() {
        $('p').css('color', 'green');
      })

    </script>
</head>
<body>
    <p>myjQuery changed my color to red.</p>
</body>
</html>

这是个好主意吗？我不知道图书馆的内部是否足够肯定。我理解库基本上是一个闭包，所以我猜这种方法没问题。想法？

编辑：我接受了Doug的回答，因为他提供的代码几乎与$ .noConflict（）文档页面上的示例相同。我之前没有注意到它。这是一个例子：

// Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);

// Do something with the new jQuery
dom.query("div p").hide();

// Do something with another library's $()
$("content").style.display = 'none';

// Do something with another version of jQuery
jQuery("div > p").hide();

Answer 1

如果您不需要，编辑已发布的文件通常不是一个好主意。我读了你的问题，这个解决方案将满足你的需求。根本不要编辑jQuery核心。这样做：

<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
  // Revert $ and jQuery to their original values:
  window.myjQuery = jQuery.noConflict(true);
  (function($){
    // Inside here, $ = myjQuery

    $(document).ready(function(){

    });
  })(window.myjQuery);
</script>

重要的是让您的小部件包含jQuery，然后立即调用noConflict(true)并将其存储在变量中。

如果您完全按照这些步骤操作，则不会影响页面上现有的jQuery实例或插件。它只会在变量myjQuery中为您自己的插件提供私有版本的jQuery。

其次，使用自执行匿名函数，您可以为窗口小部件创建一个私有作用域，其中$等于您包含的jQuery文件。

我可以重置jQuery的全局对象的名称吗？

1 个答案: