javascript - 如何以简单的方式将函数转换为 RequireJS 中的模块？

Question

我一直在阅读文档，但我似乎无法轻松地做到这一点。我想我把它与使用相同词的 node.js 混淆了太多，例如require, exports, module 等

想象一下这样的主脚本。 (并想象功能很复杂)

require(['jquery', 'domReady!'], function($) {

    $("#staticButton").click(function() {
        showMessage('What does this button do?');
    });

    function showMessage(message) {
        alert(message);
    }

});

现在假设我想在多个脚本中使用 showMessage()。我该怎么做？

在 Node.js 中，我会将 showMessage() 附加到 showMessage.js 中的 exports.showMessage 并且在任何我想使用它的地方做这样的事情:

require(['jquery', 'domReady!'], function($) {

    var showMessage = require('showMessage'); // Easy huh?

    $("#staticButton").click(function() {
        showMessage('What does this button do?');
    });

});

但是对于 RequireJS 这给了我一个错误，我首先需要加载它。在使用上述语法之前，我是否需要require 或define？我真的需要将它添加到主脚本 require 数组中吗？我不喜欢那样。如果你有 20 个函数怎么办？

require(['jquery', 'domReady!', func01, func02, (...) func20], function($, empty, func01, func02, (...) func20) {}

那是纯粹的句法盐。我更喜欢 Node.js 糖:

var func01 = require(func01),
    func02 = require(func02),
    (...)
    func20 = require(func20);

我把两者搞混了。有人能解释一下我是如何简单地将函数放在外部文件中并尽可能简单地使用它们的吗？

---

我假设模块转换函数需要如下所示:

define(function(require, exports, module) {
    return function(message) {
        alert(message);
    }
});

..但如果可以更轻松地做到这一点，我很想听听。

Answer 1

您应该尝试从模块的 Angular 来思考，在这种情况下，函数是更底层的东西。您定义模块，要求它们稍后将其公共(public)“接口(interface)”作为具有某些属性的对象返回，这些属性可能恰好是函数。

我发现有用的是“静态实用程序模块”模式:

utils.js

define(function () {
    return {
        showMessage: function (text) {
            alert(text);
        },
        foo: function () {
            alert('bar');
        }
    }
})

或简化的等价物:(-> docs )

utils.js

define({
    showMessage: function (text) {
        alert(text);
    },
    foo: function () {
        alert('bar');
    }
});

然后，在您的 ma​​in.js 中:

define(['utils'], function (Utils) {
    Utils.showMessage('!');
})

如果你最终有太多的依赖(顺便说一句，这通常表明你的模块做了太多)你可以使用 sugar syntax相反:

define(function (require) {
    var Utils = require('utils');
    Utils.showMessage('!');
})