JavaScript 中的工廠函數

ElmaChin 7年前發布 | 14K 次閱讀 JavaScript開發 JavaScript

不學習函數和對象,你不可能成為一名JavaScript程序員,并且當他們一起使用時,是構建塊,我們需要從一個稱為 組合(composition) 的強大對象范例開始。今天我們來看一些慣用的模式,使用工廠函數來組成函數,對象和 Promises 。

愚人碼頭注:組合模式是將一批子對象組織為樹形結構,一條頂層的命令會在操作樹中所有的對象。

當一個函數返回一個對象時,我們稱之他為 工廠函數(factory function)

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

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

每次我們調用這個工廠函數,它將返回一個新的 jelly(果凍) 對象實例。

要注意的重點是,我們不必在工廠函數名稱前面加上 create ,但它可以讓其他人更清楚函數的意圖。

對于 type 屬性也是如此,但通常它可以幫助我們區分我們程序的對象。

帶參數的工廠函數

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

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

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

組合的工廠函數

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

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

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

我們可以組合工廠函數來構建任意復雜的對象,這不需要我們結合使用 new 或 this 。

對象可以用 has-a (具有) 關系而不是 is-a (是) 來表示。也就是說,可以用組合而不是繼承來實現。

例如,使用繼承。

// 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()
  };
}

異步的工廠函數

并非所有工廠都會立即返回數據。例如,有些必須先獲取數據。

在這些情況下,我們可以返回 Promises 來定義工廠函數。

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
  };
}

當然,我們可以使用回調函數,但是我們已經有了 Promise.all 這樣的工具返回 Promises 來定義工廠函數。

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。

函數和方法

到目前為止,我們還沒有看到任何工廠用方法返回對象,這是故意的。這是因為一般來說,我們不需要這么做。

工廠允許我們從計算中分離我們的數據。

這意味著我們總是能夠將對象序列化為JSON,這對于在會話之間持久化,通過HTTP或WebSockets發送它們,并將它們放入數據存儲很重要。

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

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

一點點句法幫助使這是一個可行的模式,那些喜歡編程而不改變數據結構的人。

對于那些喜歡編程而不改變數據結構的人來說,使用 ES6 的 ... 語法 是一個可行的模式。

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

現在,不是這樣寫:

import { createJelly } from './jelly';

createJelly().eat();

而是這樣寫

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

eatJelly(createJelly());

最終結果是一個函數,它接受一個對象并返回一個對象。

我們稱之為返回對象的函數是什么? 一個工廠!

高級工廠

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

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
  };
});

這個增強的對象采用一個現有工廠,并將其包裝以創建返回帶有時間戳實例的工廠。

或者,如果我們想要確保一個工廠返回不可變的對象,我們可以用 freezer 來增強它。

function freezer(factory) {
  return (...args) => Object.freeze(factory(...args)));
}

const createImmutableIceCream = freezer(createIceCream);

createImmutableIceCream('strawberry').flavour = 'mint'; // Error!

結論

作為一個 聰明的程序員 曾經說過:

從沒有抽象比錯誤的抽象更容易回收。

JavaScript項目有一個趨勢,變得難以測試和重構,因為我們經常鼓勵使用復雜的抽象層。

原型和類實現一個簡單的想法使用復雜和不人性的工具,如 new 和 this ,即使現在,這仍然引起 各種各樣的困惑 -幾年后他們被添加到語言。

對象和函數對于來自大多數語言背景的程序員來說是有意義的,并且都是JavaScript中的原始類型,所以可以說工廠不是抽象的!

對象和函數對來自大多數背景的程序員都有意義,并且都是JavaScript中的原始類型,所以可以說工廠不是抽象的!

使用這些簡單的構建塊使得我們的代碼對于沒有經驗的程序員更加友好,這絕對是我們應該關心的事情。工廠鼓勵我們用原始數據來模擬復雜和異步數據,原始數據具有組合的自然能力,而不強迫我們去做一些高級抽象。 當我們堅持簡單時,JavaScript更甜蜜!

 

來自:http://www.css88.com/archives/7106

 

 本文由用戶 ElmaChin 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!