JavaScriptにおけるクロージャーを介したモジュール設定の渡し方
次のようなモジュールがあるとします:
;(function(root, type, amount) {
let parent = document.querySelector(root);
for (let i = 1; i <= amount; i++) {
let elem = document.createElement(type);
parent.append(elem);
}
})('#parent', 'p', 5);
ご覧の通り、このモジュールには3つの設定が渡されています: 親要素のセレクター、作成する要素のタイプ、そして要素の数です。
通常、このような設定はオブジェクト形式で行われます:
let config = {
root: '#parent',
type: 'p',
amount: 5
}
このオブジェクトをモジュールのパラメーターとして渡してみましょう:
;(function(config) {
let parent = document.querySelector(config.root);
for (let i = 1; i <= config.amount; i++) {
let elem = document.createElement(config.type);
parent.append(elem);
}
})(config);
設定オブジェクトを分割代入する方がより一般的です:
;(function({root, type, amount}) {
let parent = document.querySelector(root);
for (let i = 1; i <= amount; i++) {
let elem = document.createElement(type);
parent.append(elem);
}
})(config);