在學(xué)習(xí)jQuery的時候，我們經(jīng)常會看到“工廠函數(shù)”這個概念，那么究竟什么是“工廠函數(shù)”呢？我們來看看概念，“所謂工廠函數(shù)，就是指這些內(nèi)建函數(shù)都是類對象，當你調(diào)用他們時，實際上是創(chuàng)建了一個類實例”。意思就是當我調(diào)用這個函數(shù)，實際上是先利用類創(chuàng)建了一個對象，然后返回這個對象。由于Javascript本身不是嚴格的面向?qū)ο蟮恼Z言（不包含類），實際上來說，Javascript并沒有嚴格的“工廠函數(shù)”，但是在Javascript中，我們能利用函數(shù)模擬類。

我們首先通過new關(guān)鍵字創(chuàng)建了一個對象，obj就相當于Object的實例。我們通過類實例化了一個對象，然后給這個對象相應(yīng)的屬性，最后返回對象。我們可以通過調(diào)用這個函數(shù)來創(chuàng)建對象，這樣的話，實際上工廠函數(shù)也很好理解了：

1，它是一個函數(shù)。

2，它用來創(chuàng)建對象。

3，它像工廠一樣，“生產(chǎn)”出來的函數(shù)都是“標準件”（擁有同樣的屬性）

不學(xué)習(xí)函數(shù)和對象，你不可能成為一名JavaScript程序員，并且當他們一起使用時，是構(gòu)建塊，我們需要從一個稱為 組合(composition) 的強大對象范例開始。今天我們來看一些慣用的模式，使用工廠函數(shù)來組成函數(shù)，對象和 Promises 。組合模式是將一批子對象組織為樹形結(jié)構(gòu)，一條頂層的命令會在操作樹中所有的對象。當一個函數(shù)返回一個對象時，我們稱之他為 工廠函數(shù)(factory function) 。

    讓我們來看一個簡單的例子。

function createJelly() {
 return {
 type: 'jelly',
 colour: 'red'
 scoops: 3
 };
 }

下面我們通過一些實例給大家介紹。

    每次我們調(diào)用這個工廠函數(shù)，它將返回一個新的 jelly（果凍） 對象實例。要注意的重點是，我們不必在工廠函數(shù)名稱前面加上 create ，但它可以讓其他人更清楚函數(shù)的意圖。對于 type 屬性也是如此，但通常它可以幫助我們區(qū)分我們程序的對象。   

    1.帶參數(shù)的工廠函數(shù)

    像所有函數(shù)一樣，我們可以通過參數(shù)來定義我們的工廠函數(shù) （icecream 冰淇淋），這可以用來改變返回對象的模型。

function createIceCream(flavour='Vanilla') {
 return {
 type: 'icecream',
 scoops: 3,
 flavour
 }
 }

    理論上，您可以使用帶有數(shù)百個參數(shù)的工廠函數(shù)來返回非常特使的深層嵌套對象，但正如我們將看到的，這根本不是組合的精髓。

    2.組合的工廠函數(shù)

    在一個工廠函數(shù)中定義另一個工廠函數(shù)，可以幫助我們把復(fù)雜的工廠函數(shù)拆分成更小的，可重用的碎片。

    例如，我們可以創(chuàng)建一個 dessert（甜點）工廠函數(shù)，通過前面的 jelly（果凍）和 icecream（冰淇淋）工廠函數(shù)來定義。    

 function createDessert() {
 return {
 type: 'dessert',
 bowl: [
 createJelly(),
 createIceCream()
 ]
 };
 }

    我們可以組合工廠函數(shù)來構(gòu)建任意復(fù)雜的對象，這不需要我們結(jié)合使用 new 或 this 。對象可以用 has-a (具有) 關(guān)系而不是 is-a (是) 來表示。也就是說，可以用組合而不是繼承來實現(xiàn)。    

    例如，使用繼承。

 // A trifle *is a* dessert 蛋糕*是*甜點
 function Trifle() {
 Dessert.apply(this, arguments);
 }
 Trifle.prototype = Dessert.prototype;
 // 或者
 class Trifle extends Dessert {
 constructor() {
 super();
 }
 }

   我們可以用組合模式表達相同的意思。

 // A trifle *has* layers of jelly, custard and cream. It also *has a* topping.
 // 蛋糕 *有* 果凍層，奶酪層和奶油層，頂部還 *有* 裝飾配料。
 function createTrifle() {
 return {
 type: 'trifle',
 layers: [
 createJelly(),
 createCustard(),
 createCream()
 ],
 topping: createAlmonds()
 };
 }

    3.異步的工廠函數(shù)

    并非所有工廠都會立即返回數(shù)據(jù)。例如，有些必須先獲取數(shù)據(jù)。在這些情況下，我們可以返回 Promises 來定義工廠函數(shù)。  

function getMeal(menuUrl) {
 return new Promise((resolve, reject) => {
 fetch(menuUrl)
 .then(result => {
 resolve({
 type: 'meal',
 courses: result.json()
 });
 })
 .catch(reject);
 });
 }

    這種深度嵌套的縮進會使異步工廠難以閱讀和測試。將它們分解成多個不同的工廠通常是有幫助的，可以使用如下編寫。

