JavaScript-moduulien koristelukuviot: Käyttäytymisen parantaminen

Jatkuvasti kehittyvässä JavaScript-kehityksen maisemassa puhtaan, ylläpidettävän ja uudelleenkäytettävän koodin kirjoittaminen on ensiarvoisen tärkeää. Moduulien koristelukuviot tarjoavat tehokkaan tekniikan JavaScript-moduulien käyttäytymisen parantamiseen ilman, että niiden ydintoiminnallisuutta muutetaan. Tämä lähestymistapa edistää vastuualueiden erottamista, tehden koodistasi joustavampaa, testattavampaa ja helpommin ymmärrettävää.

Mitä ovat moduulien koristelijat?

Moduulien koristelija on funktio, joka ottaa syötteenä moduulin (yleensä funktion tai luokan) ja palauttaa muokatun version kyseisestä moduulista. Koristelija lisää tai muokkaa alkuperäisen moduulin käyttäytymistä muuttamatta suoraan sen lähdekoodia. Tämä noudattaa avoin/suljettu -periaatetta, jonka mukaan ohjelmistoyksiköt (luokat, moduulit, funktiot jne.) tulisi olla avoimia laajennuksille, mutta suljettuja muutoksille.

Ajattele sitä kuin pizzan päälle lisättäviä ylimääräisiä täytteitä. Peruspizza (alkuperäinen moduuli) pysyy samana, mutta olet parannellut sitä lisämakujen ja ominaisuuksien (koristelijan lisäykset) avulla.

Moduulien koristelijoiden käytön edut

• Parannettu koodin uudelleenkäyttö: Koristelijoita voidaan soveltaa useisiin moduuleihin, mikä mahdollistaa käyttäytymisen parannusten uudelleenkäytön koodipohjassasi.
• Parannettu ylläpidettävyys: Erottamalla vastuualueet koristelijat helpottavat yksittäisten moduulien ja niiden parannusten ymmärtämistä, muokkaamista ja testaamista.
• Lisääntynyt joustavuus: Koristelijat tarjoavat joustavan tavan lisätä tai muokata toiminnallisuutta muuttamatta alkuperäisen moduulin koodia.
• Avoin/suljettu -periaatteen noudattaminen: Koristelijat mahdollistavat moduulien toiminnallisuuden laajentamisen muuttamatta suoraan niiden lähdekoodia, edistäen ylläpidettävyyttä ja vähentäen virheiden syntymisen riskiä.
• Parannettu testattavuus: Koristeltuja moduuleja voidaan helposti testata koristelijafunktioita jäljittelemällä tai varjostamalla.

Keskeiset käsitteet ja toteutus

Pohjimmiltaan moduulien koristelija on korkeamman asteen funktio. Se ottaa funktion (tai luokan) argumenttina ja palauttaa uuden, muokatun funktion (tai luokan). Avainasemassa on ymmärtää, miten alkuperäistä funktiota manipuloidaan ja miten haluttu käyttäytyminen lisätään.

Perusesimerkki koristelijasta (funktiokoristelija)

Aloitetaan yksinkertaisella esimerkillä funktion koristelusta sen suoritusajan kirjaamiseksi:

            function timingDecorator(func) {
  return function(...args) {
    const start = performance.now();
    const result = func.apply(this, args);
    const end = performance.now();
    console.log(`Function ${func.name} took ${end - start}ms`);
    return result;
  };
}

function myExpensiveFunction(n) {
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += i;
  }
  return result;
}

const decoratedFunction = timingDecorator(myExpensiveFunction);

console.log(decoratedFunction(100000));

            

              
                Copy
              
            
          

Tässä esimerkissä timingDecorator on koristelijafunktio. Se ottaa myExpensiveFunction syötteenä ja palauttaa uuden funktion, joka kietoo alkuperäisen funktion. Tämä uusi funktio mittaa suoritusajan ja kirjaa sen konsoliin.

Luokkakoristelijat (ES-koristelijaehdotus)

ECMAScript Decorators -ehdotus (tällä hetkellä vaiheessa 3) esittelee elegantimman syntaksin luokkien ja luokkien jäsenten koristeluun. Vaikka se ei ole vielä täysin standardoitu kaikissa JavaScript-ympäristöissä, se on saamassa suosiota ja sitä tukevat työkalut kuten Babel ja TypeScript.

Tässä on esimerkki luokkakoristelijasta:

            // Vaatii transpilointia, kuten Babelia, koristelijalaajennuksella

