JavaScript'i moodulite ehitusmustrid: keerukate objektide loomise meisterklass

JavaScriptis võib keerukate objektide loomine kiiresti muutuda kohmakaks, mis viib koodini, mida on raske hooldada, testida ja laiendada. Moodulimustrid pakuvad struktureeritud lähenemist koodi organiseerimiseks ja funktsionaalsuse kapseldamiseks. Nende mustrite hulgas paistavad tehase-, ehitaja- ja prototüübimustrid silma kui võimsad vahendid keerukate objektide loomise haldamiseks. See artikkel süveneb nendesse mustritesse, pakkudes praktilisi näiteid ja tuues esile nende eelised robustsete ja skaleeritavate JavaScripti rakenduste ehitamisel.

Objektide loomise mustrite vajalikkuse mõistmine

Keerukate objektide otse konstruktorite abil instantsimine võib põhjustada mitmeid probleeme:

• Tugev sidusus: Kliendi kood muutub tihedalt seotuks konkreetse klassiga, mida instantsitakse, muutes implementatsioonide vahetamise või uute variatsioonide lisamise keeruliseks.
• Koodi dubleerimine: Objekti loomise loogika võib olla dubleeritud mitmes koodibaasi osas, suurendades vigade riski ja muutes hoolduse keerulisemaks.
• Keerukus: Konstruktor ise võib muutuda liiga keeruliseks, käsitledes arvukaid parameetreid ja initsialiseerimisetappe.

Objektide loomise mustrid lahendavad need probleemid, abstraheerides instantsimisprotsessi, edendades nõrka sidusust, vähendades koodi dubleerimist ja lihtsustades keerukate objektide loomist.

Tehase muster

Tehase muster pakub tsentraliseeritud viisi erinevat tüüpi objektide loomiseks, täpsustamata täpset klassi, mida instantsida. See kapseldab objekti loomise loogika, võimaldades luua objekte konkreetsete kriteeriumide või konfiguratsioonide alusel. See soodustab nõrka sidusust ja lihtsustab erinevate implementatsioonide vahel vahetamist.

Tehase mustri tüübid

Tehase mustril on mitu variatsiooni, sealhulgas:

• Lihtne tehas: Üksik tehaseklass, mis loob objekte antud sisendi põhjal.
• Tehasemeetod: Liides või abstraktne klass, mis määratleb meetodi objektide loomiseks, võimaldades alamklassidel otsustada, millist klassi instantsida.
• Abstraktne tehas: Liides või abstraktne klass, mis pakub liidese seotud või sõltuvate objektide perede loomiseks ilma nende konkreetseid klasse määramata.

Lihtsa tehase näide

Vaatleme stsenaariumi, kus peame looma erinevat tüüpi kasutajaobjekte (nt AdminUser, RegularUser, GuestUser) nende rolli alusel.

            
// Kasutajaklassid
class AdminUser {
  constructor(name) {
    this.name = name;
    this.role = 'admin';
  }
}

class RegularUser {
  constructor(name) {
    this.name = name;
    this.role = 'regular';
  }
}

class GuestUser {
  constructor() {
    this.name = 'Guest';
    this.role = 'guest';
  }
}

// Lihtne tehas
class UserFactory {
  static createUser(role, name) {
    switch (role) {
      case 'admin':
        return new AdminUser(name);
      case 'regular':
        return new RegularUser(name);
      case 'guest':
        return new GuestUser();
      default:
        throw new Error('Invalid user role');
    }
  }
}

// Kasutamine
const admin = UserFactory.createUser('admin', 'Alice');
const regular = UserFactory.createUser('regular', 'Bob');
const guest = UserFactory.createUser('guest');

console.log(admin);
console.log(regular);
console.log(guest);

            

              
                Copy
              
            
          

Tehasemeetodi näide

Nüüd implementeerime tehasemeetodi mustri. Loome tehasele abstraktse klassi ja iga kasutajatüübi tehasele alamklassid.

            
// Abstraktne tehas
class UserFactory {
  createUser(name) {
    throw new Error('Method not implemented');
  }
}

