javascript - RequireJS 中本地 require 和全局 require 的区别

Question

使用RequireJS，我不相信我完全理解“require”的以下两种不同用法之间的区别。在这种情况下，我只谈论浏览器，而不是node.js。我的问题之一是:我可以使用 RequireJS 在前端同步要求某些依赖项吗？

首先是这个:

    define(function(){

         //below the require is definitely the global require of RequireJS, also aliased as requirejs.

         require(['module'],function(mod){  
          //mod is loaded here only
            }

      });

然后是这样的:

   define(['require'],function(require){

      require(['dep'],function(dep){  //require is local not global
           //dep is loaded here only
         }

     //now the require subsequently called is the 'local' require
     var dep = require('dependency'); //I doubt this is possible on front-end..or is it?

     });

我想我不明白使用 require 作为参数在前端定义的目的，但是有吗？

由于这里的示例，我感到困惑:

http://requirejs.org/docs/api.html

Relative module names inside define(): For require("./relative/name") calls that can happen inside a define() function call, be sure to ask for "require" as a dependency, so that the relative name is resolved correctly:

define(["require", "./relative/name"], function(require) {
    var mod = require("./relative/name");
});

从上面我只能猜测，如果一个模块是相对于另一个模块的，你可以在前端用RequireJS同步调用其他模块吗？

同样，这个例子:

Generate URLs relative to module: You may need to generate an URL that is relative to a module. To do so, ask for "require" as a dependency and then use require.toUrl() to generate the URL:

define(["require"], function(require) {
    var cssUrl = require.toUrl("./style.css");
});

所以，我的问题是:本地要求和全局要求有什么区别？当然，本地 require 似乎不仅仅/主要用于 CommonJS 模块。

Answer 1

所有这些示例都使用异步模块加载，而不是同步。您正在查看的代码有点令人困惑，因为它似乎是同步的，但实际上并非如此。

在此示例中:

define(["require", "./relative/name"], function(require) {
    var mod = require("./relative/name");
});

异步是明确的。由于模块 id './relative/name' 位于依赖项数组中，因此在(异步)加载该函数之前不会调用该函数。 require 调用将立即返回已经(异步)加载的模块。

在另一种支持的语法中，异步被隐藏:

define(function(require) {
    var mod = require("./relative/name");
});

但即使这是异步的。需要 rewrites这段代码包含一个依赖数组，就像上面的代码一样。因此，不管表面如何，异步就是你所得到的一切。

为什么这有用且不同？因为将数组的十几个成员与函数中将它们转换为变量的相应位置进行匹配可能具有挑战性。考虑文档中的这个示例:

define([ "require", "jquery", "blade/object", "blade/fn", "rdapi",
         "oauth", "blade/jig", "blade/url", "dispatch", "accounts",
         "storage", "services", "widgets/AccountPanel", "widgets/TabButton",
         "widgets/AddAccount", "less", "osTheme", "jquery-ui-1.8.7.min",
         "jquery.textOverflow"],
function (require,   $,        object,         fn,         rdapi,
          oauth,   jig,         url,         dispatch,   accounts,
          storage,   services,   AccountPanel,           TabButton,
          AddAccount,           less,   osTheme) {

});

这有用且不同的另一个原因是本地 require 允许您正确解析相对模块路径。这使您可以定义一堆彼此相关的模块，而无需显式指定它们所在的目录，如果该目录可能发生更改，这会很方便。