确保永远不要有 JQuery 冲突

Be sure that never have JQuery conflict

本文关键字：JQuery 冲突 永远 确保      更新时间：2023-09-26

我需要创建可以用作每个站点截图的代码。当我将此代码复制粘贴到世界上任何 html 时，这应该可以工作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript"> my_jQuery = $.noConflict(true);</script>
<script type="text/jscript">
        my_jQuery(document).ready(function () {
            my_jQuery("#myDiv").html("Hello world");
        });
</script>
<div id="myDiv">
</div>

当然，在现实世界中，逻辑会更复杂，但原理是相同的。

因此，即使站点已经有 JQuery，

如果有相同版本的 JQuery，如果有不同的 JQuery 版本，或者即使根本没有 JQuery，这也必须有效。

我想确保客户端不使用某些旧版本的 JQuery，所以我希望始终使用我的 JQuery。

你怎么看，这会起作用还是有一些我没有考虑过的事情？

我认为这个问题应该以架构方式面对，知道哪些库/框架可用是一个设计问题......基本上，您不需要在运行时检查依赖项...如果你写jQuery，你必须确定jQuery存在！

顺便说一下，在某些情况下你不能这样做，例如，如果你正在编写一个 public/api（在异构环境中运行的代码片段）。在这些情况下，您可以执行以下操作：

  1. 将jQuery标记为对等依赖项
  2. 在运行时检查。

有一个运行时检查的示例：

<script>
  (function($) {
    var jQueryUrl = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
    
    $ || (document.writeln('<script src="'+ jQueryUrl +'"></script>'));
    
  })(window.jQuery);
</script>

为了避免冲突，最后，你不需要使用jQuery.noConflict，你需要使用javascript范围（闭包）...基本上，永远不要尝试访问全局 jQuery 别名$（永远不要使用全局变量），只需将其作为函数参数传递：

  1. (function($) { console.log('$', $); })(window.jQuery)
  2. window.jQuery(document).ready(function($) { console.log('$', $); });

我们需要做的第一件事是检查网站上是否存在jQuery。 jQuery是全局变量，因此如果加载了它，它应该在窗口对象中。我们可以这样检查：if (window.jQuery) {}

如果 jQuery 不存在，我们可以动态加载它，添加具有所需 jQuery 版本的脚本标记。因此，检查 jQuery 是否已加载和未加载（如果未加载）的片段答案如下所示： 

if (!window.jQuery) {
  var jq = document.createElement('script'); 
      jq.type = 'text/javascript';
      jq.src = 'http://code.jquery.com/jquery-1.12.1.min.js';
  document.getElementsByTagName('head')[0].appendChild(jq);
}

这将适用于

  1. 因此，即使站点已经具有JQuery，这也必须有效，
  2. 如果有相同版本的 JQuery，
  3. 如果有不同的 JQuery 版本，
  4. 或者即使根本没有 JQuery。

正如您根据代码看到的那样，除了第 4 种情况外，这适用于所有三种情况。对于这种情况，你必须检查窗口是否有jQuery对象。这可以通过以下方式完成： 

if(window.jQuery){
    var my_jQuery = $.noConflict(true);
    my_jQuery(document).ready(function () {
        my_jQuery("#myDiv").html("Hello world");
    });
}

注意：

<script type="text/jscript">

在IE以外的浏览器中不起作用。

相关文章：