Detaillierter Beispielcode für Factory-Funktionen in JavaScript

Die sogenannte Factory-Funktion bedeutet, dass diese integrierten Funktionen alle Klassenobjekte sind. Wenn Sie sie aufrufen, erstellen Sie tatsächlich eine Klasseninstanz. In diesem Artikel wird hauptsächlich die Factory-Funktion JavaScript vorgestellt. Freunde, die sie benötigen, können sich auf

Beim Erlernen von jQuery beziehen Sehen Sie sich das Konzept der „Fabrikfunktion“ an. Was genau ist eine „Fabrikfunktion“? Werfen wir einen Blick auf das Konzept: „Die sogenannte Factory-Funktion bedeutet, dass diese integrierten Funktionen alle Klassenobjekte sind. Wenn Sie sie aufrufen, erstellen Sie tatsächlich eine Klasseninstanz.“ Das heißt, wenn ich diese Funktion aufrufe, erstelle ich tatsächlich ein Objekt mithilfe der Klasse und gebe das Objekt dann zurück. Da Javascript selbst keine streng objektorientierte Sprache ist (keine Klassen enthält), verfügt Javascript tatsächlich nicht über eine strikte „Fabrikfunktion“, aber in Javascript können wir Funktionen zum Simulieren von Klassen verwenden.

Wir erstellen zunächst ein Objekt über das Schlüsselwort new, und obj entspricht einer Instanz von Object. Wir instanziieren ein Objekt über die Klasse, geben dem Objekt dann entsprechende Attribute und geben schließlich das Objekt zurück. Wir können Objekte erstellen, indem wir diese Funktion aufrufen. In diesem Fall ist die Factory-Funktion tatsächlich leicht zu verstehen:

1, es ist eine Funktion.

2, das zum Erstellen von Objekten verwendet wird.

3. Die „produzierten“ Funktionen sind alle „Standardteile“ (mit den gleichen Attributen)

Sie können kein JavaScript werden, ohne Funktionen und Objekte zu lernen. Programmierer sind Bausteine, und wenn sie zusammen verwendet werden, müssen wir mit einem leistungsstarken Objektparadigma namens Komposition beginnen. Heute betrachten wir einige idiomatische Muster für die Verwendung von Fabrikfunktionen zum Erstellen von Funktionen, Objekten und Versprechen. Kombinierter Modus organisiert einen Stapel von Unterobjekten in einer Baumstruktur, und ein Befehl der obersten Ebene steuert alle Objekte im Baum. Wenn eine Funktion ein Objekt zurückgibt, nennen wir es eine Factory-Funktion.

Schauen wir uns ein einfaches Beispiel an.

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

Im Folgenden stellen wir es Ihnen anhand einiger Beispiele vor.

Jedes Mal, wenn wir diese Factory-Funktion aufrufen, wird eine neue Jelly-Objektinstanz zurückgegeben. Es ist wichtig zu beachten, dass wir dem Factory-Funktionsnamen nicht create voranstellen müssen, aber es macht die Absicht der Funktion für andere klarer. Das Gleiche gilt für das Typattribut, aber im Allgemeinen hilft es uns, zwischen den Objekten unseres Programms zu unterscheiden.

1. Factory-Funktion mit Parametern

Wie alle Funktionen können wir unsere Factory-Funktion (Eiscreme) über Parameter definieren, diese können genutzt werden, um sie zu verändern das Modell des zurückgegebenen Objekts.

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

Theoretisch könnten Sie Factory-Funktionen mit Hunderten von Argumenten verwenden, um sehr viele Gesandte tief verschachtelter Objekte zurückzugeben, aber wie wir sehen werden, ist das überhaupt nicht das Wesentliche der Komposition.

2. Kombinierte Factory-Funktion

Das Definieren einer weiteren Factory-Funktion innerhalb einer Factory-Funktion kann uns dabei helfen, die komplexe Factory-Funktion in kleinere, wiederverwendbare Fragmente aufzuteilen.

Zum Beispiel können wir eine Dessert-(Dessert-)Fabrikfunktion erstellen, die durch die vorherigen Gelee-(Gelee-) und Eiscreme-(Eiscreme-)Fabrikfunktionen definiert wird.

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

Wir können Fabrikfunktionen kombinieren, um beliebig komplexe Objekte zu erstellen, was nicht erfordert, dass wir neue oder diese in Kombination verwenden. Objekte können durch die Beziehung has-a (has) anstelle von is-a (is) dargestellt werden. Mit anderen Worten: Es kann mithilfe von Komposition statt Erben implementiert werden.

Verwenden Sie beispielsweise Vererbung.

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

Wir können dieselbe Bedeutung im Kombinationsmodus ausdrücken.

 // 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. Asynchrone Fabrikfunktion

Nicht alle Fabriken geben Daten sofort zurück. Manche müssen sich zum Beispiel erst die Daten besorgen. In diesen Fällen können wir Promises zurückgeben, um Factory-Funktionen zu definieren.

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

Diese tief verschachtelte Einrückung kann das Lesen und Testen asynchroner Fabriken erschweren. Es ist oft hilfreich, sie in mehrere verschiedene Fabriken aufzuteilen, die wie folgt geschrieben werden können.

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

Natürlich können wir die

Callback-Funktion verwenden, aber wir haben bereits Tools wie Promise.all, die Versprechen zurückgeben, um Factory-Funktionen zu definieren.

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

Wir verwenden „get“ anstelle von „create“ als Namenskonvention, um zu zeigen, dass diese Fabriken einige asynchrone Arbeiten ausführen und Versprechen zurückgeben.

    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更甜蜜！

Das obige ist der detaillierte Inhalt vonDetaillierter Beispielcode für Factory-Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!