// Konkreetsed tehased
class AdminUserFactory extends UserFactory {
  createUser(name) {
    return new AdminUser(name);
  }
}

class RegularUserFactory extends UserFactory {
  createUser(name) {
    return new RegularUser(name);
  }
}

// Kasutamine
const adminFactory = new AdminUserFactory();
const regularFactory = new RegularUserFactory();

const admin = adminFactory.createUser('Alice');
const regular = regularFactory.createUser('Bob');

console.log(admin);
console.log(regular);

            

              
                Copy
              
            
          

Abstraktse tehase näide

Keerukama stsenaariumi jaoks, mis hõlmab seotud objektide peresid, kaaluge abstraktset tehast. Kujutagem ette, et peame looma kasutajaliidese elemente erinevatele operatsioonisüsteemidele (nt Windows, macOS). Iga operatsioonisüsteem nõuab spetsiifilist komplekti kasutajaliidese komponente (nupud, tekstiväljad jne).

            
// Abstraktsed tooted
class Button {
  render() {
    throw new Error('Method not implemented');
  }
}

class TextField {
  render() {
    throw new Error('Method not implemented');
  }
}

// Konkreetsed tooted
class WindowsButton extends Button {
  render() {
    return 'Windows Button';
  }
}

class macOSButton extends Button {
  render() {
    return 'macOS Button';
  }
}

class WindowsTextField extends TextField {
  render() {
    return 'Windows TextField';
  }
}

class macOSTextField extends TextField {
  render() {
    return 'macOS TextField';
  }
}

// Abstraktne tehas
class UIFactory {
  createButton() {
    throw new Error('Method not implemented');
  }

  createTextField() {
    throw new Error('Method not implemented');
  }
}

// Konkreetsed tehased
class WindowsUIFactory extends UIFactory {
  createButton() {
    return new WindowsButton();
  }

  createTextField() {
    return new WindowsTextField();
  }
}

class macOSUIFactory extends UIFactory {
  createButton() {
    return new macOSButton();
  }

  createTextField() {
    return new macOSTextField();
  }
}

// Kasutamine
function createUI(factory) {
  const button = factory.createButton();
  const textField = factory.createTextField();
  return {
    button: button.render(),
    textField: textField.render()
  };
}

const windowsUI = createUI(new WindowsUIFactory());
const macOSUI = createUI(new macOSUIFactory());

console.log(windowsUI);
console.log(macOSUI);

            

              
                Copy
              
            
          

Tehase mustri eelised

• Nõrk sidusus: Eraldab kliendi koodi konkreetsetest klassidest, mida instantsitakse.
• Kapseldamine: Kapseldab objekti loomise loogika ühte kohta.
• Paindlikkus: Lihtsustab erinevate implementatsioonide vahel vahetamist või uute objektitüüpide lisamist.
• Testitavus: Lihtsustab testimist, võimaldades tehast mockida või stubida.

Ehitaja muster

Ehitaja muster on eriti kasulik, kui peate looma keerukaid objekte suure hulga valikuliste parameetrite või konfiguratsioonidega. Selle asemel, et kõiki neid parameetreid konstruktorile edastada, võimaldab ehitaja muster objekti samm-sammult konstrueerida, pakkudes sujuvat liidest iga parameetri eraldi seadistamiseks.

Millal kasutada ehitaja mustrit

Ehitaja muster sobib stsenaariumideks, kus:

• Objekti loomisprotsess hõlmab mitmeid samme.
• Objektil on suur hulk valikulisi parameetreid.
• Soovite pakkuda selget ja loetavat viisi objekti konfigureerimiseks.

Ehitaja mustri näide

Vaatleme stsenaariumi, kus peame looma `Computer` objekti erinevate valikuliste komponentidega (nt protsessor, RAM, salvestusruum, graafikakaart). Ehitaja muster aitab meil seda objekti luua struktureeritud ja loetaval viisil.

            
// Arvuti klass
class Computer {
  constructor(cpu, ram, storage, graphicsCard, monitor) {
    this.cpu = cpu;
    this.ram = ram;
    this.storage = storage;
    this.graphicsCard = graphicsCard;
    this.monitor = monitor;
  }

