JavaScript의 팩토리 기능에 대한 자세한 샘플 코드

소위 팩토리 함수는 이러한 내장 함수가 모두 클래스 객체임을 의미합니다. 이를 호출하면 실제로 클래스 인스턴스가 생성됩니다. 이번 글에서는 주로 JavaScript 팩토리 기능을 소개합니다. 필요한 친구들은

jQuery를 배울 때 자주 참고하면 됩니다. "팩토리 기능"의 개념을 참조하세요. 그렇다면 "팩토리 기능"이란 정확히 무엇입니까? "소위 팩토리 함수라고 불리는 것은 이러한 내장 함수가 모두 클래스 객체임을 의미합니다. 이를 호출하면 실제로 클래스 인스턴스가 생성됩니다."라는 개념을 살펴보겠습니다. 이는 이 함수를 호출할 때 실제로 클래스를 사용하여 개체를 만든 다음 해당 개체를 반환한다는 의미입니다. Javascript 자체는 엄격하게 객체 지향 언어가 아니기 때문에(클래스를 포함하지 않음) 사실 Javascript에는 엄격한 "팩토리 함수"가 없지만 Javascript에서는 함수를 사용하여 클래스를 시뮬레이션할 수 있습니다.

먼저 new 키워드를 통해 객체를 생성하는데, obj는 Object의 인스턴스와 같습니다. 클래스를 통해 객체를 인스턴스화한 다음 객체에 해당 속성을 부여하고 마지막으로 객체를 반환합니다. 이 함수를 호출하여 객체를 생성할 수 있습니다. 이 경우 팩토리 함수는 실제로 이해하기 쉽습니다.

1, 함수입니다.

2, 객체를 생성하는 데 사용됩니다.

3. "생산되는" 함수는 모두 "표준 부품"(동일한 속성을 가짐)입니다.

함수와 객체를 배우지 않으면 JavaScript가 될 수 없습니다. 프로그래머와 함께 사용될 때 구성 요소는 구성이라는 강력한 개체 패러다임으로 시작해야 합니다. 오늘은 팩토리 함수를 사용하여 함수, 개체 및 약속을 구성하는 몇 가지 관용적 패턴을 살펴보겠습니다. 결합 모드는 일련의 하위 개체를 트리 구조로 구성하고 최상위 명령이 트리의 모든 개체를 작동합니다. 함수가 객체를 반환하면 이를 팩토리 함수라고 부릅니다.

간단한 예를 살펴보겠습니다.

rree

몇 가지 예시를 통해 소개해드리겠습니다.

이 팩토리 함수를 호출할 때마다 새로운 젤리 개체 인스턴스가 반환됩니다. 주목해야 할 중요한 점은 팩토리 함수 이름 앞에 create 를 붙일 필요는 없지만 함수의 의도를 다른 사람에게 더 명확하게 한다는 것입니다. type 속성의 경우에도 마찬가지이지만 일반적으로 프로그램의 개체를 구별하는 데 도움이 됩니다.

1. 매개변수가 있는 팩토리 함수

모든 함수와 마찬가지로 매개변수를 통해 팩토리 함수(아이스크림 아이스크림)를 정의할 수 있습니다. 반환된 객체의 모델

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

이론적으로는 수백 개의 인수가 포함된 팩토리 함수를 사용하여 깊이 중첩된 개체의 특사를 반환할 수 있지만 앞으로 살펴보겠지만 이는 구성의 본질이 전혀 아닙니다.

2. 결합된 팩토리 함수

팩토리 함수 내에 다른 팩토리 함수를 정의하면 복잡한 팩토리 함수를 재사용 가능한 조각으로 분할하는 데 도움이 됩니다.

예를 들어 이전의 젤리(jelly) 팩토리 함수와 아이스크림(icecream) 팩토리 함수로 정의된 디저트(dessert) 팩토리 함수를 만들 수 있습니다. ​

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

​ 팩토리 기능을 결합하여 임의로 복잡한 객체를 만들 수 있으며, 이를 위해서는 new 또는 this를 조합하여 사용할 필요가 없습니다. 객체는 is-a(is) 대신 has-a(has) 관계로 표현될 수 있습니다. 즉, 상속이 아닌 합성을 이용하여 구현할 수 있다.

예를 들어 상속을 사용합니다.

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

조합모드를 사용해도 같은 의미를 표현할 수 있습니다.

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

3. 비동기 팩토리 기능

모든 팩토리가 즉시 데이터를 반환하는 것은 아닙니다. 예를 들어, 일부는 먼저 데이터를 가져와야 합니다. 이러한 경우 Promise를 반환하여 팩토리 함수를 정의할 수 있습니다.

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

깊게 중첩된 들여쓰기로 인해 비동기 팩토리를 읽고 테스트하기가 어려워질 수 있습니다. 이와 같이 작성할 수 있는 여러 다른 팩토리로 분할하는 것이 도움이 되는 경우가 많습니다.

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

물론

콜백 함수를 사용할 수 있지만 팩토리 함수를 정의하기 위해 Promise.all을 반환하는 Promise.all과 같은 도구가 이미 있습니다. ​

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

​ 이러한 팩토리가 비동기 작업을 수행하고 약속을 반환한다는 것을 보여주기 위해 명명 규칙으로 create 대신 get을 사용합니다.

    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!