function LogClass(constructor) {
  return class extends constructor {
    constructor(...args) {
      super(...args);
      console.log(`Creating a new instance of ${constructor.name}`);
    }
  };
}

@LogClass
class MyClass {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

const instance = new MyClass("Alice");
instance.greet();

            

              
                Copy
              
            
          

Tässä tapauksessa @LogClass on koristelija, joka sovellettuna MyClass-luokkaan parantaa sen konstruktoria kirjaamaan viestin aina, kun luokasta luodaan uusi esiintymä.

Metodikoristelijat (ES-koristelijaehdotus)

Voit myös koristella yksittäisiä metodeja luokassa:

            // Vaatii transpilointia, kuten Babelia, koristelijalaajennuksella

function LogMethod(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args) {
    console.log(`Calling method ${propertyKey} with arguments: ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };
  return descriptor;
}

class MyClass {
  constructor(name) {
    this.name = name;
  }

  @LogMethod
  add(a, b) {
    return a + b;
  }
}

const instance = new MyClass("Bob");
instance.add(5, 3);

            

              
                Copy
              
            
          

Tässä @LogMethod koristelee add-metodin, kirjaa metodille välitetyt argumentit ja sen palauttaman arvon.

Yleiset moduulien koristelukuviot

Moduulien koristelijoita voidaan käyttää erilaisten suunnittelukuvioiden toteuttamiseen ja useiden huolenaiheiden (cross-cutting concerns) lisäämiseen moduuleihin. Tässä muutamia yleisiä esimerkkejä:

1. Kirjauskoristelija

Kuten edellisissä esimerkeissä näytettiin, kirjauskoristelijat lisäävät kirjaustoiminnallisuuden moduuleihin, antaen tietoa niiden käyttäytymisestä ja suorituskyvystä. Tämä on erittäin hyödyllistä sovellusten virheenkorjauksessa ja valvonnassa.

Esimerkki: Kirjauskoristelija voisi kirjata funktioiden kutsut, argumentit, palautusarvot ja suoritusajat keskitettyyn kirjauspalveluun. Tämä on erityisen arvokasta hajautetuissa järjestelmissä tai mikropalveluarkkitehtuureissa, joissa pyyntöjen jäljittäminen useiden palveluiden välillä on kriittistä.

2. Välimuistikoristelija

Välimuistikoristelijat tallentavat välimuistiin kalliiden funktioiden kutsutulokset, parantaen suorituskykyä vähentämällä tarvetta laskea samoja arvoja toistuvasti.

            function cacheDecorator(func) {
  const cache = new Map();

  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log("Fetching from cache");
      return cache.get(key);
    }

    const result = func.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

function expensiveCalculation(n) {
  console.log("Performing expensive calculation");
  // Simuloi aikaa vievää operaatiota
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

const cachedCalculation = cacheDecorator(expensiveCalculation);

console.log(cachedCalculation(1000));
console.log(cachedCalculation(1000)); // Fetch from cache

            

              
                Copy
              
            
          

Kansainvälistämisesimerkki: Harkitse sovellusta, jonka on näytettävä valuuttakurssit. Välimuistikoristelija voi tallentaa välimuistiin API-kutsujen tulokset valuutanmuunnospalveluun, vähentäen tehtyjen kutsujen määrää ja parantaen käyttäjäkokemusta, erityisesti käyttäjille, joilla on hitaammat internetyhteydet tai jotka ovat alueilla, joilla on korkea viive.

3. Tunnistuskoristelija

Tunnistuskoristelijat rajoittavat pääsyä tiettyihin moduuleihin tai funktioihin käyttäjän tunnistustilan perusteella. Tämä auttaa turvaamaan sovelluksesi ja estämään luvattoman pääsyn.

            function authenticationDecorator(func) {
  return function(...args) {
    if (isAuthenticated()) { // Korvaa omalla tunnistuslogiikallasi
      return func.apply(this, args);
    } else {
      console.log("Authentication required");
      return null; // Tai heitä virhe
    }
  };
}

function isAuthenticated() {
  // Korvaa todellisella tunnistustarkistuksellasi
  return true; // Demostration tarkoituksiin
}

function sensitiveOperation() {
  console.log("Performing sensitive operation");
}

const authenticatedOperation = authenticationDecorator(sensitiveOperation);

authenticatedOperation();

            

              
                Copy
              
            
          

Globaali konteksti: Globaalissa verkkokauppa-alustassa tunnistuskoristelijaa voidaan käyttää tilausten hallintatoimintojen pääsyn rajoittamiseen vain valtuutetuille työntekijöille. isAuthenticated()-funktion on tarkistettava käyttäjän roolit ja oikeudet alustan tietoturvamallin perusteella, joka voi vaihdella alueellisten säännösten mukaan.

4. Validointikoristelija

Validointikoristelijat validoivat funktion syöteparametrit ennen suoritusta, varmistaen datan eheyden ja estäen virheet.

            function validationDecorator(validator) {
  return function(func) {
    return function(...args) {
      const validationResult = validator(args);
      if (validationResult.isValid) {
        return func.apply(this, args);
      } else {
        console.error("Validation failed:", validationResult.errorMessage);
        throw new Error(validationResult.errorMessage);
      }
    };
  };
}

function createUserValidator(args) {
  const [username, email] = args;
  if (!username) {
    return { isValid: false, errorMessage: "Username is required" };
  }
  if (!email.includes("@")) {
    return { isValid: false, errorMessage: "Invalid email format" };
  }
  return { isValid: true };
}

function createUser(username, email) {
  console.log(`Creating user with username: ${username} and email: ${email}`);
}

const validatedCreateUser = validationDecorator(createUserValidator)(createUser);

validatedCreateUser("john.doe", "john.doe@example.com");
validatedCreateUser("jane", "invalid-email");

            

              
                Copy
              
            
          

Lokalisointi ja validointi: Validointikoristelijaa voidaan käyttää globaalissa osoitelomakkeessa postinumeroiden validoimiseen käyttäjän maan perusteella. validator-funktion on käytettävä maakohtaisia validointisääntöjä, jotka voidaan mahdollisesti hakea ulkoisesta API:sta tai konfiguraatiotiedostosta. Tämä varmistaa, että osoitetiedot ovat yhdenmukaisia kunkin alueen postitusvaatimusten kanssa.

5. Uudelleenyrityskoristelija

Uudelleenyrityskoristelijat yrittävät uudelleen funktiota, jos se epäonnistuu, parantaen sovelluksesi joustavuutta erityisesti käsiteltäessä epäluotettavia palveluita tai verkkoyhteyksiä.

            function retryDecorator(maxRetries) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Attempt ${retries + 1} failed:`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, 1000)); // Odota 1 sekunti ennen uudelleenyritystä
        }
      }
      throw new Error(`Function failed after ${maxRetries} retries`);
    };
  };
}

