Question

我需要创建可用作每个站点的剪切代码。当我将此代码粘贴到世界上的任何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。

您如何看待，这项工作还是有些我没有考虑过的事情？

Answer 1

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

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

将jQuery标记为peer-dependencies
在运行时检查。

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

＆＃13;

<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>

＆＃13;

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

$
(function($) { console.log('$', $); })(window.jQuery)

Answer 2

我们需要做的第一件事是检查网站上是否存在jQuery。 jQuery是全局变量，因此如果加载它应该在window对象中。我们可以这样检查：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);
}

Answer 3

这适用于

所以即使网站已经有了JQuery，这也必须有效，
如果有相同版本的JQuery，
如果有不同版本的JQuery，
~~或者即使根本没有JQuery~~ 。

正如您所看到的，根据您的代码，这对于所有三种情况都可以正常工作，但是第四种情况。在这种情况下，您必须检查窗口是否包含 jQuery 对象。这可以通过以下方式完成：

true

注意：

vk.addWindowListener(new WindowAdapter() {
        public void windowClosing(WindowEvent we) {
            vk.dispose(); // use dispose method 
         }
     }
);

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

确保永远不会发生JQuery冲突

3 个答案:

注意：