2017-10-11 34 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

相關問題