async function fetchData() {
  // Simuloi funktiota, joka voi epäonnistua
  if (Math.random() < 0.5) {
    throw new Error("Failed to fetch data");
  }
  return "Data fetched successfully!";
}

const retryFetchData = retryDecorator(3)(fetchData);

retryFetchData()
  .then(data => console.log(data))
  .catch(error => console.error("Final error:", error));

            

              
                Copy
              
            
          

Verkon joustavuus: Alueilla, joilla on epävakaat internetyhteydet, uudelleenyrityskoristelija voi olla korvaamaton varmistettaessa, että kriittiset toiminnot, kuten tilausten lähettäminen tai tietojen tallentaminen, onnistuvat lopulta. Uudelleenyritysten määrä ja uudelleenyritysten välinen viive tulisi olla konfiguroitavissa tietyn ympäristön ja toiminnon herkkyyden perusteella.

Edistyneet tekniikat

Koristelijoiden yhdistäminen

Koristelijat voidaan yhdistää useiden parannusten soveltamiseksi yhteen moduuliin. Tämä mahdollistaa monimutkaisen ja erittäin räätälöidyn käyttäytymisen luomisen ilman alkuperäisen moduulin koodin muuttamista.

            // Vaatii transpilointia (Babel/Typescript)
function ReadOnly(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor;
}

function Trace(target, name, descriptor) {
    const original = descriptor.value;
    descriptor.value = function (...args) {
        console.log(`TRACE: Calling ${name} with arguments: ${args}`);
        const result = original.apply(this, args);
        console.log(`TRACE: ${name} returned: ${result}`);
        return result;
    };
    return descriptor;
}

class Calculator {
    constructor(value) {
        this.value = value;
    }

    @Trace
    add(amount) {
        this.value += amount;
        return this.value;
    }

    @ReadOnly
    @Trace
    getValue() {
        return this.value;
    }
}

