JavaScript Decorators: Slipp løs kraften i metadata-programmering

JavaScript decorators, introdusert som en standardfunksjon i ES2022, gir en kraftig og elegant måte å legge til metadata og endre oppførselen til klasser, metoder, egenskaper og parametere. De tilbyr en deklarativ syntaks for å anvende tverrgående anliggender, noe som fører til mer vedlikeholdbar, gjenbrukbar og uttrykksfull kode. Dette blogginnlegget vil dykke ned i verdenen av JavaScript decorators, utforske deres kjernekonsepter, praktiske anvendelser og de underliggende mekanismene som får dem til å fungere.

Hva er JavaScript Decorators?

I bunn og grunn er decorators funksjoner som modifiserer eller forbedrer det dekorerte elementet. De bruker @-symbolet etterfulgt av decorator-funksjonens navn. Tenk på dem som annotasjoner eller modifikatorer som legger til metadata eller endrer den underliggende oppførselen uten å endre kjernelogikken til den dekorerte enheten direkte. De pakker effektivt inn det dekorerte elementet og injiserer tilpasset funksjonalitet.

For eksempel kan en decorator automatisk logge metodekall, validere inndataparametere eller administrere tilgangskontroll. Decorators fremmer separasjon av ansvarsområder (separation of concerns), og holder kjernelogikken ren og fokusert samtidig som du kan legge til ekstra atferd på en modulær måte.

Syntaksen for Decorators

Decorators brukes ved å sette @-symbolet foran elementet de dekorerer. Det finnes forskjellige typer decorators, hver rettet mot et spesifikt element:

• Klassedecorators: Anvendes på klasser.
• Metodedecorators: Anvendes på metoder.
• Egenskapsdecorators: Anvendes på egenskaper.
• Accessor Decorators: Anvendes på getter- og setter-metoder.
• Parameterdecorators: Anvendes på metodeparametere.

Her er et grunnleggende eksempel på en klassedecorator:

            @logClass
class MyClass {
  constructor() {
    // ...
  }
}

function logClass(target) {
  console.log(`Klasse ${target.name} er opprettet.`);
}

            

              
                Copy
              
            
          

I dette eksempelet er logClass en decorator-funksjon som tar klassekonstruktøren (target) som argument. Den logger deretter en melding til konsollen hver gang en instans av MyClass opprettes.

Forståelse av metadata-programmering

Decorators er nært knyttet til konseptet metadata-programmering. Metadata er "data om data". I programmeringssammenheng beskriver metadata egenskapene og karakteristikkene til kodeelementer, som klasser, metoder og egenskaper. Decorators lar deg assosiere metadata med disse elementene, noe som muliggjør runtime-introspeksjon og modifisering av atferd basert på disse metadataene.

Reflect Metadata API-et (en del av ECMAScript-spesifikasjonen) gir en standardisert måte å definere og hente metadata assosiert med objekter og deres egenskaper. Selv om det ikke er strengt nødvendig for alle bruksområder av decorators, er det et kraftig verktøy for avanserte scenarioer der du trenger å dynamisk få tilgang til og manipulere metadata under kjøring.

For eksempel kan du bruke Reflect Metadata til å lagre informasjon om datatypen til en egenskap, valideringsregler eller autorisasjonskrav. Disse metadataene kan deretter brukes av decorators for å utføre handlinger som å validere input, serialisere data eller håndheve sikkerhetspolicyer.

Typer av Decorators med eksempler

1. Klassedecorators

Klassedecorators anvendes på klassekonstruktøren. De kan brukes til å modifisere klassedefinisjonen, legge til nye egenskaper eller metoder, eller til og med erstatte hele klassen med en annen.

Eksempel: Implementering av et Singleton-mønster

Singleton-mønsteret sikrer at kun én instans av en klasse noensinne blir opprettet. Her er hvordan du kan implementere det ved hjelp av en klassedecorator:

            function Singleton(target) {
  let instance = null;

  return function (...args) {
    if (!instance) {
      instance = new target(...args);
    }
    return instance;
  };
}

@Singleton
class DatabaseConnection {
  constructor(connectionString) {
    this.connectionString = connectionString;
    console.log(`Kobler til ${connectionString}`);
  }

  query(sql) {
    console.log(`Utfører spørring: ${sql}`);
  }
}

const db1 = new DatabaseConnection('mongodb://localhost:27017');
const db2 = new DatabaseConnection('mongodb://localhost:27017');

console.log(db1 === db2); // Output: true

            

              
                Copy
              
            
          

I dette eksempelet pakker Singleton-decoratoren inn DatabaseConnection-klassen. Den sikrer at kun én instans av klassen noensinne blir opprettet, uavhengig av hvor mange ganger konstruktøren kalles.

2. Metodedecorators

