2017-10-11 103 views
1

我一直在尝试Javascript的揭示模块模式,但我不太明白是否以及如何将一个模块的公共方法调用到另一个模块。假设我有这两个模块(代码被简化):如何使用Revealing模块模式将一个JS模块的公共方法调用到另一个模块中?

1)模块A

var lazyload = (function() { 

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

    return { 
     loadDefault: loadDefault 
    } 

})(); 

2)模块B

var newposts = (function() { 

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

}); 

如何调用loadDefault()方法从模块A到模块B中的方法addNewPosts()?不知道这有什么关系,但也许这是值得一提的是我使用的WebPack,所以在我的主要js文件,我导入这两种模块,如:

import './ModuleA'; 
import './ModuleB'; 
+0

如果您使用'import'语法来引入要调用的函数,则必须在模块中将其导出:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export – worc

回答

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(模块)。

+0

工作和看起来不错,将进一步研究。谢谢! – grazianodev

相关问题