JavaScript'i moodulite dekoraatorimustrid: käitumise täiustamine

Pidevalt arenevas JavaScripti arendusmaailmas on puhta, hooldatava ja taaskasutatava koodi kirjutamine ülimalt oluline. Moodulite dekoraatorimustrid pakuvad võimsat tehnikat JavaScripti moodulite käitumise täiustamiseks ilma nende tuumloogikat muutmata. See lähenemine edendab huvide lahusust, muutes teie koodi paindlikumaks, testitavamaks ja lihtsamini mõistetavaks.

Mis on moodulite dekoraatorid?

Mooduli dekoraator on funktsioon, mis võtab sisendiks mooduli (tavaliselt funktsiooni või klassi) ja tagastab selle mooduli muudetud versiooni. Dekoraator lisab või muudab algse mooduli käitumist ilma selle lähtekoodi otse muutmata. See järgib avatud/suletud printsiipi, mis ütleb, et tarkvaraüksused (klassid, moodulid, funktsioonid jne) peaksid olema avatud laiendamiseks, kuid suletud muutmiseks.

Mõelge sellest kui pitsale lisakatete lisamisest. Põhipitsa (algne moodul) jääb samaks, kuid olete seda täiustanud täiendavate maitsete ja funktsioonidega (dekoraatori lisandused).

Moodulite dekoraatorite kasutamise eelised

• Parem koodi taaskasutatavus: Dekoraatoreid saab rakendada mitmele moodulile, võimaldades teil käitumise täiustusi oma koodibaasis taaskasutada.
• Parem hooldatavus: Huvide lahususe abil muudavad dekoraatorid üksikute moodulite ja nende täiustuste mõistmise, muutmise ja testimise lihtsamaks.
• Suurem paindlikkus: Dekoraatorid pakuvad paindlikku viisi funktsionaalsuse lisamiseks või muutmiseks ilma algse mooduli koodi muutmata.
• Avatud/suletud printsiibi järgimine: Dekoraatorid võimaldavad teil laiendada moodulite funktsionaalsust ilma nende lähtekoodi otse muutmata, edendades hooldatavust ja vähendades vigade tekkimise riski.
• Parem testitavus: Dekoreeritud mooduleid saab hõlpsasti testida, kasutades dekoraatorifunktsioonide mock'imist või stub'imist.

Põhimõisted ja rakendamine

Oma olemuselt on mooduli dekoraator kõrgemat järku funktsioon. See võtab argumendiks funktsiooni (või klassi) ja tagastab uue, muudetud funktsiooni (või klassi). Võti peitub selles, kuidas manipuleerida algse funktsiooniga ja lisada soovitud käitumine.

Põhiline dekoraatori näide (funktsiooni dekoraator)

Alustame lihtsa näitega funktsiooni dekoreerimisest selle täitmisaja logimiseks:

            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
              
            
          

Selles näites on timingDecorator dekoraatorifunktsioon. See võtab sisendiks myExpensiveFunction ja tagastab uue funktsiooni, mis mähitseb algse funktsiooni. See uus funktsioon mõõdab täitmisaega ja logib selle konsooli.

Klassidekoraatorid (ES dekoraatorite ettepanek)

ECMAScripti dekoraatorite ettepanek (praegu 3. etapis) toob sisse elegantsema süntaksi klasside ja klassiliikmete dekoreerimiseks. Kuigi see pole veel kõigis JavaScripti keskkondades täielikult standardiseeritud, kogub see populaarsust ja seda toetavad tööriistad nagu Babel ja TypeScript.

Siin on näide klassidekoraatorist:

            // Nõuab transpilaatorit nagu Babel koos dekoraatorite pistikprogrammiga

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
              
            
          

Sel juhul on @LogClass dekoraator, mis MyClass-ile rakendatuna täiustab selle konstruktorit, et logida teade iga kord, kui luuakse klassi uus eksemplar.

Meetodidekoraatorid (ES dekoraatorite ettepanek)

Saate kaunistada ka üksikuid meetodeid klassi sees:

            // Nõuab transpilaatorit nagu Babel koos dekoraatorite pistikprogrammiga

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
              
            
          

Siin dekoreerib @LogMethod meetodit add, logides meetodile edastatud argumendid ja selle tagastatud väärtuse.

Levinud moodulite dekoraatorimustrid

