Factory Function 與 Object Literal 是絕配

傳統 Factory Function 是用來回傳 Object,但 ECMAScript 支援 First-Class Function,且 Function 其實也是 Object,因此 Factory Function 可廣義回傳底層已經準備好的 Function。

Version


ECMAScript 2015

Switch Case


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const funcA = () => 'a';
const funcB = () => 'b';
const emptyFunc = () => {};

const factoryFunc = funcName => {
switch (funcName) {
case 'funcA':
return funcA;

case 'funcB':
return funcB;

default:
return emptyFunc;
}
};

console.log(factoryFunc('funcA')());
console.log(factoryFunc('funcB')());
console.log(factoryFunc('funcC')());

已經準備好 funcAfuncB,在 factoryFunc() 由 user 傳入 function 名稱,就回傳指定的 function。

最直覺的寫法就是使用 switch case

factory000

Object Literal


1
2
3
4
5
6
7
8
9
10
11
12
13
14
const funcA = () => 'a';
const funcB = () => 'b';
const emptyFunc = () => {};

const funcMap = {
funcA,
funcB,
};

const factoryFunc = funcName => funcMap[funcName] || emptyFunc;

console.log(factoryFunc('funcA')());
console.log(factoryFunc('funcB')());
console.log(factoryFunc('funcC')());

由於 Object Literal 的 key / value 特性,其實可以用來取代 switch case,至於 default 則使用 || 表示。

factory001

Conclusion


  • 使用 Factory Function 回傳 function 是實務上常見的需求,尤其以 Object Literal 實現 Factory Function 既精簡又優雅
2018-11-29