Require.js伤害了我的大脑.有关加载脚本/模块的方式的一些基本问题 [英] Require.js is hurting my brain. Some fundamental questions about the way it loads scripts/modules

问题描述

我们假设这是我的config.js或main.js:

Let's assume this is my config.js or main.js:

require.config({
    // paths are analogous to old-school <script> tags, in order to reference js scripts
    paths: {
        jquery: "libs/jquery-1.7.2.min",
        underscore: "libs/underscore-min",
        backbone: "libs/backbone-min",
        jquerymobile: "libs/jquery.mobile-1.1.0.min",
        jquerymobilerouter: "libs/jquery.mobile.router.min"
    },
    // configure dependencies and export value aliases for old-school js scripts
    shim: {
        jquery: ["require"],
        underscore: {
            deps: ["jquery"],
            exports: "_"
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        jquerymobilerouter: ["jquery", "backbone", "underscore"],
        jquerymobile: ["jquery", "jquerymobilerouter", "backbone", "underscore"]
    }
});
require(["jquery", "backbone", "underscore", "app/app.min", "jquerymobilerouter", "jquerymobile"], function ($, Backbone, _, App) {
    console.log($);
    console.log(Backbone);
    console.log(_);
    $("body").fadeIn(function () {
        App.init();
    });
});

1. 如果我理解正确，那么paths config选项允许您引用脚本，即HTML中的<script>标记.假设是这种情况，我是否仍需要在下面的实际require语句中使用诸如$的jQuery脚本或使用_的下划线作为别名脚本?考虑到如果您使用标准的<script>标签引用jQuery，则可以自动在整个脚本中使用$，这似乎很奇怪.使用paths是否应该相同?

1. If I understand correctly, the paths config option allows you to reference scripts, a-la the <script> tag within HTML. Assuming this is the case, do I still need to alias scripts like jQuery with a $ or underscore with a _ in my actual require statement below? It seems strange that I'd have to, given that if you reference jQuery with a standard <script> tag, $ can be used throughout your script automatically. Shouldn't it be the same using the paths?

我是shim config选项的新手，我知道它已取代了不推荐使用的order!插件. exports属性实际上是做什么的?它似乎并没有为脚本创建别名.例如，如果我将下划线的exports设置为"whatever"，然后尝试将其设置为console.log(whatever)，则它是未定义的.那有什么意义呢?

I'm new to the shim config option, which I understand has replaced the deprecated order! plugin. What does the exports property actually DO? It doesn't seem to create an alias for a script; for example, if I set the exports for underscore to "whatever", and then try to console.log(whatever), it's undefined. So what's the point?

像jQuery这样的脚本如何在全局范围"内正确使用?也就是说，能够在App.js模块或"app"文件夹中的任何其他模块内使用$别名的正确方法是什么?我是否必须在每个单独的模块中都需要jQuery，并且每次都需要别名$?还是我在这里做的方法正确?

How would scripts like jQuery be properly used "globally?" That is, what's the proper way to be able to use the $ alias within my App.js module, or any other module in my "app" folder? Do I have to require jQuery within every individual module and alias $ every single time? Or is the way I've done it here the proper way?

我也非常感谢对此特殊脚本的任何其他批评；我认为，Require.js的文档还有很多不足之处；我本来想更多了解的东西似乎被蒙住了，让我挠头.

I'd greatly appreciate any other criticisms of this particular script as well; the documentation for Require.js, in my opinion, leaves much to be desired; things I'd really like to know more about seem to get glossed over and leave me scratching my head.

推荐答案

1. 在需要该依赖项时，路径会告诉require.js在哪里.

1. Paths tell require.js where to look when you require that dependency.

例如，我的配置如下:

"paths": { 
    "jquery": "require_jquery"
},
"shim": {
    "jquery-cookie"  : ["jquery"],
    "bootstrap-tab"  : ["jquery"],
    "bootstrap-modal": ["jquery"],
    "bootstrap-alert": ["jquery"]
},

这意味着每次我在模块中做

this means that every time in a module I do

define( ['jquery']

requirejs从主路径加载文件require_jquery，而不是尝试加载jquery.js.在您的情况下，它将加载jQuery源文件，然后该文件将在全球范围内可用.我个人不喜欢这种方法，因此在我的require_jquery.js文件中:

requirejs loads the file require_jquery from the main path instead of trying to load jquery.js. In your case it would load the jQuery source file, which would then be globally available. I personally don't like that approach and for that reason in the require_jquery.js file I do:

define( ["jquery_1.7.2"], function() {
    // Raw jQuery does not return anything, so return it explicitly here.
    return jQuery.noConflict( true );
} );

这意味着jQuery将仅在我的模块内定义. (这是因为我编写了Wordpress插件，因此可以包含自己的jQuery版本，而无需涉及外部版本)

which means that jQuery will be defined only inside my modules. (This is because i write Wordpress plugins and so I can include my own version of jQuery without touching the outside version)

导出(仅从文档中读取的内容应该是您正在使用的模块的名称，以便在加载正确的情况下可以检测到它.)

Exports (reading from the docs simply should be the name of the module you are using so that it can be detected if loading went correctly. Here is explained. So if you want to set an export for underscore it should be _

正如我所解释的，jQuery应该是全局的，如果您简单地导入它，则文件将被执行并且jQuery是全局的

jQuery should be global as I explained, if you simply import it the file is executed and jQuery is global

编辑-回答评论.

1. 是的，我的意思是，必须为jQuery导出$或jQuery，为主干导出_.从我从文档中获得的信息来看，仅在某些情况下才需要这样做，而对于在全局名称空间中将自己声明为jQuery的库而言，则不需要这样做.

1. yes i mean that, you must export $ or jQuery for jQuery and _ for backbone. From what i got from the docs this is needed only in some edge cases and would not be necessary for libraries that declare themselves in the global namespace as jQuery.

我认为requirejs在从CDN加载jQuery时必须回退时需要它们.我认为requirejs首先尝试从CDN加载jQuery，然后通过检查导出的"变量是否存在来进行检查以验证其是否正确加载，如果不存在，则将其加载到本地文件系统中(如果您当然已经配置了后备广告).当requirejs无法看到404返回时，这是必需的.

I think that requirejs needs them when it has to fallback from loading jQuery from a CDN. i think that requirejs first tries to load jQuery from the CDN, then makes a check to verify that it was loaded correctly by checking that the "exported" variable exists, and if it doesn't it loads it form the local filesystem (if you had configured fallbacks, of course). This is something that it's needed when requirejs can't see a 404 coming back.

jQuery在全球范围内可用，因为它被声明为全局.如果仅加载并执行jQuery脚本，则最终会出现两个全局变量，分别为$和jQuery(或者您可以像我那样做并避免这种情况).在define()函数内部，您可以将jQuery别名为您想要的任何名称.

jQuery is globally available because it's declared global. If you simply load and execute the jQuery script, you will end up with two globals, $ and jQuery (or you can do as i did and avoid that). Inside the define() function you can alias jQuery to be whatever you want.

define( [ 'jquery' ], function( jq ) {
    // jq is jquery inside this function. if you declared it 
    // globally it will be also available as $ and jQuery
} );

这篇关于Require.js伤害了我的大脑.有关加载脚本/模块的方式的一些基本问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！