目前我正在研究我的私人項目(用於學習),這是一個簡單的待辦事項列表。我試圖使用模塊化模式(揭示模塊模式,具體)。下圖顯示了我將如何構建它的一般想法。在JavaScript中結合設計模式是一種很好的做法
Image of how my app looks like
所以每個模塊在一個單獨的js文件,其中每個模塊的樣子:
var TaskModule = (function() {
function someFunction(parameter) {
tasks = newTasks;
}
}
而且還有一個問題:如果我們想創造一些像單獨的文件,讓說'助手功能'。這不是在每個模塊是這樣舒適的書寫:
var someElement = document.getElementById('id')
我有我的助手功能(該功能只是一個例子):
var someElement = byId('id');
我當然可以像同樣的方式創建HelpersModule別人但後來我會打電話給我的功能是這樣的:
var someElement = HelpersModule.byId('id');
導致我的幫助功能沒有意義了,這不是比原來的版本與document.getElem短entById。因此,爲了避免寫我每次打電話給我的助手功能時這個前綴「HelpersModule」,我設計HelpersModule這樣的:
(function(window) {
window.byId = function (selector, scope) {
return (scope || document).getElementById(selector);
};
})(window);
現在一切工作正常,但我創建HelpersModule的方式是不與其他模塊相一致。以不同的方式創建模塊或完全沒問題,這是不好的做法嗎?在你的其他代碼
const HelpersModule = {
byId: id => document.getElementById(id),
byTag: tag => Array.from(document.getElementsByTagName(tag))
};
...某處,指定你需要一個局部變量的輔助功能:
你的'HelpersModule.byID()'和'document.getElementById()'做同樣的事嗎? –
@ demogorgon.net是的,它的確如此,但這僅僅是一個例子 – pastuszkam
如果你的模塊是用來完成不同的事情(一個對象初始化一個對象,另一個提供全局變量),那麼它們看起來就不一樣了。使用不同的方式是完全正確的。儘管如此,我建議避免儘可能多的全局變量。 – Bergi