JavaScript Moduldekoratormønstre: Atferdsforbedring

I det stadig utviklende landskapet av JavaScript-utvikling er det viktig å skrive ren, vedlikeholdbar og gjenbrukbar kode. Moduldekoratormønstre tilbyr en kraftig teknikk for å forbedre oppførselen til JavaScript-moduler uten å endre kjernelogikken deres. Denne tilnærmingen fremmer separasjon av bekymringer, noe som gjør koden din mer fleksibel, testbar og lettere å forstå.

Hva er moduldekoratører?

En moduldekorator er en funksjon som tar en modul (vanligvis en funksjon eller en klasse) som input og returnerer en modifisert versjon av den modulen. Dekoratøren legger til eller endrer den originale modulens oppførsel uten å endre kildekoden direkte. Dette overholder Open/Closed Principle, som sier at programvareenheter (klasser, moduler, funksjoner osv.) skal være åpne for utvidelse, men lukket for modifikasjon.

Tenk på det som å legge til ekstra topping på en pizza. Basispizzaen (den originale modulen) forblir den samme, men du har forbedret den med flere smaker og funksjoner (dekoratørens tillegg).

Fordeler med å bruke moduldekoratører

• Forbedret gjenbruk av kode: Dekoratører kan brukes på flere moduler, slik at du kan gjenbruke atferdsforbedringer på tvers av kodebasen din.
• Forbedret vedlikeholdbarhet: Ved å separere bekymringer gjør dekoratører det lettere å forstå, endre og teste individuelle moduler og deres forbedringer.
• Økt fleksibilitet: Dekoratører gir en fleksibel måte å legge til eller endre funksjonalitet uten å endre den originale modulens kode.
• Overholdelse av Open/Closed Principle: Dekoratører lar deg utvide funksjonaliteten til moduler uten å endre kildekoden direkte, noe som fremmer vedlikeholdbarhet og reduserer risikoen for å introdusere feil.
• Forbedret testbarhet: Dekorerte moduler kan enkelt testes ved å mocke eller stubbe dekoratorfunksjonene.

Kjernekonsepter og implementering

Grunnleggende dekoratoreksempel (funksjonsdekorator)

La oss starte med et enkelt eksempel på å dekorere en funksjon for å logge kjøretiden:

            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
              
            
          

I dette eksemplet er timingDecorator dekoratorfunksjonen. Den tar myExpensiveFunction som input og returnerer en ny funksjon som pakker inn den originale funksjonen. Denne nye funksjonen måler kjøretiden og logger den til konsollen.

Klassedekoratører (ES-dekoratorforslag)

ECMAScript-dekoratorforslaget (foreløpig i fase 3) introduserer en mer elegant syntaks for dekorering av klasser og klasseelementer. Selv om det ennå ikke er fullt standardisert på tvers av alle JavaScript-miljøer, får det gjennomslag og støttes av verktøy som Babel og TypeScript.

Her er et eksempel på en klassedekoratør:

            // Requires a transpiler like Babel with the decorators plugin

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
              
            
          

I dette tilfellet er @LogClass en dekorator som, når den brukes på MyClass, forbedrer konstruktøren til å logge en melding når en ny instans av klassen opprettes.

Metodedekoratører (ES-dekoratorforslag)

Du kan også dekorere individuelle metoder i en klasse:

            // Requires a transpiler like Babel with the decorators plugin

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
              
            
          

Her dekorerer @LogMethod add-metoden, logger argumentene som sendes til metoden og verdien den returnerer.

Vanlige moduldekoratormønstre

Moduldekoratører kan brukes til å implementere forskjellige designmønstre og legge til tverrgående bekymringer til modulene dine. Her er noen vanlige eksempler:

1. Loggedekoratør

Som vist i de forrige eksemplene, legger loggedekoratører til loggingsfunksjonalitet til moduler, og gir innsikt i deres oppførsel og ytelse. Dette er ekstremt nyttig for feilsøking og overvåking av applikasjoner.

Eksempel: En loggedekoratør kan logge funksjonskall, argumenter, returverdier og kjøretider til en sentral loggingstjeneste. Dette er spesielt verdifullt i distribuerte systemer eller mikroservicearkitekturer der sporing av forespørsler på tvers av flere tjenester er avgjørende.

2. Hurtigbufferdekoratør

Hurtigbufferdekoratører hurtigbufrer resultatene av dyre funksjonskall, og forbedrer ytelsen ved å redusere behovet for å beregne de samme verdiene gjentatte ganger.

            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
              
            
          

Internasjonaliseringseksempel: Tenk deg en applikasjon som trenger å vise valutakurser. En hurtigbufferdekorator kan lagre resultatene av API-kall til en valutakonverteringstjeneste, redusere antall forespørsler og forbedre brukeropplevelsen, spesielt for brukere med tregere internettforbindelser eller de i regioner med høy latens.

3. Autentiseringsdekoratør

Autentiseringsdekoratører begrenser tilgangen til visse moduler eller funksjoner basert på brukerens autentiseringstilstand. Dette bidrar til å sikre applikasjonen din og forhindre uautorisert tilgang.

            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
              
            
          

