【问题标题】:Difference between require() and define() in RequireJS? [duplicate]RequireJS 中 require() 和 define() 的区别? [复制]
【发布时间】:2013-09-03 07:14:19
【问题描述】:

在RequireJS中,使用require()和define()的基本区别是什么;

require(['a'], function(a) {
    // some code
});

// A.js
define(['b','c','d','e'], function() {
    //some code
});

任何用例都会很有帮助..

【问题讨论】:

标签: javascript requirejs amd


【解决方案1】:

在早期使用时让我烦恼的一个核心区别是发现define可能永远不会被调用

只要每个文件只有一个define,它就会将该模块注册为该文件名下的可用模块。但是,define 模块只有在 require 函数要求每个模块时才会加载。

定义:如果你需要一个XXX,那么先加载这些其他的东西,然后返回这个函数的结果。

要求:加载这些其他的东西,然后运行这个函数。 (没有“如果”)

示例:假设您在页面中包含此 JS 文件:

// this is in company/welcomepage.js
define(['company/ui_library'],
    function(uiLib) {
        console.log('Welcome to {company}!');
    }
);

如果这是唯一的 Javascript 文件,您可以打开您的页面,并且控制台日志中将没有任何内容,尽管脚本告诉它欢迎用户。但是,如果在页面的某个位置或在另一个脚本中插入以下内容,情况就会发生变化:

require(['company/welcomepage'], function() {
    // optionally insert some other page-initialization logic here
});

现在,页面加载时会在控制台中显示欢迎消息。

事实上,有了第二个,就没有必要手动将welcomepage.js 包含为<script> 标签;它会在看到 require 并意识到它需要它时立即从其位置加载它。

【讨论】:

  • 感谢您的回答...能否请您详细说明一个基本示例...
  • @Katana314...请您详细说明...
  • @testndtv 增加了一个例子;希望对您有所帮助。
  • 次要问题:由于 /company/welcomepage.js 声明了对 'company/ui_library' 的依赖关系,因此将加载的文件是 /company/company/ui_library.js - 这就是您想要的?
  • @DonHatch 关于第一点:AMD 可以配置为始终从某个根路径开始,或者将某个文件夹名称识别为具有某个主目录(例如,“jquery”在“apis. google.com/cdn/jquery”)。在第二个示例中:在针对 requirejs 2.1.5 或在 Dojo 中进行测试时,我没有发生此错误。如果您是正确的,那么从那时起它可能已经改变了行为;也许是一种帮助人们在被它弄糊涂之前及早发现这样一个问题的方法。在您的第三个示例 (data-main) 中,这明确需要该文件,因此它决定运行它。
【解决方案2】:

requirerequirejs 是一样的。

require === requirejs // true

require 是一种加载已定义模块的方法。例如加载我可以做的logger 模块:

require(["logger"], function(logger){
  logger.bla("S");
});

这里我调用require,指定一个已定义的模块logger,并通过调用它的bla 方法来使用它。

define 是一种定义模块的方式。例如,要定义一个 logger 模块,我可以这样做:

// logger.js
define(function(){
  return {
    bla: function(x){
      alert(x);
    }
  }
});

在这里我调用了define 并定义了logger 模块。在这个模块中,我返回了我想要公开的bla 函数。

有时define 看起来与exports 非常相似,因为define 也可以依赖和使用其他模块,就像require 可以使用其他模块一样。让我给你看同样的logger 模块,这次使用一个模块

// logger.js
define(["popup"], function(popup){
  return {
    bla: function(x){
      popup.show(x);
    }
  }
});

这里的记录器模块 I defined,也有一个名为 popup 的依赖项,因此它看起来像 require

【讨论】:

  • 除了您的评论之外,没有其他地方说“记录器” - 那么是什么将其定义为“记录器”模块?评论还是文件名?
  • 优秀的答案。几年来,我一直在用 Javascript 进行编码,并且与 Java 相比,我一直觉得它与面向对象编程的 Java 相比令人困惑。你的回答很简洁,正是我需要听到澄清使用 requireJS 的模块(而不是通常的原始立即调用函数方式)
  • @Scott 参加聚会可能很晚了。实际的 AMD 语法是:define(id?, dependencies?, factory);,如果没有指定模块名称(id 参数),那么模块名称就是它的文件位置。
【解决方案3】:

我相信你总是使用 define 来定义你的模块。您有多种方式可以这样做,您可以在数组中定义一个模块及其依赖项作为第一个参数来定义(如您发布的示例中所示)。

或者你可以使用Simplified CommonJS wrapper,像这样:

define(function (require) {
    var otherModule = require('otherModule');
    return function () {
        return otherModule.operation();
    };
});

也许你对JSONP service dependency格式混淆了,它使用require()来加载服务,然后指定define()作为JSONP回调,一旦服务响应,最终将定义模块。

所以最后你用define()定义模块,用require()加载它们。

【讨论】:

    【解决方案4】:

    define 是我们声明模块的方式,按照 AMD 模块格式(还有其他可用的模块格式,如 CommonJSES2015System.registerUMD

    而..

    require 是一个模块加载结构,可用于内置的 RequireJsSystemJSNode's 等模块加载器 -在模块加载器中。当您想要使用以上述模块格式之一定义的模块时使用它。

    【讨论】:

      【解决方案5】:

      require()define()都是用来加载依赖的。这两种方法有很大的不同。

      很简单的人

      Require(): 方法用于运行即时功能。 define(): 方法用于定义在多个位置使用的模块(重用)。

      【讨论】:

        猜你喜欢
        • 2013-02-23
        • 2012-11-16
        • 1970-01-01
        • 2013-05-16
        • 2023-04-08
        • 2011-09-20
        • 2010-10-10
        • 2015-06-04
        • 2012-08-25
        相关资源
        最近更新 更多