詳解JavaScript中的工廠函數的範例程式碼

所謂工廠函數，就是指這些內建函數都是類別對象，當你呼叫他們時，實際上是創建了一個類別實例。這篇文章主要介紹了JavaScript工廠函數,需要的朋友可以參考下

#在學習jQuery的時候，我們常常會看到「工廠函數」這個概念，那麼究竟什麼是「工廠函數」呢？讓我們來看看概念，「所謂工廠函數，就是指這些內建函數都是類別對象，當你呼叫他們時，實際上是創建了一個類別實例」。意思是當我呼叫這個函數，實際上是先利用類別創建了一個對象，然後返回這個對象。由於Javascript本身不是嚴格的物件導向的語言（不包含類別），實際上來說，Javascript並沒有嚴格的“工廠函數”，但是在Javascript中，我們可以利用函數來模擬類別。

我們先透過new關鍵字創建了一個對象，obj就相當於Object的實例。我們透過類別實例化了一個對象，然後給這個對象相應的屬性，最後返回對象。我們可以透過呼叫這個函數來創建對象，這樣的話，實際上工廠函數也很好理解了：

1，它是一個函數。

2，它用來建立物件。

3，它像工廠一樣，「生產」出來的函數都是「標準零件」（擁有相同的屬性）

不學習函數和對象，你不可能成為一名JavaScript程式設計師，並且當他們一起使用時，是構建塊，我們需要從一個稱為組合(composition) 的強大物件範例開始。今天我們來看一些慣用的模式，使用工廠函數來組成函數，物件和 Promises 。 組合模式是將一批子物件組織為樹狀結構，一條頂層的指令會在操作樹中所有的物件。當一個函數回傳一個物件時，我們稱之他為 工廠函數(factory function) 。

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

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

下面我們透過一些實例來跟大家介紹。

    每次我們呼叫這個工廠函數，它將傳回一個新的 jelly（果凍） 物件實例。要注意的重點是，我們不必在工廠函數名稱前面加上 create ，但它可以讓其他人更清楚函數的意圖。對於 type 屬性也是如此，但通常它可以幫助我們區分我們程式的物件。

    1.帶有參數的工廠函數

    就像所有函數一樣，我們可以透過參數定義我們的工廠函數（icecream 冰淇淋），這可以用來改變傳回物件的模型。

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

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

    2.組合好的工廠函數

    在一個工廠函數中定義另一個工廠函數，可以幫助我們把複雜的工廠函數分割成較小的，可重用的碎片。

    例如，我們可以建立一個 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()
 };
 }

    3.非同步的工廠函數

#    並非所有工廠都會立即回傳資料。例如，有些必須先取得數據。在這些情況下，我們可以傳回 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。

4.函数和方法

到目前为止，我们还没有看到任何工厂用方法返回对象，这是故意的。这是因为一般来说，我们不需要这么做。工厂允许我们从计算中分离我们的数据。这意味着我们总是能够将对象序列化为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());

最终结果是一个函数，它接受一个对象并返回一个对象。我们称之为返回对象的函数是什么？ 一个工厂！

5.高级工厂

将工厂传递给 高阶函数 ，这将给我们带来巨大的控制力。例如，我们可以使用这个概念来创建一个增强的对象。

 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!

    6.结论

    作为一个 聪明的程序员 曾经说过：从没有抽象比错误的抽象更容易回收。JavaScript项目有一个趋势，变得难以测试和重构，因为我们经常鼓励使用复杂的抽象层。原型和类实现一个简单的想法使用复杂和不人性的工具，如 new 和 this ，即使现在，这仍然引起 各种各样的困惑 -几年后他们被添加到语言。对象和函数对于来自大多数语言背景的程序员来说是有意义的，并且都是JavaScript中的原始类型，所以可以说工厂不是抽象的！对象和函数对来自大多数背景的程序员都有意义，并且都是JavaScript中的原始类型，所以可以说工厂不是抽象的！使用这些简单的构建块使得我们的代码对于没有经验的程序员更加友好，这绝对是我们应该关心的事情。工厂鼓励我们用原始数据来模拟复杂和异步数据，原始数据具有组合的自然能力，而不强迫我们去做一些高级抽象。 当我们坚持简单时，JavaScript更甜蜜！

以上是詳解JavaScript中的工廠函數的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！