const calc = new Calculator(10);
calc.add(5); // Tuloste sisältää TRACE-viestejä
console.log(calc.getValue()); // Tuloste sisältää TRACE-viestejä

try{
    calc.getValue = function(){ return "hacked!"; }
} catch(e){
    console.log("Cannot overwrite ReadOnly property");
}

            

              
                Copy
              
            
          

Koristelmatehtaat

Koristelmatehdas on funktio, joka palauttaa koristelijan. Tämä mahdollistaa koristelijoidesi parametroinnin ja niiden käyttäytymisen konfiguroinnin tiettyjen vaatimusten perusteella.

            function retryDecoratorFactory(maxRetries, delay) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Attempt ${retries + 1} failed:`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, delay));
        }
      }
      throw new Error(`Function failed after ${maxRetries} retries`);
    };
  };
}

// Käytä tehdasta luodaksesi uudelleenyrityskoristelijan tietyillä parametreilla
const retryFetchData = retryDecoratorFactory(5, 2000)(fetchData);

            

              
                Copy
              
            
          

Huomioitavaa ja parhaat käytännöt

• Ymmärrä ES Decorators -ehdotus: Jos käytät ES Decorators -ehdotusta, tutustu sen syntaksiin ja semantiikkaan. Ole tietoinen siitä, että se on edelleen ehdotus ja voi muuttua tulevaisuudessa.
• Käytä transpilointityökaluja: Jos käytät ES Decorators -ehdotusta, tarvitset transpilointityökalun, kuten Babelin tai TypeScriptin, koodisi muuntamiseksi selaimen yhteensopivaan muotoon.
• Vältä ylikäyttöä: Vaikka koristelijat ovat tehokkaita, vältä niiden ylikäyttöä. Liian monet koristelijat voivat tehdä koodistasi vaikeasti ymmärrettävää ja virheenkorjattavaa.
• Pidä koristelijat kohdennettuina: Jokaisella koristelijalla tulisi olla yksi, selkeästi määritelty tarkoitus. Tämä tekee niistä helpompia ymmärtää ja uudelleenkäyttää.
• Testaa koristelijasi: Testaa koristelijasi perusteellisesti varmistaaksesi, että ne toimivat odotetusti eivätkä aiheuta virheitä.
• Dokumentoi koristelijasi: Dokumentoi koristelijasi selkeästi, selittäen niiden tarkoitus, käyttö ja mahdolliset sivuvaikutukset.
• Harkitse suorituskykyä: Koristelijat voivat lisätä koodiisi ylikuormitusta. Ole tietoinen suorituskykyvaikutuksista, erityisesti usein kutsuttujen funktioiden koristelussa. Käytä välimuistitekniikoita tarvittaessa.

Todellisen maailman esimerkit

Moduulien koristelijoita voidaan soveltaa monenlaisissa todellisen maailman skenaarioissa, mukaan lukien:

• Kehykset ja kirjastot: Monet modernit JavaScript-kehykset ja kirjastot käyttävät koristelijoita laajasti tarjotakseen ominaisuuksia, kuten riippuvuuksien injektointi, reititys ja tilanhallinta. Angular, esimerkiksi, luottaa vahvasti koristelijoihin.
• API-asiakkaat: Koristelijoiden avulla voidaan lisätä kirjaus-, välimuisti- ja tunnistustoimintoja API-asiakasfunktioihin.
• Datan validointi: Koristelijoiden avulla voidaan validoida data ennen sen tallentamista tietokantaan tai lähettämistä API:lle.
• Tapahtumien käsittely: Koristelijoiden avulla voidaan yksinkertaistaa tapahtumien käsittelylogiikkaa.

Yhteenveto

JavaScript-moduulien koristelukuviot tarjoavat tehokkaan ja joustavan tavan parantaa koodisi käyttäytymistä, edistäen uudelleenkäyttöä, ylläpidettävyyttä ja testattavuutta. Ymmärtämällä keskeiset käsitteet ja tämän artikkelin kuvaamien kuvioiden soveltamisella voit kirjoittaa puhtaampia, vankempia ja skaalautuvampia JavaScript-sovelluksia. Kun ES Decorators -ehdotus saa laajempaa käyttöä, tämä tekniikka yleistyy entisestään modernissa JavaScript-kehityksessä. Tutki, kokeile ja sisällytä nämä kuviot projekteihisi viedäksesi koodisi uudelle tasolle. Älä pelkää luoda omia mukautettuja koristelijoita, jotka on räätälöity projektisi erityistarpeisiin.