  toString() {
    return `Computer: CPU=${this.cpu}, RAM=${this.ram}, Storage=${this.storage}, GraphicsCard=${this.graphicsCard}, Monitor=${this.monitor}`;
  }
}

// Ehitaja klass
class ComputerBuilder {
  constructor() {
    this.cpu = null;
    this.ram = null;
    this.storage = null;
    this.graphicsCard = null;
    this.monitor = null;
  }

  setCPU(cpu) {
    this.cpu = cpu;
    return this;
  }

  setRAM(ram) {
    this.ram = ram;
    return this;
  }

  setStorage(storage) {
    this.storage = storage;
    return this;
  }

  setGraphicsCard(graphicsCard) {
    this.graphicsCard = graphicsCard;
    return this;
  }

  setMonitor(monitor) {
    this.monitor = monitor;
    return this;
  }

  build() {
    return new Computer(this.cpu, this.ram, this.storage, this.graphicsCard, this.monitor);
  }
}

// Kasutamine
const builder = new ComputerBuilder();
const myComputer = builder
  .setCPU('Intel i7')
  .setRAM('16GB')
  .setStorage('1TB SSD')
  .setGraphicsCard('Nvidia RTX 3080')
  .setMonitor('32-inch 4K')
  .build();

console.log(myComputer.toString());

const basicComputer = new ComputerBuilder()
 .setCPU("Intel i3")
 .setRAM("8GB")
 .setStorage("500GB HDD")
 .build();

console.log(basicComputer.toString());

            

              
                Copy
              
            
          

Ehitaja mustri eelised

• Parem loetavus: Pakub sujuvat liidest keerukate objektide konfigureerimiseks, muutes koodi loetavamaks ja hooldatavamaks.
• Vähendatud keerukus: Lihtsustab objekti loomisprotsessi, jagades selle väiksemateks, hallatavateks sammudeks.
• Paindlikkus: Võimaldab luua objekti erinevaid variatsioone, konfigureerides erinevaid parameetrite kombinatsioone.
• Hoiab ära teleskoopkonstruktorid: Väldib vajadust mitme erineva parameetrite loendiga konstruktori järele.

Prototüübi muster

Prototüübi muster võimaldab luua uusi objekte olemasoleva objekti, mida tuntakse prototüübina, kloonimise teel. See on eriti kasulik, kui luuakse üksteisega sarnaseid objekte või kui objekti loomisprotsess on kulukas.

Millal kasutada prototüübi mustrit

Prototüübi muster sobib stsenaariumideks, kus:

• Peate looma palju üksteisega sarnaseid objekte.
• Objekti loomisprotsess on arvutuslikult kulukas.
• Soovite vältida alamklasside loomist.

Prototüübi mustri näide

Vaatleme stsenaariumi, kus peame looma mitu `Shape` objekti erinevate omadustega (nt värv, asukoht). Selle asemel, et iga objekti nullist luua, saame luua prototüübikujundi ja kloonida seda, et luua uusi, muudetud omadustega kujundeid.

            
// Kujundi klass
class Shape {
  constructor(color = 'red', x = 0, y = 0) {
    this.color = color;
    this.x = x;
    this.y = y;
  }

  draw() {
    console.log(`Drawing shape at (${this.x}, ${this.y}) with color ${this.color}`);
  }

  clone() {
    return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
  }
}

// Kasutamine
const prototypeShape = new Shape();

const shape1 = prototypeShape.clone();
shape1.x = 10;
shape1.y = 20;
shape1.color = 'blue';
shape1.draw();

const shape2 = prototypeShape.clone();
shape2.x = 30;
shape2.y = 40;
shape2.color = 'green';
shape2.draw();

prototypeShape.draw(); // Algne prototüüp jääb muutmata

            

              
                Copy
              
            
          

Sügav kloonimine

