RequireJS中本地和全局要求之间的差异

时间:2015-06-20 02:55:56

标签: javascript requirejs

使用RequireJS,我不相信我完全理解以下两种不同用法之间的区别'要求'。在这种情况下,我只谈论浏览器,而不是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

  

define()中的相对模块名称:for require(" ./ relative / name")   调用可能发生在define()函数调用中,请务必询问   为"要求"作为依赖项,以便解析相对名称   正确地:

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

从上面可以看出,如果一个模块相对于另一个模块,我只能猜测你可以在前端使用RequireJS对其他模块进行同步调用吗?

同样,这个例子:

  

生成相对于模块的URL:您可能需要生成一个URL   是一个模块。为此,请求"要求"作为依赖   然后使用require.toUrl()生成URL:

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

所以,我的问题是:本地需求和全局需求之间有什么区别?当然不会出现本地需求仅仅是/主要用于CommonJS模块。

1 个答案:

答案 0 :(得分: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) {

});

另一个有用且不同的原因是本地要求允许您正确解析相对模块路径。这使您可以相对于彼此定义一组模块,而无需显式指定它们所在的目录,如果该目录可能会更改,这将非常方便。