JavaScript Decorators: Frigør Kraften i Metadataprogrammering

JavaScript decorators, introduceret som en standardfunktion i ES2022, giver en kraftfuld og elegant måde at tilføje metadata og ændre adfærden for klasser, metoder, egenskaber og parametre. De tilbyder en deklarativ syntaks til at anvende tværgående anliggender, hvilket fører til mere vedligeholdelsesvenlig, genanvendelig og udtryksfuld kode. Dette blogindlæg vil dykke ned i verdenen af JavaScript decorators og udforske deres kernekoncepter, praktiske anvendelser og de underliggende mekanismer, der får dem til at virke.

Hvad er JavaScript Decorators?

I bund og grund er decorators funktioner, der modificerer eller forbedrer det dekorerede element. De bruger @-symbolet efterfulgt af decorator-funktionens navn. Tænk på dem som annotationer eller modifikatorer, der tilføjer metadata eller ændrer den underliggende adfærd uden direkte at ændre kerne-logikken i den dekorerede enhed. De omslutter effektivt det dekorerede element og injicerer brugerdefineret funktionalitet.

For eksempel kunne en decorator automatisk logge metodekald, validere inputparametre eller håndtere adgangskontrol. Decorators fremmer adskillelse af anliggender (separation of concerns), hvilket holder kerneforretningslogikken ren og fokuseret, samtidig med at du kan tilføje yderligere adfærd på en modulær måde.

Syntaksen for Decorators

Decorators anvendes ved hjælp af @-symbolet foran det element, de dekorerer. Der findes forskellige typer af decorators, som hver især er rettet mod et specifikt element:

• Klassedecorators: Anvendes på klasser.
• Metodedecorators: Anvendes på metoder.
• Egenskabsdecorators (Property Decorators): Anvendes på egenskaber.
• Accessor Decorators: Anvendes på getter- og setter-metoder.
• Parameterdecorators: Anvendes på metodeparametre.

Her er et grundlæggende eksempel på en klassedecorator:

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

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

            

              
                Copy
              
            
          

I dette eksempel er logClass en decorator-funktion, der tager klassekonstruktøren (target) som argument. Den logger derefter en besked til konsollen, hver gang en instans af MyClass oprettes.

Forståelse af Metadataprogrammering

Decorators er tæt knyttet til konceptet om metadataprogrammering. Metadata er "data om data". I programmeringssammenhæng beskriver metadata egenskaberne og karakteristikaene for kodeelementer, såsom klasser, metoder og egenskaber. Decorators giver dig mulighed for at associere metadata med disse elementer, hvilket muliggør runtime-introspektion og ændring af adfærd baseret på disse metadata.

Reflect Metadata API'en (en del af ECMAScript-specifikationen) giver en standardiseret måde at definere og hente metadata, der er associeret med objekter og deres egenskaber. Selvom det ikke er strengt nødvendigt for alle decorator-anvendelsestilfælde, er det et kraftfuldt værktøj til avancerede scenarier, hvor du har brug for dynamisk at tilgå og manipulere metadata under kørsel.

For eksempel kan du bruge Reflect Metadata til at gemme information om en egenskabs datatype, valideringsregler eller autorisationskrav. Disse metadata kan derefter bruges af decorators til at udføre handlinger som at validere input, serialisere data eller håndhæve sikkerhedspolitikker.

Typer af Decorators med Eksempler

1. Klassedecorators

Klassedecorators anvendes på klassekonstruktøren. De kan bruges til at ændre klassedefinitionen, tilføje nye egenskaber eller metoder, eller endda erstatte hele klassen med en anden.

Eksempel: Implementering af et Singleton-mønster

Singleton-mønsteret sikrer, at der kun nogensinde oprettes én instans af en klasse. Her er, hvordan du kan implementere det ved hjælp af 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(`Forbinder til ${connectionString}`);
  }

  query(sql) {
    console.log(`Udfører forespørgsel: ${sql}`);
  }
}

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

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

            

              
                Copy
              
            
          