Moodulite dekoraatoreid saab kasutada mitmesuguste disainimustrite rakendamiseks ja moodulitele läbivate probleemide lisamiseks. Siin on mõned levinud näited:

1. Logimisdekoraator

Nagu eelmistes näidetes näidatud, lisavad logimisdekoraatorid moodulitele logimisfunktsionaalsuse, pakkudes ülevaadet nende käitumisest ja jõudlusest. See on äärmiselt kasulik rakenduste silumisel ja jälgimisel.

Näide: Logimisdekoraator võiks logida funktsioonikutseid, argumente, tagastusväärtusi ja täitmisaegu tsentraalsesse logimisteenusesse. See on eriti väärtuslik hajutatud süsteemides või mikroteenuste arhitektuurides, kus päringute jälgimine mitme teenuse vahel on ülioluline.

2. Vahemälu dekoraator

Vahemälu dekoraatorid salvestavad kulukate funktsioonikutsete tulemused vahemällu, parandades jõudlust, vähendades vajadust samu väärtusi korduvalt uuesti arvutada.

            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");
  // Simulate a time-consuming operation
  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)); // Fetches from cache

            

              
                Copy
              
            
          

Rahvusvahelistamise näide: Kujutage ette rakendust, mis peab kuvama valuutakursse. Vahemälu dekoraator saab salvestada valuutavahetusteenuse API-kutsete tulemused, vähendades tehtud päringute arvu ja parandades kasutajakogemust, eriti aeglasema internetiühendusega kasutajate või suure latentsusega piirkondades olevate kasutajate jaoks.

3. Autentimisdekoraator

Autentimisdekoraatorid piiravad juurdepääsu teatud moodulitele või funktsioonidele kasutaja autentimisstaatuse alusel. See aitab teie rakendust turvata ja vältida volitamata juurdepääsu.

            function authenticationDecorator(func) {
  return function(...args) {
    if (isAuthenticated()) { // Replace with your authentication logic
      return func.apply(this, args);
    } else {
      console.log("Authentication required");
      return null; // Or throw an error
    }
  };
}

function isAuthenticated() {
  // Replace with your actual authentication check
  return true; // For demonstration purposes
}

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

const authenticatedOperation = authenticationDecorator(sensitiveOperation);

authenticatedOperation();

            

              
                Copy
              
            
          

Globaalne kontekst: Globaalses e-kaubanduse platvormis saaks autentimisdekoraatorit kasutada tellimuste haldamise funktsioonidele juurdepääsu piiramiseks ainult volitatud töötajatele. Funktsioon isAuthenticated() peaks kontrollima kasutaja rolle ja õigusi platvormi turvamudeli alusel, mis võib varieeruda sõltuvalt piirkondlikest regulatsioonidest.

4. Valideerimisdekoraator

Valideerimisdekoraatorid valideerivad funktsiooni sisendparameetreid enne selle täitmist, tagades andmete terviklikkuse ja vältides vigu.

            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
              
            
          

Lokaliseerimine ja valideerimine: Valideerimisdekoraatorit saaks kasutada globaalses aadressivormis sihtnumbrite valideerimiseks kasutaja riigi alusel. Funktsioon validator peaks kasutama riigipõhiseid valideerimisreegleid, mis on potentsiaalselt hangitud välisest API-st või konfiguratsioonifailist. See tagab, et aadressiandmed on kooskõlas iga piirkonna postinõuetega.

5. Uuesti proovimise dekoraator

Uuesti proovimise dekoraatorid proovivad funktsioonikutset automaatselt uuesti, kui see ebaõnnestub, parandades teie rakenduse vastupidavust, eriti ebausaldusväärsete teenuste või võrguühendustega tegelemisel.

            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)); // Wait 1 second before retrying
        }
      }
      throw new Error(`Function failed after ${maxRetries} retries`);
    };
  };
}

