54

假设我在主页级别编写代码，并且 2 个依赖项需要相同的对象实例并将其声明为依赖项。解决此问题的适当方法是什么？

基本上我想做的是说，“如果这个依赖没有加载......然后加载它。否则，使用已经加载的同一个实例并传递那个。”

4

6 回答 6

58

You would make that a module-level variable. For example,

// In foo.js
define(function () {
    var theFoo = {};

    return {
        getTheFoo: function () { return theFoo; }
    };
});

// In bar.js
define(["./foo"], function (foo) {
    var theFoo = foo.getTheFoo(); // save in convenience variable

    return {
        setBarOnFoo: function () { theFoo.bar = "hello"; }
    };
}

// In baz.js
define(["./foo"], function (foo) {
    // Or use directly.
    return {
        setBazOnFoo: function () { foo.getTheFoo().baz = "goodbye"; }
    };
}

// In any other file
define(["./foo", "./bar", "./baz"], function (foo, bar, baz) {
    bar.setBarOnFoo();
    baz.setBazOnFoo();

    assert(foo.getTheFoo().bar === "hello");
    assert(foo.getTheFoo().baz === "goodbye");
};
于 2011-04-09T23:54:26.920 回答
8

只需按照您的意愿为您的单例提供一个 API。

并确保其延迟加载。最简单的方法是使用像 underscore 这样提供跨浏览器帮助程序的抽象库。其他选项是 ES5 Object.defineProperty 或自定义 getter/setter。

在这种情况下_.once，确保构造函数的结果在第一次调用后被缓存，它基本上是延迟加载它。

define(function() {
    var constructor = _.once(function() { 
        ...
    });

    return {
        doStuffWithSingleton: function() {
            constructor().doStuff();
        }
    };

});

_.once从下划线。

于 2011-04-10T00:18:02.243 回答
6

将 Raynos 对封装的担忧与 OP 的说明相结合，即他希望在消息传递服务上公开几个方法，我认为这是正确的做法：

// In messagingServiceSingleton.js
define(function () {
    var messagingService = new MessagingService();

    return {
        notify: messagingService.listen.bind(messagingService),
        listen: messagingService.notify.bind(messagingService)
    };
});

// In bar.js
define(["./messagingServiceSingleton"], function (messagingServiceSingleton) {
    messagingServiceSingleton.listen(/* whatever */);
}

// In baz.js
define(["./messagingServiceSingleton"], function (messagingServiceSingleton) {
    messagingServiceSingleton.notify(/* whatever */);
}

Function.prototype.bind不会出现在所有浏览器中，所以你需要像Mozilla 提供的那样包含一个 polyfill 。

另一种（在我看来可能更好）的方法是使消息服务对象本身成为一个模块。这看起来像

// In messagingService.js
define(function () {
    var listenerMap = {};

    function listen(/* params */) {
        // Modify listenerMap as appropriate according to params.
    }
    function notify(/* params */) {
        // Use listenerMap as appropriate according to params.
    }

    return {
        notify: notify
        listen: listen
    };
});

由于您向使用您的模块的每个人公开了相同的方法notify和listen方法，并且这些方法总是引用相同的私有 listenerMap变量，因此这应该可以满足您的需求。它还消除了对Function.prototype.bind.

于 2011-04-10T03:28:59.150 回答
1

这是一个模块本身是共享变量而不是该模块内的变量的版本。

define('foo', [], {bar: "this text will be overwritten"});

define('bar', ["foo"], function (foo) {
    return {
        setBarOnFoo: function () { foo.bar = "hello"; }
    };
});

define('baz', ["foo"], function (foo) {
    return {
        setBazOnFoo: function () { foo.baz = "goodbye"; }
    };
});

require(["foo", "bar", "baz"], function (foo, bar, baz) {
    bar.setBarOnFoo();
    baz.setBazOnFoo();

    $('#results').append(foo.bar + ' ' + foo.baz);
});​​​

// reads: hello goodbye
于 2012-07-23T10:19:44.383 回答
0

作为 Domenic 答案的变体，您可以使用“导出”魔术模块自动生成模块的引用——“添加到导出对象的属性将位于模块的公共接口上，无需返回任何值。 " 这避免了必须调用getTheFoo()函数来获取引用。

// In foo.js
define(['exports'], function (foo) {
   foo.thereCanBeOnlyOne = true; 
});

// In bar.js
define(["exports", "./foo"], function (bar, foo) {
  bar.setBarOnFoo = function () { foo.bar = "hello"; };
});

// in baz.js
define(["exports", "./foo"], function (baz, foo) {
  baz.setBazOnFoo = function () { foo.baz = "goodbye"; };
});

// In any other file
define(["./foo", "./bar", "./baz"], function (foo, bar, baz) {
  bar.setBarOnFoo();
  baz.setBazOnFoo();

  assert(foo.bar === "hello");
  assert(foo.baz === "goodbye");
  assert(foo.thereCanBeOnlyeOne);
});

为了解决下面的评论，我个人发现上述约定很有用。您的里程可能会有所不同，但如果您认为它有用，请随意采用该约定。该约定归结为以下两条规则：

  • 将“exports”声明为定义数组中的第一个依赖项。
  • 在 JavaScript 文件之后命名函数中的参数。

使用文件名，例如对于 foo.js，将变量命名为 'foo'，增加了代码的可读性，因为大多数开发人员会将 'foo' 定义为 foo.js 依赖项的参数。扫描代码或使用 grep 时，很容易找到模块内部和外部对“foo”的所有引用，并且可以轻松找出模块向公众公开的内容。例如，如果 bar.js 模块中的声明反映了其他文件中的用法，则重命名为要容易得多bar.setBarOnFoo。bar.setFooBar在所有文件中简单地搜索 bar.setBarOnFoo 并将其替换为 bar.setFooBar 即可完成任务。

于 2016-02-03T07:02:37.163 回答
-1

我在这种情况下：

出于不同的原因，我需要调用 requirejs 模块上的函数，但是触发该调用的单击超出了要求。

我解决这个问题的方法是创建一个写入窗口对象的 requirejs 模块。

define("one", [], function() {
    window.popupManager = (function () {
            console.log ('aca');

        var popUpManager = function () {
            self = this;

            self.CallMe = function ()
            {
                alert ('someone calls');
            };
        };
        return new popUpManager();
    })();
});
require(['one']);

window.popupManager.CallMe();

这样，如果任何超出要求范围的代码（我知道不应该这样）都可以调用写入窗口对象的此要求的函数。

我真的知道这不是一个“优雅”的解决方案，但它可以在紧急情况下帮助你。

于 2016-02-01T19:34:20.450 回答