I dette eksempel omslutter Singleton-decoratoren DatabaseConnection-klassen. Den sikrer, at der kun nogensinde oprettes én instans af klassen, uanset hvor mange gange konstruktøren kaldes.

2. Metodedecorators

Metodedecorators anvendes på metoder inden i en klasse. De kan bruges til at ændre metodens adfærd, tilføje logning, implementere caching eller håndhæve adgangskontrol.

Eksempel: Logning af Metodekald

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

  descriptor.value = function (...args) {
    console.log(`Kalder metode: ${propertyKey} med argumenter: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Metode ${propertyKey} returnerede: ${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: Kalder metode: add med argumenter: [5,3]
                //       Metode add returnerede: 8
calc.subtract(10, 4); // Logger: Kalder metode: subtract med argumenter: [10,4]
                  //       Metode subtract returnerede: 6

            

              
                Copy
              
            
          

Her omslutter logMethod-decoratoren den oprindelige metode. Før den oprindelige metode udføres, logger den metodens navn og dens argumenter. Efter udførelse logger den returværdien.

3. Egenskabsdecorators (Property Decorators)

Egenskabsdecorators anvendes på egenskaber inden i en klasse. De kan bruges til at ændre en egenskabs adfærd, implementere validering eller tilføje metadata.

Eksempel: Validering af Egenskabsværdier

            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(`Egenskaben ${propertyKey} skal være en streng med mindst 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 fejl
} catch (error) {
  console.error(error.message);
}

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

            

              
                Copy
              
            
          

I dette eksempel opsnapper validate-decoratoren adgang til name-egenskaben. Når en ny værdi tildeles, kontrollerer den, om værdien er en streng, og om dens længde er mindst 3 tegn. Hvis ikke, kaster den en fejl.

4. Accessor Decorators

Accessor decorators anvendes på getter- og setter-metoder. De ligner metodedecorators, men de er specifikt rettet mod accessors (getters og setters).

Eksempel: Caching af Getter-resultater

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

  descriptor.get = function () {
    if (cacheSet) {
      console.log(`Returnerer cachelagret værdi for ${propertyKey}`);
      return cacheValue;
    } else {
      console.log(`Beregner og cachelagrer værdi 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 cachelagrer arealet
console.log(circle.area); // Returnerer det cachelagrede areal

            

              
                Copy
              
            
          

cached-decoratoren omslutter getteren for area-egenskaben. Første gang der tilgås area, udføres getteren, og resultatet cachelagres. Efterfølgende kald returnerer den cachelagrede værdi uden genberegning.

5. Parameterdecorators

Parameterdecorators anvendes på metodeparametre. De kan bruges til at tilføje metadata om parametrene, validere input eller ændre parameterværdier.

Eksempel: Validering af E-mail-parameter

            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 = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
  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åkrævet argument.");
          }

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

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

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

const emailService = new EmailService();

try {
  emailService.sendEmail('invalid-email', 'Hello', 'This is a test email.'); // Kaster en fejl
} catch (error) {
  console.error(error.message);
}

emailService.sendEmail('valid@email.com', 'Hello', 'This is a test email.'); // Fungerer fint

            

              
                Copy
              
            
          

I dette eksempel markerer @required-decoratoren to-parameteret som påkrævet og indikerer, at det skal have et gyldigt e-mailformat. validate-decoratoren bruger derefter Reflect Metadata til at hente denne information og validere parameteret under kørsel.

Fordele ved at Bruge Decorators

• Forbedret Kodelæsbarhed og Vedligeholdelse: Decorators giver en deklarativ syntaks, der gør koden lettere at forstå og vedligeholde.
• Forbedret Genanvendelighed af Kode: Decorators kan genbruges på tværs af flere klasser og metoder, hvilket reducerer kodeduplikering.
• Adskillelse af Anliggender (Separation of Concerns): Decorators fremmer adskillelse af anliggender ved at give dig mulighed for at tilføje yderligere adfærd uden at ændre kerne-logikken.
• Øget Fleksibilitet: Decorators giver en fleksibel måde at ændre adfærden for kodeelementer under kørsel.
• AOP (Aspektorienteret Programmering): Decorators muliggør AOP-principper, hvilket giver dig mulighed for at modularisere tværgående anliggender.

Anvendelsestilfælde for Decorators

Decorators kan bruges i en bred vifte af scenarier, herunder:

• Logning: Logning af metodekald, ydeevnemålinger eller fejlmeddelelser.
• Validering: Validering af inputparametre eller egenskabsværdier.
• Caching: Caching af metoderesultater for at forbedre ydeevnen.
• Autorisation: Håndhævelse af adgangskontrolpolitikker.
• Dependency Injection: Håndtering af afhængigheder mellem objekter.
• Serialisering/Deserialisering: Konvertering af objekter til og fra forskellige formater.
• Databinding: Automatisk opdatering af UI-elementer, når data ændres.
• State Management: Implementering af state management-mønstre i applikationer som React eller Angular.
• API-versionering: Markering af metoder eller klasser som tilhørende en specifik API-version.
• Feature Flags: Aktivering eller deaktivering af funktioner baseret på konfigurationsindstillinger.

Decorator Factories

En decorator factory er en funktion, der returnerer en decorator. Dette giver dig mulighed for at tilpasse decoratorens adfærd ved at sende argumenter til factory-funktionen.

Eksempel: En parametriseret logger

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

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

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

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

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

            

              
                Copy
              
            
          

logMethodWithPrefix-funktionen er en decorator factory. Den tager et prefix-argument og returnerer en decorator-funktion. Decorator-funktionen logger derefter metodekaldene med det angivne præfiks.

Eksempler fra den Virkelige Verden og Casestudier

Overvej en global e-handelsplatform. De kunne bruge decorators til:

• Internationalisering (i18n): Decorators kunne automatisk oversætte tekst baseret på brugerens lokalitet. En @translate-decorator kunne markere egenskaber eller metoder, der skal oversættes. Decoratoren ville derefter hente den passende oversættelse fra en ressourcepakke baseret på brugerens valgte sprog.
• Valutaomregning: Ved visning af priser kunne en @currency-decorator automatisk omregne prisen til brugerens lokale valuta. Denne decorator skulle have adgang til en ekstern valutaomregnings-API og gemme omregningskurserne.
• Skatteberegning: Skatteregler varierer betydeligt mellem lande og regioner. Decorators kunne bruges til at anvende den korrekte skattesats baseret på brugerens placering og det produkt, der købes. En @tax-decorator kunne bruge geolokaliseringsoplysninger til at bestemme den passende skattesats.
• Svindelregistrering: En @fraudCheck-decorator på følsomme operationer (som checkout) kunne udløse algoritmer til svindelregistrering.

Et andet eksempel er en global logistikvirksomhed:

• Geolokaliseringssporing: Decorators kan forbedre metoder, der håndterer lokationsdata, ved at logge nøjagtigheden af GPS-aflæsninger eller validere lokationsformater (breddegrad/længdegrad) for forskellige regioner. En @validateLocation-decorator kan sikre, at koordinater overholder en specifik standard (f.eks. ISO 6709) før behandling.
• Håndtering af Tidszoner: Ved planlægning af leverancer kan decorators automatisk konvertere tider til brugerens lokale tidszone. En @timeZone-decorator ville bruge en tidszonedatabase til at udføre konverteringen, hvilket sikrer, at leveringsplaner er nøjagtige uanset brugerens placering.
• Ruteoptimering: Decorators kunne bruges til at analysere oprindelses- og destinationsadresserne for leveringsanmodninger. En @routeOptimize-decorator kunne kalde en ekstern ruteoptimerings-API for at finde den mest effektive rute, under hensyntagen til faktorer som trafikforhold og vejspærringer i forskellige lande.

Decorators og TypeScript

TypeScript har fremragende understøttelse af decorators. For at bruge decorators i TypeScript skal du aktivere compiler-indstillingen experimentalDecorators i din tsconfig.json-fil:

            {
  "compilerOptions": {
    "target": "es6",
    "experimentalDecorators": true,
    // ... other options
  }
}

            

              
                Copy
              
            
          

TypeScript giver typeinformation til decorators, hvilket gør dem lettere at skrive og vedligeholde. TypeScript håndhæver også typesikkerhed ved brug af decorators, hvilket hjælper dig med at undgå fejl under kørsel. Kodeeksemplerne i dette blogindlæg er primært skrevet i TypeScript for bedre typesikkerhed og læsbarhed.

Fremtiden for Decorators

Decorators er en relativt ny funktion i JavaScript, men de har potentialet til at have en betydelig indflydelse på, hvordan vi skriver og strukturerer kode. I takt med at JavaScript-økosystemet fortsætter med at udvikle sig, kan vi forvente at se flere biblioteker og frameworks, der udnytter decorators til at levere nye og innovative funktioner. Standardiseringen af decorators i ES2022 sikrer deres langsigtede levedygtighed og udbredte anvendelse.

Udfordringer og Overvejelser

• Kompleksitet: Overdreven brug af decorators kan føre til kompleks kode, der er svær at forstå. Det er afgørende at bruge dem med omtanke og dokumentere dem grundigt.
• Ydeevne: Decorators kan medføre overhead, især hvis de udfører komplekse operationer under kørsel. Det er vigtigt at overveje ydeevnekonsekvenserne ved at bruge decorators.
• Debugging: Det kan være udfordrende at debugge kode, der bruger decorators, da eksekveringsflowet kan være mindre ligetil. Gode logningspraksisser og debugging-værktøjer er essentielle.
• Indlæringskurve: Udviklere, der ikke er bekendt med decorators, kan have brug for at investere tid i at lære, hvordan de fungerer.

Best Practices for Brug af Decorators

• Brug Decorators med Omtanke: Brug kun decorators, når de giver en klar fordel med hensyn til kodelæsbarhed, genanvendelighed eller vedligeholdelse.
• Dokumentér Dine Decorators: Dokumentér tydeligt formålet med og adfærden for hver decorator.
• Hold Decorators Simple: Undgå kompleks logik inden i decorators. Hvis det er nødvendigt, deleger komplekse operationer til separate funktioner.
• Test Dine Decorators: Test dine decorators grundigt for at sikre, at de fungerer korrekt.
• Følg Navnekonventioner: Brug en konsekvent navnekonvention for decorators (f.eks. @LogMethod, @ValidateInput).
• Overvej Ydeevne: Vær opmærksom på ydeevnekonsekvenserne ved at bruge decorators, især i ydeevnekritisk kode.

Konklusion

JavaScript decorators tilbyder en kraftfuld og fleksibel måde at forbedre genanvendelighed af kode, øge vedligeholdelsen og implementere tværgående anliggender. Ved at forstå kernekoncepterne i decorators og Reflect Metadata API'en kan du udnytte dem til at skabe mere udtryksfulde og modulære applikationer. Selvom der er udfordringer at overveje, opvejer fordelene ved at bruge decorators ofte ulemperne, især i store og komplekse projekter. I takt med at JavaScript-økosystemet udvikler sig, vil decorators sandsynligvis spille en stadig vigtigere rolle i at forme, hvordan vi skriver og strukturerer kode. Eksperimenter med de medfølgende eksempler og undersøg, hvordan decorators kan løse specifikke problemer i dine projekter. At omfavne denne kraftfulde funktion kan føre til mere elegante, vedligeholdelsesvenlige og robuste JavaScript-applikationer på tværs af forskellige internationale kontekster.