Global kontekst: I en global e-handelsplattform kan en autentiseringsdekorator brukes til å begrense tilgangen til ordrehåndteringsfunksjoner til kun autoriserte ansatte. Funksjonen isAuthenticated() må sjekke brukerens roller og tillatelser basert på plattformens sikkerhetsmodell, som kan variere avhengig av regionale forskrifter.

4. Valideringsdekoratør

Valideringsdekoratører validerer inndataparametrene til en funksjon før utførelse, og sikrer dataintegritet og forhindrer feil.

            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
              
            
          

Lokalisering og validering: En valideringsdekorator kan brukes i et globalt adresseskjema for å validere postnummer basert på brukerens land. Funksjonen validator må bruke landspesifikke valideringsregler, potensielt hentet fra et eksternt API eller en konfigurasjonsfil. Dette sikrer at adressdataene er i samsvar med postkravene i hver region.

5. Prøv igjen-dekoratør

Prøv igjen-dekoratører prøver automatisk et funksjonskall på nytt hvis det mislykkes, og forbedrer applikasjonens robusthet, spesielt når du arbeider med upålitelige tjenester eller nettverkstilkoblinger.

            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
              
            
          

Nettverksrobusthet: I regioner med ustabile internettforbindelser kan en prøv igjen-dekoratør være uvurderlig for å sikre at kritiske operasjoner, som å sende inn bestillinger eller lagre data, til slutt lykkes. Antall forsøk og forsinkelsen mellom forsøk bør kunne konfigureres basert på det spesifikke miljøet og følsomheten til operasjonen.

Avanserte teknikker

Kombinere dekoratører

Dekoratører kan kombineres for å bruke flere forbedringer på en enkelt modul. Dette lar deg lage kompleks og svært tilpasset oppførsel uten å endre den originale modulens kode.

            //Requires transpilation (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
              
            
          

Dekoratorfabrikker

En dekoratorfabrikk er en funksjon som returnerer en dekorator. Dette lar deg parametrisere dekoratørene dine og konfigurere deres oppførsel basert på spesifikke krav.

            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
              
            
          

Betraktninger og beste fremgangsmåter

• Forstå ES-dekoratorforslaget: Hvis du bruker ES-dekoratorforslaget, gjør deg kjent med syntaksen og semantikken. Vær oppmerksom på at det fortsatt er et forslag og kan endres i fremtiden.
• Bruk transpilerere: Hvis du bruker ES-dekoratorforslaget, trenger du en transpilerer som Babel eller TypeScript for å konvertere koden din til et nettleserkompatibelt format.
• Unngå overforbruk: Selv om dekoratører er kraftige, unngå å bruke dem for mye. For mange dekoratører kan gjøre koden din vanskelig å forstå og feilsøke.
• Hold dekoratørene fokuserte: Hver dekorator bør ha et enkelt, veldefinert formål. Dette gjør dem lettere å forstå og gjenbruke.
• Test dekoratørene dine: Test dekoratørene dine grundig for å sikre at de fungerer som forventet og ikke introduserer noen feil.
• Dokumenter dekoratørene dine: Dokumenter dekoratørene dine tydelig, og forklar deres formål, bruk og eventuelle bivirkninger.
• Vurder ytelse: Dekoratører kan legge til overhead til koden din. Vær oppmerksom på ytelsesimplikasjoner, spesielt når du dekorerer ofte kalte funksjoner. Bruk hurtigbufferingsteknikker der det er hensiktsmessig.

Virkelige eksempler

Moduldekoratører kan brukes i en rekke virkelige scenarier, inkludert:

• Rammeverk og biblioteker: Mange moderne JavaScript-rammeverk og biblioteker bruker dekoratører i stor grad for å tilby funksjoner som avhengighetsinjeksjon, ruting og tilstandshåndtering. Angular, for eksempel, er sterkt avhengig av dekoratører.
• API-klienter: Dekoratører kan brukes til å legge til logging, hurtigbuffering og autentisering til API-klientfunksjoner.
• Datavalidering: Dekoratører kan brukes til å validere data før de lagres i en database eller sendes til et API.
• Hendelseshåndtering: Dekoratører kan brukes til å forenkle hendelseshåndteringslogikk.

Konklusjon

JavaScript moduldekoratormønstre tilbyr en kraftig og fleksibel måte å forbedre oppførselen til koden din, og fremmer gjenbrukbarhet, vedlikeholdbarhet og testbarhet. Ved å forstå kjernekonseptene og bruke mønstrene som er diskutert i denne artikkelen, kan du skrive renere, mer robuste og mer skalerbare JavaScript-applikasjoner. Etter hvert som ES-dekoratorforslaget får bredere aksept, vil denne teknikken bli enda mer utbredt i moderne JavaScript-utvikling. Utforsk, eksperimenter og innlem disse mønstrene i prosjektene dine for å ta koden din til neste nivå. Ikke vær redd for å lage dine egne tilpassede dekoratører skreddersydd for de spesifikke behovene til prosjektene dine.