在RequireJS中 - 不能在路径中别名jQuery名称 [英] In RequireJS - Cannot alias jQuery name in path

查看:91
本文介绍了在RequireJS中 - 不能在路径中别名jQuery名称的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是RequireJS菜鸟。当我使用require.config并包含一个名称与jQuery不同的jQuery路径时,结果不符合预期。



这是一个非常简单的示例来帮助解释我的问题。



文件结构

  root 
├──Index.htm$ b $b└──脚本$ b $b├──libs$ b $b│├──jquery-1.7.1.js $ b $b│└──require.js$ b $b├──main.js$ b $b└──someModule.js

index.htm

 < html> 
< head>
< title>带有RequireJS< / title>的BackboneJS模块化应用
< script data-main =scripts / mainsrc =scripts / libs / require.js>< / script>
< / head>
< body>
< h3> BackboneJS非常棒< / h3>
< / body>
< / html>

这里脚本标签在脚本/库中引用了require。当需要运行时,应该执行脚本目录中名为main.js的JavaScript文件。



main.js

  require.config({
paths:{
mod1:someModule
}
});
require([mod1],function(sm){
console.log(sm.someValue);
});

根据我的经验,mod1可以是任何东西,只要它在require中引用相同即可。配置路径和require方法。



someModule.js

  define ([],function(){
console.log();
return {someValue:abcd};
});

为了完整起见,我收录了someModule.js



<当我包含JQuery时,会出现感觉到的不稳定。



在下面的main.js中,我将jQuery添加到config和require方法中。



Main.js

  require.config({
paths:{
jquery:libs / jquery-1.7.1
,mod1:someModule
}
});

require([mod1,jquery],function(sm,$){
console.log(sm.someValue);
console.log($) ;
});

随着jQuery的增加,一切似乎仍然有效。 console.log($)编写了jQuery函数。



现在是踢球者。在下面的代码中,我在两个路径中将jquery更改为jqueryA并且需要

  require.config({
paths:{
jqueryA:libs / jquery-1.7.1
,mod1:someModule
}
});

require([mod1,jqueryA],函数(sm,$){
console.log(sm.someValue);
console.log($) ;
});

现在console.log($)写入空。



这应该是预期的吗?这个名称必须是jquery的原因是什么,但对于mod1,它可以是什么?



我可以毫无问题地解决这个问题,但这个问题似乎很奇怪。我知道我可以使用组合的RequireJS和jQuery文件,但是当jQuery有更新时,我不想依赖于RequireJS来包含新的jQuery。

解决方案

在jQuery 1.7中,他们决定支持AMD加载。为此,它定义了一个名为jquery的模块,该模块将对jQuery对象的引用传回。当您使用其他名称(例如'jqueryA')定义jquery的路径时,事情并不像您认为的那样完全破坏。



jquery脚本始终定义自己作为名为'jquery'的模块,已在您的应用中注册了require。当您命名路径快捷方式'jquery'并且'jquery'作为依赖项加载时,require实际上引用了由jquery-1.7.1.js定义的'jquery'模块,该模块确实传回了正确的引用。当您命名模块快捷方式jqueryA时,您现在引用了未定义的引用,因为除了通过名为jquery的模块之外,jquery脚本本身不会传回引用。这很愚蠢,我知道。



jquery脚本将模块定义为'jquery',并期望你只需将它引用为'jquery'。如果你想将它作为另一个名称引用(并作为奖励,防止它与其他加载的jquery库发生冲突),请使用以下方法:



使用requirejs和jquery,不破坏全局jquery?


I'm a RequireJS noob. When I use "require.config" and include a path to jQuery with a name different than jQuery, results are not as expected.

Here's a very simple example to help explain my issue.

Structure of files

root
├── Index.htm
└── scripts
    ├── libs
    │   ├── jquery-1.7.1.js
    │   └── require.js
    ├── main.js
    └── someModule.js

index.htm

<html>
<head>
    <title>BackboneJS Modular app with RequireJS</title>
    <script data-main="scripts/main" src="scripts/libs/require.js"></script>
</head>
<body>
    <h3>BackboneJS is awesome</h3>
</body>
</html>

Here the script tag references require in scripts/libs. When require gets ran the JavaScript file called main.js in the scripts directory should be executed.

main.js

require.config({
   "paths": {
           "mod1": "someModule"
   }
});
require(["mod1"], function (sm) {
    console.log(sm.someValue);
});

In my experience the "mod1" can be anything as long as it's referenced the same in the require.config path and in the require method.

someModule.js

define([], function () {
    console.log();
    return { someValue: "abcd" };
});

Just for completeness I included someModule.js

The perceived inconstancy occurs when I include JQuery.

In the following main.js I added jQuery to the config and the require method.

Main.js

require.config({
    "paths": {
        "jquery": "libs/jquery-1.7.1"
        ,"mod1": "someModule"
    }
});

require(["mod1", "jquery"], function (sm, $) {
    console.log(sm.someValue);
    console.log($);
});

With the additional of jQuery everything seems to still works. The "console.log($)" writes the jQuery function.

Now the kicker. In the following code I change "jquery" to "jqueryA" in both the paths and require

require.config({
    "paths": {
        "jqueryA": "libs/jquery-1.7.1"
        ,"mod1": "someModule"
    }
});

require(["mod1", "jqueryA"], function (sm, $) {
    console.log(sm.someValue);
    console.log($);
});

Now "console.log($)" writes null.

Should this be expected? Is there a reason why the name must be jquery, but for mod1 it can be anything?

I can work-around this without a problem, but this issue seems odd. I know I can use the combined RequireJS and jQuery file, but when jQuery has an update I don't want to be dependent on RequireJS to include the new jQuery.

解决方案

In jQuery 1.7 they decided to support AMD loading. To do this, it defines a module named 'jquery' which passes back a reference to the jQuery object. When you define your path to jquery with another name (eg 'jqueryA'), things aren't exactly breaking as you think they are.

The jquery script always defines itself as a module named 'jquery', which is registered with require for your app. When you named your path shortcut 'jquery' and 'jquery' was loaded as a dependency, require was actually referencing the 'jquery' module defined by jquery-1.7.1.js, which does pass back the correct reference. When you name your module shortcut jqueryA, you are now referencing an undefined reference, because the jquery script itself does not pass back a reference, except via the module named 'jquery'. It's silly, I know.

The jquery script defines the module as 'jquery' and expects that you will simply reference it as 'jquery'. If you want to reference it as another name (and as a bonus, keep it from conflicting with other loaded jquery libraries), use this method:

Use requirejs and jquery, without clobbering global jquery?

这篇关于在RequireJS中 - 不能在路径中别名jQuery名称的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