3

在我正在维护的一个项目中，我被迫在一页中坚持使用 2 个 jQuery lib 调用（至少现在是这样）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> /* 1st jQuery call */
<script>
    /* Section A - Some code that uses jQuery */
</script>

<script data-main="main" src="require.min.js">
     /* 2nd jQuery call made inside */
</script>

<script>
    /* Section B - Some code that uses jQuery */
</script>

这在 B 节中引起了一些奇怪，我已经验证了问题的根源是重复包含 jQuery 库。

假设我只能控制 AMD 部分 - 我必须处理这种情况的最佳/推荐选项是什么？谢谢！

4

2 回答 2

1

jQuery是一个 AMD 模块。不仅如此，它还是一个命名为AMD 的模块，这使得在同一页面上使用 2 个版本的 jQuery 变得非常困难。（见http://dvdotsenko.blogspot.com/2011/12/amd-modules-with-named-defines-so-much.html）

但是，在您的情况下，您不需要 2 个不同版本的 jQuery。您只需要在 AMD 之外使用 jQuery，然后在 AMD 代码树中使用。

您的解决方案非常简单：在加载 jQuery 之前加载require.js。（翻译：将加载RequireJS的脚本标签放在加载jQuery的脚本标签之前。

<script src="require.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    /* Section A - Some code that uses gloabl jQuery */
</script>
<script>
    // start the AMD code tree
    require(['main'],function(main){
        // run code that main module returns.
        // Don't know what that may mean in your case.
        // example:
        main()
    })
</script>

那里会发生什么：

  1. requirejs 加载并设置全局require和define对象
  2. jQuery 加载并且它 (a) 总是设置全局 window.jQuery (+ window.$) 和 (b) 如果define存在并且它是 AMD 品种，它将自己定义为具有特定名称的命名模块 - “jquery”< - 正是如此。
  3. 您的代码依赖于全局 jQuery 运行。
  4. 您的代码取决于 AMD 注册的 jQuery 运行。

3 和 4 使用一个完全相同的 jQuery 实例。

您绝对必须要求 jQuery 作为“jquery” 没有其他字符串会给您一个 jQuery 实例。

给 jQuery 取别名的唯一方法是创建一个单独的命名定义，重新打包已经定义的“jquery”模块：

define(
  'my_jquery_yey'
  , ['jquery']
  , function($){return $}
)
于 2013-01-12T22:14:15.613 回答
0

如果您打算使用 requireJs，请使用 requireJs 加载两个版本的 jQuery，所以

配置（main.js）：

require.config({
    paths: {
        jqueryV1: "path/to/jqueryV1",
        jqueryV2: "path/to/jqueryV2"
    },
    shim: {
        jqueryV1: {
          exports: 'jQuery',
          init: function() {
             return this.jQuery.noConflict();
          }
       },
       jqueryV2: {
          exports: 'jQuery',
          init: function() {
             return this.jQuery.noConflict();
          }
       }
    } 
});

现在定义模块应该很容易了。

A节

define(['jqueryV1'], function($) {
   // jQuery code section A
});

B节

define(['jqueryV2'], function($) {
   // jQuery code section B
});
于 2012-12-26T00:00:28.163 回答