Metodedecorators anvendes på metoder i en klasse. De kan brukes til å modifisere metodens atferd, legge til logging, implementere caching eller håndheve tilgangskontroll.

Eksempel: Logging av metodekallDenne decoratoren logger navnet på metoden og dens argumenter hver gang metoden kalles.

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

  descriptor.value = function (...args) {
    console.log(`Kaller metode: ${propertyKey} med argumenter: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Metode ${propertyKey} returnerte: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logMethod
  add(x, y) {
    return x + y;
  }

  @logMethod
  subtract(x, y) {
    return x - y;
  }
}

const calc = new Calculator();
calc.add(5, 3); // Logger: Kaller metode: add med argumenter: [5,3]
                //       Metode add returnerte: 8
calc.subtract(10, 4); // Logger: Kaller metode: subtract med argumenter: [10,4]
                  //       Metode subtract returnerte: 6

            

              
                Copy
              
            
          

Her pakker logMethod-decoratoren inn den opprinnelige metoden. Før den utfører den opprinnelige metoden, logger den metodenavnet og dens argumenter. Etter utførelse logger den returverdien.

3. Egenskapsdecorators

Egenskapsdecorators anvendes på egenskaper i en klasse. De kan brukes til å modifisere egenskapens atferd, implementere validering eller legge til metadata.

Eksempel: Validering av egenskapsverdier

            function validate(target, propertyKey) {
  let value;

  const getter = function () {
    return value;
  };

  const setter = function (newValue) {
    if (typeof newValue !== 'string' || newValue.length < 3) {
      throw new Error(`Egenskapen ${propertyKey} må være en streng med minst 3 tegn.`);
    }
    value = newValue;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class User {
  @validate
  name;
}

const user = new User();

try {
  user.name = 'Jo'; // Kaster en feil
} catch (error) {
  console.error(error.message);
}

user.name = 'John Doe'; // Fungerer fint
console.log(user.name);

            

              
                Copy
              
            
          

I dette eksempelet fanger validate-decoratoren opp tilgang til name-egenskapen. Når en ny verdi tildeles, sjekker den om verdien er en streng og om lengden er minst 3 tegn. Hvis ikke, kaster den en feil.

4. Aksessordekoratorer

Aksessordekoratorer anvendes på getter- og setter-metoder. De ligner på metodedecorators, men er spesifikt rettet mot aksessorer (gettere og settere).

Eksempel: Caching av getter-resultater

            function cached(target, propertyKey, descriptor) {
  const originalGetter = descriptor.get;
  let cacheValue;
  let cacheSet = false;

  descriptor.get = function () {
    if (cacheSet) {
      console.log(`Returnerer bufret verdi for ${propertyKey}`);
      return cacheValue;
    } else {
      console.log(`Beregner og bufrer verdi for ${propertyKey}`);
      cacheValue = originalGetter.call(this);
      cacheSet = true;
      return cacheValue;
    }
  };
  return descriptor;
}

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  @cached
  get area() {
    console.log('Beregner areal...');
    return Math.PI * this.radius * this.radius;
  }
}

const circle = new Circle(5);
console.log(circle.area); // Beregner og bufrer arealet
console.log(circle.area); // Returnerer det bufrede arealet

            

              
                Copy
              
            
          

cached-decoratoren pakker inn getteren for area-egenskapen. Første gang area aksesseres, utføres getteren, og resultatet bufres. Påfølgende aksesseringer returnerer den bufrede verdien uten å beregne på nytt.

5. Parameterdecorators

Parameterdecorators anvendes på metodeparametere. De kan brukes til å legge til metadata om parameterne, validere input eller modifisere parameterverdiene.

Eksempel: Validering av e-postparameter

            const requiredMetadataKey = Symbol("required");

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
    existingRequiredParameters.push(parameterIndex);
    Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey);
}

function validateEmail(email: string) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor) {
  let method = descriptor.value!;

  descriptor.value = function () {
    let requiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyName);
    if (requiredParameters) {
      for (let parameterIndex of requiredParameters) {
          if(arguments.length <= parameterIndex){
             throw new Error("Mangler påkrevd argument.");
          }

          const email = arguments[parameterIndex];
          if (!validateEmail(email)) {
              throw new Error(`Ugyldig e-postformat for argument #${parameterIndex + 1}.`);
          }
      }
    }

    return method.apply(this, arguments);
  }
}

class EmailService {
  @validate
  sendEmail(@required to: string, subject: string, body: string) {
    console.log(`Sender e-post til ${to} med emne: ${subject}`);
  }
}

const emailService = new EmailService();

try {
  emailService.sendEmail('invalid-email', 'Hallo', 'Dette er en test-e-post.'); // Kaster en feil
} catch (error) {
  console.error(error.message);
}

emailService.sendEmail('valid@email.com', 'Hallo', 'Dette er en test-e-post.'); // Fungerer fint

            

              
                Copy
              
            
          