async function fetchData() {
  // Simulate a function that might fail
  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
              
            
          

Võrgu vastupidavus: Ebastabiilse internetiühendusega piirkondades võib uuesti proovimise dekoraator olla hindamatu, tagades, et kriitilised toimingud, nagu tellimuste esitamine või andmete salvestamine, lõpuks õnnestuvad. Uuesti proovimiste arv ja nende vaheline viivitus peaksid olema konfigureeritavad vastavalt konkreetsele keskkonnale ja toimingu tundlikkusele.

Täiustatud tehnikad

Dekoraatorite kombineerimine

Dekoraatoreid saab kombineerida, et rakendada ühele moodulile mitmeid täiustusi. See võimaldab teil luua keerulist ja väga kohandatud käitumist ilma algse mooduli koodi muutmata.

            //Nõuab transpileerimist (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); // Output will include TRACE messages
console.log(calc.getValue()); // Output will include TRACE messages

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

            

              
                Copy
              
            
          

Dekoraatoritehased

Dekoraatoritehas on funktsioon, mis tagastab dekoraatori. See võimaldab teil oma dekoraatoreid parameetritega varustada ja nende käitumist vastavalt konkreetsetele nõuetele konfigureerida.

            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`);
    };
  };
}

// Use the factory to create a retry decorator with specific parameters
const retryFetchData = retryDecoratorFactory(5, 2000)(fetchData);

            

              
                Copy
              
            
          

Kaalutlused ja parimad praktikad

• Mõistke ES dekoraatorite ettepanekut: Kui kasutate ES dekoraatorite ettepanekut, tutvuge süntaksi ja semantikaga. Olge teadlik, et see on endiselt ettepanek ja võib tulevikus muutuda.
• Kasutage transpilaatoreid: Kui kasutate ES dekoraatorite ettepanekut, vajate koodi brauseriga ühilduvasse vormingusse teisendamiseks transpilaatorit nagu Babel või TypeScript.
• Vältige liigset kasutamist: Kuigi dekoraatorid on võimsad, vältige nende liigset kasutamist. Liiga palju dekoraatoreid võib muuta teie koodi raskesti mõistetavaks ja silutavaks.
• Hoidke dekoraatorid fookuses: Igal dekoraatoril peaks olema üks, hästi määratletud eesmärk. See muudab nende mõistmise ja taaskasutamise lihtsamaks.
• Testige oma dekoraatoreid: Testige oma dekoraatoreid põhjalikult, et tagada nende ootuspärane toimimine ja vigade puudumine.
• Dokumenteerige oma dekoraatorid: Dokumenteerige oma dekoraatorid selgelt, selgitades nende eesmärki, kasutust ja võimalikke kõrvalmõjusid.
• Kaaluge jõudlust: Dekoraatorid võivad teie koodile lisada üldkulusid. Olge teadlik jõudluse mõjudest, eriti sageli kutsutavate funktsioonide dekoreerimisel. Kasutage vajadusel vahemälutehnikaid.

Reaalse maailma näited

Moodulite dekoraatoreid saab rakendada mitmesugustes reaalsetes stsenaariumides, sealhulgas:

• Raamistikud ja teegid: Paljud kaasaegsed JavaScripti raamistikud ja teegid kasutavad dekoraatoreid laialdaselt selliste funktsioonide pakkumiseks nagu sõltuvuste süstimine, marsruutimine ja olekuhaldus. Näiteks Angular tugineb tugevalt dekoraatoritele.
• API kliendid: Dekoraatoreid saab kasutada logimise, vahemälu ja autentimise lisamiseks API kliendifunktsioonidele.
• Andmete valideerimine: Dekoraatoreid saab kasutada andmete valideerimiseks enne nende andmebaasi salvestamist või API-le saatmist.
• Sündmuste käsitlemine: Dekoraatoreid saab kasutada sündmuste käsitlemise loogika lihtsustamiseks.

Kokkuvõte

JavaScripti moodulite dekoraatorimustrid pakuvad võimsat ja paindlikku viisi teie koodi käitumise täiustamiseks, edendades taaskasutatavust, hooldatavust ja testitavust. Mõistes põhimõisteid ja rakendades selles artiklis käsitletud mustreid, saate kirjutada puhtamaid, robustsemaid ja skaleeritavamaid JavaScripti rakendusi. Kuna ES dekoraatorite ettepanek saab laiemalt omaks võetud, muutub see tehnika kaasaegses JavaScripti arenduses veelgi levinumaks. Uurige, katsetage ja lisage need mustrid oma projektidesse, et viia oma kood järgmisele tasemele. Ärge kartke luua oma kohandatud dekoraatoreid, mis on kohandatud teie projektide spetsiifilistele vajadustele.