Ülaltoodud näide teostab pinnapealse koopia. Pesastatud objekte või massiive sisaldavate objektide puhul on teil vaja sügava kloonimise mehhanismi, et vältida viidete jagamist. Teegid nagu Lodash pakuvad sügava kloonimise funktsioone või saate implementeerida oma rekursiivse sügava kloonimise funktsiooni.

            
// Sügava kloonimise funktsioon (kasutades JSON stringify/parse)
function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

// Näide pesastatud objektiga
class Circle {
    constructor(radius, style = { color: 'red' }) {
        this.radius = radius;
        this.style = style;
    }

    clone() {
        return deepClone(this);
    }

    draw() {
        console.log(`Drawing a circle with radius ${this.radius} and color ${this.style.color}`);
    }
}

const originalCircle = new Circle(5, { color: 'blue' });
const clonedCircle = originalCircle.clone();
clonedCircle.radius = 10;
clonedCircle.style.color = 'green';

originalCircle.draw(); // Väljund: Drawing a circle with radius 5 and color blue
clonedCircle.draw();   // Väljund: Drawing a circle with radius 10 and color green

            

              
                Copy
              
            
          

Prototüübi mustri eelised

• Vähendatud objekti loomise kulu: Loob uusi objekte olemasolevate objektide kloonimise teel, vältides kulukaid initsialiseerimisetappe.
• Lihtsustatud objekti loomine: Lihtsustab objekti loomisprotsessi, peites objekti initsialiseerimise keerukuse.
• Dünaamiline objekti loomine: Võimaldab luua uusi objekte dünaamiliselt olemasolevate prototüüpide põhjal.
• Väldib alamklasside loomist: Saab kasutada alternatiivina alamklasside loomisele objektide variatsioonide loomiseks.

Õige mustri valimine

See, millist objekti loomise mustrit kasutada, sõltub teie rakenduse konkreetsetest nõuetest. Siin on lühike juhend:

• Tehase muster: Kasutage, kui peate looma erinevat tüüpi objekte konkreetsete kriteeriumide või konfiguratsioonide alusel. Hea, kui objekti loomine on suhteliselt sirgjooneline, kuid peab olema kliendist lahti seotud.
• Ehitaja muster: Kasutage, kui peate looma keerukaid objekte suure hulga valikuliste parameetrite või konfiguratsioonidega. Parim, kui objekti ehitamine on mitmeastmeline protsess.
• Prototüübi muster: Kasutage, kui peate looma palju üksteisega sarnaseid objekte või kui objekti loomisprotsess on kulukas. Ideaalne olemasolevate objektide koopiate loomiseks, eriti kui kloonimine on tõhusam kui nullist loomine.

Reaalse elu näited

Neid mustreid kasutatakse laialdaselt paljudes JavaScripti raamistikes ja teekides. Siin on mõned reaalse elu näited:

• Reacti komponendid: Tehase mustrit saab kasutada erinevat tüüpi Reacti komponentide loomiseks omaduste (props) või konfiguratsiooni alusel.
• Reduxi tegevused (Actions): Tehase mustrit saab kasutada erinevate koormustega Reduxi tegevuste loomiseks.
• Konfiguratsiooniobjektid: Ehitaja mustrit saab kasutada keerukate konfiguratsiooniobjektide loomiseks suure hulga valikuliste seadetega.
• Mänguarendus: Prototüübi mustrit kasutatakse sageli mänguarenduses mitme mänguüksuse (nt tegelased, vaenlased) eksemplari loomiseks prototüübi alusel.

Kokkuvõte

Objektide loomise mustrite, nagu tehase-, ehitaja- ja prototüübimustri, valdamine on oluline robustsete, hooldatavate ja skaleeritavate JavaScripti rakenduste ehitamiseks. Mõistes iga mustri tugevusi ja nõrkusi, saate valida töö jaoks õige vahendi ja luua keerukaid objekte elegantselt ja tõhusalt. Need mustrid edendavad nõrka sidusust, vähendavad koodi dubleerimist ja lihtsustavad objekti loomisprotsessi, mis viib puhtama, paremini testitava ja hooldatavama koodini. Neid mustreid läbimõeldult rakendades saate oluliselt parandada oma JavaScripti projektide üldist kvaliteeti.