I dette eksempelet markerer @required-decoratoren to-parameteren som påkrevd og indikerer at den må ha et gyldig e-postformat. validate-decoratoren bruker deretter Reflect Metadata for å hente denne informasjonen og validere parameteren under kjøring.

Fordeler med å bruke Decorators

• Forbedret lesbarhet og vedlikeholdbarhet av kode: Decorators gir en deklarativ syntaks som gjør koden enklere å forstå og vedlikeholde.
• Forbedret gjenbruk av kode: Decorators kan gjenbrukes på tvers av flere klasser og metoder, noe som reduserer kodeduplisering.
• Separering av ansvarsområder: Decorators fremmer separering av ansvarsområder ved å la deg legge til ekstra atferd uten å modifisere kjernelogikken.
• Økt fleksibilitet: Decorators gir en fleksibel måte å modifisere oppførselen til kodeelementer under kjøring.
• AOP (Aspektorientert programmering): Decorators muliggjør AOP-prinsipper, som lar deg modularisere tverrgående anliggender.

Bruksområder for Decorators

Decorators kan brukes i et bredt spekter av scenarioer, inkludert:

• Logging: Logging av metodekall, ytelsesmålinger eller feilmeldinger.
• Validering: Validering av inndataparametere eller egenskapsverdier.
• Caching: Caching av metode-resultater for å forbedre ytelsen.
• Autorisasjon: Håndheving av tilgangskontrollpolicyer.
• Dependency Injection: Håndtering av avhengigheter mellom objekter.
• Serialisering/Deserialisering: Konvertering av objekter til og fra forskjellige formater.
• Data Binding: Automatisk oppdatering av UI-elementer når data endres.
• Tilstandshåndtering: Implementering av tilstandshåndteringsmønstre i applikasjoner som React eller Angular.
• API-versjonering: Merking av metoder eller klasser som tilhørende en spesifikk API-versjon.
• Feature Flags: Aktivering eller deaktivering av funksjoner basert på konfigurasjonsinnstillinger.

Decorator-fabrikker

En decorator-fabrikk er en funksjon som returnerer en decorator. Dette lar deg tilpasse oppførselen til decoratoren ved å sende argumenter til fabrikkfunksjonen.

Eksempel: En parameterisert logger

            function logMethodWithPrefix(prefix: string) {
  return function (target, propertyKey, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args) {
      console.log(`${prefix}: Kaller metode: ${propertyKey} med argumenter: ${JSON.stringify(args)}`);
      const result = originalMethod.apply(this, args);
      console.log(`${prefix}: Metode ${propertyKey} returnerte: ${result}`);
      return result;
    };
    return descriptor;
  };
}

class Calculator {
  @logMethodWithPrefix('[BEREGNING]')
  add(x, y) {
    return x + y;
  }

  @logMethodWithPrefix('[BEREGNING]')
  subtract(x, y) {
    return x - y;
  }
}

const calc = new Calculator();
calc.add(5, 3); // Logger: [BEREGNING]: Kaller metode: add med argumenter: [5,3]
                //       [BEREGNING]: Metode add returnerte: 8
calc.subtract(10, 4); // Logger: [BEREGNING]: Kaller metode: subtract med argumenter: [10,4]
                  //       [BEREGNING]: Metode subtract returnerte: 6

            

              
                Copy
              
            
          

Funksjonen logMethodWithPrefix er en decorator-fabrikk. Den tar et prefix-argument og returnerer en decorator-funksjon. Decorator-funksjonen logger deretter metodekallene med det angitte prefikset.

Eksempler og casestudier fra den virkelige verden

Tenk deg en global e-handelsplattform. De kan bruke decorators for:

• Internasjonalisering (i18n): Decorators kan automatisk oversette tekst basert på brukerens locale. En @translate-decorator kan merke egenskaper eller metoder som må oversettes. Decoratoren vil da hente den riktige oversettelsen fra en ressursfil basert på brukerens valgte språk.
• Valutakonvertering: Ved visning av priser kan en @currency-decorator automatisk konvertere prisen til brukerens lokale valuta. Denne decoratoren må ha tilgang til en ekstern valutakonverterings-API og lagre konverteringsratene.
• Skatteberegning: Skatteregler varierer betydelig mellom land og regioner. Decorators kan brukes til å anvende riktig skattesats basert på brukerens plassering og produktet som kjøpes. En @tax-decorator kan bruke geolokaliseringsinformasjon for å bestemme riktig skattesats.
• Svindeldeteksjon: En @fraudCheck-decorator på sensitive operasjoner (som utsjekking) kan utløse algoritmer for svindeldeteksjon.

Et annet eksempel er et globalt logistikkselskap:

