如何使用显示模块模式将一个 JS 模块的公共方法调用到另一个模块中？

Question

我一直在试验 Javascript 的显示模块模式，但我不太明白是否以及如何将一个模块的公共方法调用到另一个模块中。假设我有这两个模块（代码被简化）：

1) 模块 A

var lazyload = ( function() {

    function loadDefault() {
        $('.lazy').load();
    } 

    return {
        loadDefault: loadDefault
    }

})();

2) 模块 B

var newposts = ( function() {

    function addNewPosts() {
        $('.posts').append();
    }

});

如何将模块 A 中的 loadDefault() 方法调用到模块 B 中的 addNewPosts() 方法中？不确定这是否与它有关，但也许值得一提的是我正在使用 Webpack，所以在我的主 .js 文件中，我正在导入这两个模块：

import './ModuleA';
import './ModuleB'; 

Answer 1

如何将模块 A 中的 loadDefault() 方法调用到模块 B 中的 addNewPosts() 方法中？

如果您使用的是旧式显示模块模式，您会使用lazyload.loadDefault()。但请继续阅读...

不确定这是否与它有关，但也许值得一提的是我正在使用 Webpack，所以在我的主 .js 文件中，我正在导入两个模块：

import './ModuleA';
import './ModuleB'; 

那么您不想使用 RMP。相反，请使用export:

lazyload.js:

export function loadDefault() {
    $('.lazy').load();
} 

newposts.js:

import {loadDefault} from './ModuleA';

export function addNewPosts() {
    loadDefault();
    $('.posts').append();
}

或者，如果您希望导出的一个函数成为默认函数：

lazyload.js:

export default function loadDefault() {
    $('.lazy').load();
}

...然后导入是

import loadDefault from './ModuleA';

RMP 是解决 JavaScript 没有模块的问题的方法。一旦你使用了实际的模块（在 ES2015 中引入），你就不再需要 RMP（对于 modules）了。