如何在 html 中调用 RequireJS 定义的函数？答案

【问题标题】：How do i call the defined functions by RequireJS in html?如何在 html 中调用 RequireJS 定义的函数？
【发布时间】：2016-10-12 07:58:56
【问题描述】：

我猜是关于 main.js，但我已经尝试了我在网上找到的所有示例，但它们都不起作用。

我目前有：三个模块（one.js、two.js、three.js）、main.js、index.html 和一些参考文件，如 require.js

one.js:

define("one",['./two', './three'], function(two, three) {
  var one = 1;
  return {
    value: function(e){
      return one;
    }
  } 
});

two.js:

define("two",['./one', './three'], function(one, three) {
  var two = 2;
  return {
    value: function(){
      return two;
    }
  }    
});

main.js:

require(["one", "two", "three"], function (one, two, three) {

});

我的 HTML：

<html>
    <head>
        <title>My App</title>
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    // the function from two.js having the same name as another in one.js needs to be called here.
    <body onload="value();">  
        <h1>My App</h1>
    </body>
</html>

【问题讨论】：

标签： javascript requirejs

【解决方案1】：

您无法按照您尝试的方式进行操作。您的来电：

require(["one", "two", "three"], function (one, two, three) { });

确实会加载您的模块，但随后它们的值可通过您的回调参数获得。 不会将任何内容导出到全局空间。但要使<body onload="value();"> 工作，value 必须在全局空间中。

另一个问题是 RequireJS 是异步的。因此，即使您重写代码以故意让模块 two 将其 value 泄漏到全局空间，代码也不会可靠地工作。通常您无法知道您的 require 调用何时会相对于 body 的 onload 何时被触发完成。

您可以通过“粘合代码”加载您需要的内容来解决此问题。设置<body onload="onBodyLoaded()"> 并在body 之前有一个script 具有：

function onBodyLoaded() {
    require(["two"], function (two) {
        two.value();
    });
}

如果这是我的代码，我实际上不会使用 onload 属性，而是会在正文之后使用 script ，例如：

(function () {
    document.body.addEventListener("load", function onBodyLoaded() {
        require(["two"], function (two) {
            two.value();
        });
    });
}());

或者我会使用domReady plugin。这与在body 上收听load 事件不太一样，但它可能“足够好”。

【讨论】：

【解决方案2】：

调用onload 函数与main.js 中的require 回调调用概念相同。你只需要在require的回调中调用函数：

require(["one", "two", "three"], function (one, two, three) {
  one.value();
});

所有require 的回调参数都是对define 创建的函数的引用。它们内部的相同方法之间不会有任何冲突。

【讨论】：