javascript - 如何引用调用 Javascript 模块？

Question

我正在使用我所理解的 Javascript 模块模式和 jQuery。

我有一个应用程序，它有一个公共(public)端和一个管理端。每个都有自己的 JS 文件，虽然一些功能是共享的，所以我将它提取到一个公共(public)文件中。 Gulp 将 common + public 文件组合成一个文件供 public 端使用，将 common + admin 文件组合成一个文件供 admin 端使用。

公共(public) JS 文件包含如下内容:

var PublicFoo = (function () {

    var bar = function() {
        // ..
    };

    var init = function() {
        $button.on('click', Common.someCommonThing);
    };

    return {
        init: init
    };
})();

需要此代码的 HTML 页面会像这样触发它:

<script>
PublicFoo.init();
</script>

admin JS 文件包含一些非常相似的东西，也定义了一个 bar() 函数，并调用相同的 Common 模块函数。

var AdminFoo = (function () {

    var bar = function() {
        // ..
    };

    var init = function() {
        $button.on('click', Common.someCommonThing);
    };

    return {
        init: init
    };
})();

公共(public) JS 文件(与公共(public) JS 和管理 JS 共享和组合)包括如下内容:

var Common = (function () {

    var someCommonThing = function() {
        // Do stuff.
        // When done, I want to call bar() in the calling module.
        // This does not work, throws 'Uncaught ReferenceError: bar is not defined'
        bar();
    };

    return {
        someCommonThing: someCommonThing,
        // ...
    };
})();

在 Common 模块中，如何引用调用模块中的函数？

我知道 .caller，但显然 that is non-standard and should not be used .

我也许可以通过某种方式将调用模块的名称作为参数传递给 Common，并引用它，但这看起来很难看:

// In PublicFoo
var init = function() {
    $button.on('click', function() {
        Common.someCommonThing(PublicFoo)
    });
};

// In Common
var someCommonThing = function(callingModule) {
    // ...
    callingModule.bar();

我当然也可以提取 bar() 调用并在调用模块中执行它，但这看起来也不是那么整洁:

// In PublicFoo
var init = function() {
    $button.on('click', function() {
        Common.someCommonThing();
        bar();
    });
};

// ... and the same thing in AdminFoo

我觉得这一定是 JS 模块 101，这是一个基本要求，但我似乎找不到任何相关信息，尽管我可能使用了错误的术语进行搜索。或者是我找不到如何执行此操作的原因是因为它不应该以这种方式完成？

如何从 Common 模块引用适当的 bar()？

Answer 1

I know about .caller, but apparently that is non-standard and should not be used.

它在您的情况下也不起作用，因为调用者是事件处理程序，既不是 PublicFoo 也不是 AdminFoo。

I could maybe somehow pass in the name of the calling module as a parameter to Common, and reference it

是的，如果您希望 someCommonThing 在它完成后做不同的事情，传递对您想要调用的事物的引用是可行的方法。请注意，您真的应该只在事情是异步的时候才使用这样的回调，否则之后返回并调用 bar (就像在您的最后一个片段中一样)要容易得多。

How can I reference the appropriate bar() from the Common module?

如果两个 bar 可能会同时加载到页面中，那么就没有办法绕过引用回调的参数。

但是，在您的示例中情况似乎并非如此 - 在一个页面上，AdminFoo 扮演 Foo 的 Angular 色，在另一页上 PublicFoo 承担 Foo 的 Angular 色。

所以只引用 Common 中的 Foo.bar!让相应的页面用适当的值填充它，即

var Foo = AdminFoo

在管理页面和

var Foo = PublicFoo

在公共(public)页面上。