如何将 jQuery 嵌入/导入到另一个 JavaScript 库中，而不会与网站上部署的 jQuery/其他库发生潜在

How to embed/import jQuery into another JavaScript library without causing potential clashes with jQuery/others deployed on the website?

本文关键字：jQuery 部署 其他 网站 导入 嵌入 另一个 库中 JavaScript      更新时间：2023-09-26

我正在开发一个内部使用 jQuery 的 JavaScript 库。但是，当需要部署时，我宁愿简化事情（w.r.t.部署），而不用担心环境是否已经（或没有）jQuery已经包含在<head>中。

我应该提到我的库在 Coffescript 中实现为一个类，生成的 .js 文件具有默认的函数包装器来隔离范围。

我可以想到这个问题的一些解决方案：

  1. 询问网站管理员他们是否已经存在jQuery。如果是的，只需包括库本身。如果没有，则包括 jQuery +库，可能在一个文件中并连接起来。部署更难，但问题可能会得到解决。

  2. 创建一个连接 jQuery 和我的 lib 代码的文件，并且始终让网站管理员只包含此文件。为防止冲突，在 jQuery 代码之后立即执行var myJ = jQuery.noConflict()。

  3. 按照上面的 （2） 执行，但在封装的 Coffeescript 类中调用var myJ = jQuery.noConflict()。

总之，这项挑战的目标是：

  1. 绝对避免部署网站上的任何破损，无论他们可能正在使用什么
  2. 使部署尽可能简单
  3. 如果可能的话，避免不必要的jQuery传输

我担心的是：

  • 如果网站已经有jQuery，但需要一个较旧/较新的网站怎么办版本？
  • 如果我的noConflict()电话破坏了他们的某些内容怎么办结束？

解决这种情况的最佳方法是什么？我错过了什么吗？

CoffeeScript 有一个 -b 选项，可以在没有顶级函数包装器的情况下进行编译。使用此方法，可以改用自己的顶级函数包装器。

即

(($) ->
    # ...
    # your code
    # ...
)(jQuery.noConflict())

然后，作为构建过程的一部分，将 jQuery 连接到已编译输出的前面。适当的 Linux/Mac shell 命令是：

(cat jQuery.js; coffee -pb yourSource.coffee) > yourCompiledFileWithjQuery.js

CoffeeScript 的p选项将编译后的输出打印到 stdout，以便您可以将其与cat jQuery.js组合并将该输出重定向到您的 CompiledFileWithjQuery 中.js

这将确保在执行代码之前，jQuery将被包含。 jQuery保留对$的旧所有者的引用，因此如果某个库或其他版本的jQuery已经在使用它，它将通过jQuery.noConflict()调用返回给他们。

jQuery.noConflict()还返回对该 jQuery 的引用，因此这就是它传递给代码$的方式。

我希望这是清楚的。

额外：

从几天前发布的 CoffeeScript 1.3 开始，你可以将其用于顶级函数包装器，这更清楚一些：

do ($ = jQuery.noConflict()) ->
    # ...
    # your code
    # ...

如果你的结束脚本作为闭包，你可以简单地将其作为参数传递jQuery，并检查它是否未定义。

(function($) {
  if (!$) {
    // load jQuery
  } else {
    // check jQuery version if needed or just use jQuery
    if ($.fn.jquery !== '1.7.2') {
        // load 1.7.2
    };
  };
})(window.jQuery || false);

必须使用 window.jQuery，因为如果未声明 jQuery，则只会生成错误

相关文章：