• Geolokasjonssporing: Decorators kan forbedre metoder som håndterer posisjonsdata, logge nøyaktigheten av GPS-avlesninger eller validere posisjonsformater (breddegrad/lengdegrad) for forskjellige regioner. En @validateLocation-decorator kan sikre at koordinater overholder en spesifikk standard (f.eks. ISO 6709) før behandling.
• Håndtering av tidssoner: Ved planlegging av leveranser kan decorators automatisk konvertere tider til brukerens lokale tidssone. En @timeZone-decorator vil bruke en tidssonedatabase for å utføre konverteringen, og sikre at leveringsplaner er nøyaktige uavhengig av brukerens plassering.
• Ruteoptimalisering: Decorators kan brukes til å analysere opprinnelses- og destinasjonsadresser for leveringsforespørsler. En @routeOptimize-decorator kan kalle en ekstern ruteoptimaliserings-API for å finne den mest effektive ruten, med tanke på faktorer som trafikkforhold og veistenginger i forskjellige land.

Decorators og TypeScript

TypeScript har utmerket støtte for decorators. For å bruke decorators i TypeScript, må du aktivere kompilatoralternativet experimentalDecorators i din tsconfig.json-fil:

            {
  "compilerOptions": {
    "target": "es6",
    "experimentalDecorators": true,
    // ... andre alternativer
  }
}

            

              
                Copy
              
            
          

TypeScript gir typeinformasjon for decorators, noe som gjør det enklere å skrive og vedlikeholde dem. TypeScript håndhever også typesikkerhet ved bruk av decorators, noe som hjelper deg å unngå feil under kjøring. Kodeeksemplene i dette blogginnlegget er primært skrevet i TypeScript for bedre typesikkerhet og lesbarhet.

Fremtiden for Decorators

Decorators er en relativt ny funksjon i JavaScript, men de har potensial til å ha en betydelig innvirkning på hvordan vi skriver og strukturerer kode. Etter hvert som JavaScript-økosystemet fortsetter å utvikle seg, kan vi forvente å se flere biblioteker og rammeverk som utnytter decorators for å tilby nye og innovative funksjoner. Standardiseringen av decorators i ES2022 sikrer deres langsiktige levedyktighet og utbredte adopsjon.

Utfordringer og hensyn

• Kompleksitet: Overdreven bruk av decorators kan føre til kompleks kode som er vanskelig å forstå. Det er avgjørende å bruke dem med omhu og dokumentere dem grundig.
• Ytelse: Decorators kan introdusere overhead, spesielt hvis de utfører komplekse operasjoner under kjøring. Det er viktig å vurdere ytelsesimplikasjonene ved bruk av decorators.
• Debugging: Å feilsøke kode som bruker decorators kan være utfordrende, da kjøringsflyten kan være mindre rett frem. God loggingspraksis og feilsøkingsverktøy er avgjørende.
• Læringskurve: Utviklere som ikke er kjent med decorators, kan trenge å investere tid i å lære hvordan de fungerer.

Beste praksis for bruk av Decorators

• Bruk Decorators med måte: Bruk kun decorators når de gir en klar fordel med tanke på lesbarhet, gjenbrukbarhet eller vedlikeholdbarhet av koden.
• Dokumenter dine Decorators: Dokumenter tydelig formålet og oppførselen til hver decorator.
• Hold Decorators enkle: Unngå kompleks logikk inne i decorators. Om nødvendig, deleger komplekse operasjoner til separate funksjoner.
• Test dine Decorators: Test dine decorators grundig for å sikre at de fungerer korrekt.
• Følg navnekonvensjoner: Bruk en konsekvent navnekonvensjon for decorators (f.eks. @LogMethod, @ValidateInput).
• Vurder ytelse: Vær oppmerksom på ytelsesimplikasjonene ved bruk av decorators, spesielt i ytelseskritisk kode.

Konklusjon

JavaScript decorators tilbyr en kraftig og fleksibel måte å forbedre gjenbruk av kode, øke vedlikeholdbarheten og implementere tverrgående anliggender. Ved å forstå kjernekonseptene til decorators og Reflect Metadata API-et, kan du utnytte dem til å lage mer uttrykksfulle og modulære applikasjoner. Selv om det er utfordringer å vurdere, veier fordelene ved å bruke decorators ofte opp for ulempene, spesielt i store og komplekse prosjekter. Etter hvert som JavaScript-økosystemet utvikler seg, vil decorators sannsynligvis spille en stadig viktigere rolle i å forme hvordan vi skriver og strukturerer kode. Eksperimenter med eksemplene som er gitt og utforsk hvordan decorators kan løse spesifikke problemer i dine prosjekter. Å omfavne denne kraftige funksjonen kan føre til mer elegante, vedlikeholdbare og robuste JavaScript-applikasjoner på tvers av ulike internasjonale kontekster.