2017-08-05 56 views
4

目前我正在研究我的私人項目(用於學習),這是一個簡單的待辦事項列表。我試圖使用模塊化模式(揭示模塊模式,具體)。下圖顯示了我將如何構建它的一般想法。在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)) 
}; 

...某處,指定你需要一個局部變量的輔助功能:

+1

你的'HelpersModule.byID()'和'document.getElementById()'做同樣的事嗎? –

+0

@ demogorgon.net是的,它的確如此,但這僅僅是一個例子 – pastuszkam

+1

如果你的模塊是用來完成不同的事情(一個對象初始化一個對象,另一個提供全局變量),那麼它們看起來就不一樣了。使用不同的方式是完全正確的。儘管如此,我建議避免儘可能多的全局變量。 – Bergi

回答

2

創建一個應用模塊(如您的HelpersModule

// ... 
const byId = HelpersModule.byId; // if you only need 'byId' 
const element = byId('my-id'); 
// ... 

或,使用解構:

const { byId } = HelpersModule; // if you only need 'byId' 
const element = byId('my-id'); 

const { byId, byTag } = HelpersModule; // if you need both 
const element = byId('my-id'); 
const allSpans = byTag('span'); 
+0

這是正確的想法,但他沒有表明他使用ECMAScript 6. –

+0

@Sahuagin加入,'const'有[96.94%](http://caniuse.com/#feat=const)global支持,並且我提供瞭解構的替代方案。如果OP真的遇到'const'的問題,他可以很容易地用'var'替換它。這是否是倒退的原因? – PeterMader

+0

ES6中的答案沒有問題。您的解決方案非常有用。謝謝。 – pastuszkam

0

如果兩個

var someElement = document.getElementById('id') 

var someElement = HelpersModule.byId('id'); 

做同樣的事情,那麼我只用第一個,而不是創建一個新的模塊建議。通過這種方式,您將保持對模塊模型的真實性,並且您只需爲每個模塊添加一行代碼。創建一個全新的模塊,並且不需要每個模塊寫入一行代碼。這有幫助嗎/我理解你的問題嗎?

編輯:

我明白你的意思了。你想知道你是否應該爲每個模塊製作一個單獨的模塊來保存所有的輔助方法。在這種情況下,最好將助手方法僅保存在需要的文件中。因此,如果您有一個僅在一個文件中使用並且只能用於該文件的助手方法,它應該只是留在那個文件中。如果它們位於需要它們的文件中,跟蹤所有的方法會更容易。它還可以防止您在文件之間來回跳轉以找到您要查找的方法。

所以,只需要在需要它們的文件(調用它們的文件)內保留輔助方法而不是另一個模塊。當你的文件有數千行代碼時,它會變得混亂。

+0

當然在這個例子中,沒有意義爲一個函數創建另一個模塊,我同意。但這只是一個例子。如果我有很多助手功能,我可能需要這樣的模塊。 – pastuszkam

+0

我編輯了我的答案,讓我知道這是否合理。乾杯@pastuszkam –

+0

在這種方法中,我可能需要在每個需要這些功能的文件中複製一些函數的代碼。我想避免任何重複。 – pastuszkam

相關問題