function getMeal(menuUrl) {
 return fetch(menuUrl)
 .then(result => result.json())
 .then(json => createMeal(json));
 }
 function createMeal(courses=[]) {
 return {
 type: 'meal',
 courses
 };
 }

    當然，我們可以使用回調(diào)函數(shù)，但是我們已經(jīng)有了 Promise.all 這樣的工具返回 Promises 來定義工廠函數(shù)。    

 function getWeeksMeals() {
 const menuUrl = 'jsfood.com/';
 return Promise.all([
 getMeal(`${menuUrl}/monday`),
 getMeal(`${menuUrl}/tuesday`),
 getMeal(`${menuUrl}/wednesday`),
 getMeal(`${menuUrl}/thursday`),
 getMeal(`${menuUrl}/friday`)
 ]);
 }

    我們使用 get 而不是 create 作為命名約定來顯示這些工廠做一些異步工作和返回promise。

    4.函數(shù)和方法

    到目前為止，我們還沒有看到任何工廠用方法返回對象，這是故意的。這是因為一般來說，我們不需要這么做。工廠允許我們從計算中分離我們的數(shù)據(jù)。這意味著我們總是能夠?qū)ο笮蛄谢癁镴SON，這對于在會話之間持久化，通過HTTP或WebSockets發(fā)送它們，并將它們放入數(shù)據(jù)存儲很重要。

    例如，不是在 jelly(果凍) 對象上定義 eat 方法，我們可以定義一個新的函數(shù)，它接受一個對象作為參數(shù)并返回一個修改的版本。 

function eatJelly(jelly) {
 if(jelly.scoops > 0) {
 jelly.scoops -= 1;
 }
 return jelly;
 }

    一點點句法幫助使這是一個可行的模式，那些喜歡編程而不改變數(shù)據(jù)結(jié)構(gòu)的人。對于那些喜歡編程而不改變數(shù)據(jù)結(jié)構(gòu)的人來說，使用 ES6 的 ... 語法 是一個可行的模式。   

 function eat(jelly) {
 if(jelly.scoops > 0) {
 return { ...jelly, scoops: jelly.scoops - 1 };
 } else {
 return jelly;
 }
 }

    現(xiàn)在，不是這樣寫：

 import { createJelly } from './jelly';
 createJelly().eat();

    而是這樣寫   

 import { createJelly, eatJelly } from './jelly';
 eatJelly(createJelly()); 

    最終結(jié)果是一個函數(shù)，它接受一個對象并返回一個對象。我們稱之為返回對象的函數(shù)是什么？ 一個工廠！  

    5.高級工廠

    將工廠傳遞給 高階函數(shù) ，這將給我們帶來巨大的控制力。例如，我們可以使用這個概念來創(chuàng)建一個增強的對象。   

 function giveTimestamp(factory) {
 return (...args) => {
 const instance = factory(...args);
 const time = Date.now();
 return { time, instance };
 };
 }
 const createOrder = giveTimestamp(function(ingredients) {
 return {
 type: 'order',
 ingredients
 };
 });

    這個增強的對象采用一個現(xiàn)有工廠，并將其包裝以創(chuàng)建返回帶有時間戳實例的工廠。或者，如果我們想要確保一個工廠返回不可變的對象，我們可以用 freezer 來增強它。    

 function freezer(factory) {
 return (...args) => Object.freeze(factory(...args)));
 }
 const createImmutableIceCream = freezer(createIceCream);
 createImmutableIceCream('strawberry').flavour = 'mint'; // Error!

    6.結(jié)論

    作為一個 聰明的程序員 曾經(jīng)說過：從沒有抽象比錯誤的抽象更容易回收。JavaScript項目有一個趨勢，變得難以測試和重構(gòu)，因為我們經(jīng)常鼓勵使用復(fù)雜的抽象層。原型和類實現(xiàn)一個簡單的想法使用復(fù)雜和不人性的工具，如 new 和 this ，即使現(xiàn)在，這仍然引起 各種各樣的困惑 -幾年后他們被添加到語言。對象和函數(shù)對于來自大多數(shù)語言背景的程序員來說是有意義的，并且都是JavaScript中的原始類型，所以可以說工廠不是抽象的！對象和函數(shù)對來自大多數(shù)背景的程序員都有意義，并且都是JavaScript中的原始類型，所以可以說工廠不是抽象的！使用這些簡單的構(gòu)建塊使得我們的代碼對于沒有經(jīng)驗的程序員更加友好，這絕對是我們應(yīng)該關(guān)心的事情。工廠鼓勵我們用原始數(shù)據(jù)來模擬復(fù)雜和異步數(shù)據(jù)，原始數(shù)據(jù)具有組合的自然能力，而不強迫我們?nèi)プ鲆恍└呒壋橄蟆?當我們堅持簡單時，JavaScript更甜蜜！

以上所述是小編給大家介紹的JavaScript中的工廠函數(shù)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論