JavaScript Decorators: Frigör kraften i metadataprogrammering

JavaScript decorators, som introducerades som en standardfunktion i ES2022, erbjuder ett kraftfullt och elegant sätt att lägga till metadata och ändra beteendet hos klasser, metoder, egenskaper och parametrar. De erbjuder en deklarativ syntax för att tillämpa tvärgående ansvarsområden (cross-cutting concerns), vilket leder till mer underhållbar, återanvändbar och uttrycksfull kod. Detta blogginlägg kommer att djupdyka i världen av JavaScript decorators, utforska deras grundläggande koncept, praktiska tillämpningar och de underliggande mekanismerna som får dem att fungera.

Vad är JavaScript Decorators?

I grunden är decorators funktioner som modifierar eller förbättrar det dekorerade elementet. De använder symbolen @ följt av decorator-funktionens namn. Tänk på dem som annotationer eller modifierare som lägger till metadata eller ändrar det underliggande beteendet utan att direkt ändra kärnlogiken i den dekorerade enheten. De omsluter effektivt det dekorerade elementet och injicerar anpassad funktionalitet.

Till exempel kan en decorator automatiskt logga metodanrop, validera inmatningsparametrar eller hantera åtkomstkontroll. Decorators främjar separation av ansvarsområden (separation of concerns), vilket håller kärnverksamhetslogiken ren och fokuserad samtidigt som du kan lägga till ytterligare beteenden på ett modulärt sätt.

Syntaxen för Decorators

Decorators tillämpas med symbolen @ före det element de dekorerar. Det finns olika typer av decorators, var och en riktad mot ett specifikt element:

• Klassdecorators: Tillämpas på klasser.
• Metoddecorators: Tillämpas på metoder.
• Egenskapsdecorators: Tillämpas på egenskaper.
• Accessor-decorators: Tillämpas på getter- och setter-metoder.
• Parameterdecorators: Tillämpas på metodparametrar.

Här är ett grundläggande exempel på en klassdecorator:

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

function logClass(target) {
  console.log(`Klassen ${target.name} har skapats.`);
}

            

              
                Copy
              
            
          

I detta exempel är logClass en decorator-funktion som tar klasskonstruktorn (target) som argument. Den loggar sedan ett meddelande till konsolen varje gång en instans av MyClass skapas.

Att förstå metadataprogrammering

Decorators är nära kopplade till konceptet metadataprogrammering. Metadata är "data om data". I programmeringssammanhang beskriver metadata egenskaperna och kännetecknen hos kodelement, såsom klasser, metoder och egenskaper. Decorators låter dig associera metadata med dessa element, vilket möjliggör runtime-introspektion och modifiering av beteende baserat på den metadatan.

Reflect Metadata API (en del av ECMAScript-specifikationen) erbjuder ett standardiserat sätt att definiera och hämta metadata associerad med objekt och deras egenskaper. Även om det inte är strikt nödvändigt för alla användningsfall av decorators, är det ett kraftfullt verktyg för avancerade scenarier där du dynamiskt behöver komma åt och manipulera metadata vid körning.

Till exempel kan du använda Reflect Metadata för att lagra information om en egenskaps datatyp, valideringsregler eller auktoriseringskrav. Denna metadata kan sedan användas av decorators för att utföra åtgärder som att validera indata, serialisera data eller upprätthålla säkerhetspolicyer.

Typer av Decorators med exempel

1. Klassdecorators

Klassdecorators tillämpas på klasskonstruktorn. De kan användas för att modifiera klassdefinitionen, lägga till nya egenskaper eller metoder, eller till och med ersätta hela klassen med en annan.

Exempel: Implementera ett Singleton-mönster

Singleton-mönstret säkerställer att endast en instans av en klass någonsin skapas. Här är hur du kan implementera det med en klassdecorator:

            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(`Ansluter till ${connectionString}`);
  }

  query(sql) {
    console.log(`Utför fråga: ${sql}`);
  }
}

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

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

            

              
                Copy
              
            
          

I detta exempel omsluter Singleton-decoratorn klassen DatabaseConnection. Den säkerställer att endast en instans av klassen någonsin skapas, oavsett hur många gånger konstruktorn anropas.

2. Metoddecorators

Metoddecorators tillämpas på metoder inom en klass. De kan användas för att modifiera metodens beteende, lägga till loggning, implementera cachning eller upprätthålla åtkomstkontroll.

Exempel: Logga metodanropDenna decorator loggar namnet på metoden och dess argument varje gång metoden anropas.

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

  descriptor.value = function (...args) {
    console.log(`Anropar metod: ${propertyKey} med argument: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Metod ${propertyKey} returnerade: ${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); // Loggar: Anropar metod: add med argument: [5,3]
                //       Metod add returnerade: 8
calc.subtract(10, 4); // Loggar: Anropar metod: subtract med argument: [10,4]
                  //       Metod subtract returnerade: 6

            

              
                Copy
              
            
          

Här omsluter logMethod-decoratorn den ursprungliga metoden. Innan den ursprungliga metoden exekveras loggar den metodens namn och dess argument. Efter exekvering loggar den returvärdet.

3. Egenskapsdecorators

Egenskapsdecorators tillämpas på egenskaper inom en klass. De kan användas för att modifiera egenskapens beteende, implementera validering eller lägga till metadata.

Exempel: Validera egenskapsvärden

            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åste vara en sträng med minst 3 tecken.`);
    }
    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'; // Kastar ett fel
} catch (error) {
  console.error(error.message);
}

user.name = 'John Doe'; // Fungerar bra
console.log(user.name);

            

              
                Copy
              
            
          

I detta exempel fångar validate-decoratorn upp åtkomst till egenskapen name. När ett nytt värde tilldelas kontrollerar den om värdet är en sträng och om dess längd är minst 3 tecken. Om inte, kastas ett fel.

4. Accessor-decorators

Accessor-decorators tillämpas på getter- och setter-metoder. De liknar metoddecorators, men de är specifikt riktade mot accessorer (getters och setters).

Exempel: Cachning av getter-resultat

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

  descriptor.get = function () {
    if (cacheSet) {
      console.log(`Returnerar cachat värde för ${propertyKey}`);
      return cacheValue;
    } else {
      console.log(`Beräknar och cachar värde för ${propertyKey}`);
      cacheValue = originalGetter.call(this);
      cacheSet = true;
      return cacheValue;
    }
  };
  return descriptor;
}

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

  @cached
  get area() {
    console.log('Beräknar area...');
    return Math.PI * this.radius * this.radius;
  }
}

const circle = new Circle(5);
console.log(circle.area); // Beräknar och cachar arean
console.log(circle.area); // Returnerar den cachade arean

            

              
                Copy
              
            
          

cached-decoratorn omsluter gettern för egenskapen area. Första gången area nås exekveras gettern, och resultatet cachas. Efterföljande åtkomster returnerar det cachade värdet utan att beräkna det på nytt.

5. Parameterdecorators

Parameterdecorators tillämpas på metodparametrar. De kan användas för att lägga till metadata om parametrarna, validera indata eller modifiera parametervärdena.

Exempel: Validera 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("Obligatoriskt argument saknas.");
          }

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

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

class EmailService {
  @validate
  sendEmail(@required to: string, subject: string, body: string) {
    console.log(`Skickar e-post till ${to} med ämne: ${subject}`);
  }
}

const emailService = new EmailService();

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

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

            

              
                Copy
              
            
          

I detta exempel markerar @required-decoratorn parametern to som obligatorisk och indikerar att den måste ha ett giltigt e-postformat. validate-decoratorn använder sedan Reflect Metadata för att hämta denna information och validera parametern vid körning.

Fördelar med att använda Decorators

• Förbättrad kodläsbarhet och underhållbarhet: Decorators erbjuder en deklarativ syntax som gör koden lättare att förstå och underhålla.
• Ökad återanvändbarhet av kod: Decorators kan återanvändas över flera klasser och metoder, vilket minskar kodduplicering.
• Separation av ansvarsområden: Decorators främjar separation av ansvarsområden genom att låta dig lägga till ytterligare beteenden utan att modifiera kärnlogiken.
• Ökad flexibilitet: Decorators erbjuder ett flexibelt sätt att modifiera beteendet hos kodelement vid körning.
• AOP (Aspektorienterad programmering): Decorators möjliggör AOP-principer, vilket låter dig modularisera tvärgående ansvarsområden.

Användningsfall för Decorators

Decorators kan användas i en mängd olika scenarier, inklusive:

• Loggning: Loggning av metodanrop, prestandamått eller felmeddelanden.
• Validering: Validering av inmatningsparametrar eller egenskapsvärden.
• Cachning: Cachning av metodresultat för att förbättra prestanda.
• Auktorisering: Upprätthållande av åtkomstkontrollpolicyer.
• Dependency Injection: Hantering av beroenden mellan objekt.
• Serialisering/Deserialisering: Konvertering av objekt till och från olika format.
• Databindning: Automatisk uppdatering av UI-element när data ändras.
• State Management: Implementering av state management-mönster i applikationer som React eller Angular.
• API-versionering: Markering av metoder eller klasser som tillhör en specifik API-version.
• Funktionsflaggor (Feature Flags): Aktivering eller inaktivering av funktioner baserat på konfigurationsinställningar.

Decorator-fabriker

En decorator-fabrik är en funktion som returnerar en decorator. Detta låter dig anpassa decoratorns beteende genom att skicka argument till fabriksfunktionen.

Exempel: En parametriserad loggare

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

    descriptor.value = function (...args) {
      console.log(`${prefix}: Anropar metod: ${propertyKey} med argument: ${JSON.stringify(args)}`);
      const result = originalMethod.apply(this, args);
      console.log(`${prefix}: Metod ${propertyKey} returnerade: ${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); // Loggar: [CALCULATION]: Anropar metod: add med argument: [5,3]
                //       [CALCULATION]: Metod add returnerade: 8
calc.subtract(10, 4); // Loggar: [CALCULATION]: Anropar metod: subtract med argument: [10,4]
                  //       [CALCULATION]: Metod subtract returnerade: 6

            

              
                Copy
              
            
          

Funktionen logMethodWithPrefix är en decorator-fabrik. Den tar ett prefix-argument och returnerar en decorator-funktion. Decorator-funktionen loggar sedan metodanropen med det angivna prefixet.

Verkliga exempel och fallstudier

Tänk dig en global e-handelsplattform. De kan använda decorators för:

• Internationalisering (i18n): Decorators kan automatiskt översätta text baserat på användarens locale. En @translate-decorator kan markera egenskaper eller metoder som behöver översättas. Decoratorn skulle sedan hämta lämplig översättning från en resursfil baserat på användarens valda språk.
• Valutakonvertering: Vid visning av priser kan en @currency-decorator automatiskt konvertera priset till användarens lokala valuta. Denna decorator skulle behöva komma åt ett externt API för valutakonvertering och lagra omvandlingskurserna.
• Skatteberäkning: Skatteregler varierar avsevärt mellan länder och regioner. Decorators kan användas för att tillämpa korrekt skattesats baserat på användarens plats och produkten som köps. En @tax-decorator kan använda geolokaliseringsinformation för att bestämma lämplig skattesats.
• Bedrägeriupptäckt: En @fraudCheck-decorator på känsliga operationer (som utcheckning) kan utlösa algoritmer för bedrägeriupptäckt.

Ett annat exempel är ett globalt logistikföretag:

• Geolokaliseringsspårning: Decorators kan förbättra metoder som hanterar platsdata, logga noggrannheten i GPS-avläsningar eller validera platsformat (latitud/longitud) för olika regioner. En @validateLocation-decorator kan säkerställa att koordinater följer en specifik standard (t.ex. ISO 6709) innan bearbetning.
• Tidszonshantering: Vid schemaläggning av leveranser kan decorators automatiskt konvertera tider till användarens lokala tidszon. En @timeZone-decorator skulle använda en tidszonsdatabas för att utföra konverteringen, vilket säkerställer att leveransscheman är korrekta oavsett användarens plats.
• Ruttoptimering: Decorators kan användas för att analysera ursprungs- och destinationsadresser för leveransförfrågningar. En @routeOptimize-decorator kan anropa ett externt API för ruttoptimering för att hitta den mest effektiva rutten, med hänsyn till faktorer som trafikförhållanden och vägavstängningar i olika länder.

Decorators och TypeScript

TypeScript har utmärkt stöd för decorators. För att använda decorators i TypeScript måste du aktivera kompileringsalternativet experimentalDecorators i din tsconfig.json-fil:

            {
  "compilerOptions": {
    "target": "es6",
    "experimentalDecorators": true,
    // ... andra alternativ
  }
}

            

              
                Copy
              
            
          

TypeScript tillhandahåller typinformation för decorators, vilket gör det lättare att skriva och underhålla dem. TypeScript upprätthåller också typsäkerhet vid användning av decorators, vilket hjälper dig att undvika fel vid körning. Kodexemplen i detta blogginlägg är primärt skrivna i TypeScript för bättre typsäkerhet och läsbarhet.

Framtiden för Decorators

Decorators är en relativt ny funktion i JavaScript, men de har potential att avsevärt påverka hur vi skriver och strukturerar kod. I takt med att JavaScript-ekosystemet fortsätter att utvecklas kan vi förvänta oss att se fler bibliotek och ramverk som utnyttjar decorators för att erbjuda nya och innovativa funktioner. Standardiseringen av decorators i ES2022 säkerställer deras långsiktiga livskraft och breda acceptans.

Utmaningar och överväganden

• Komplexitet: Överanvändning av decorators kan leda till komplex kod som är svår att förstå. Det är avgörande att använda dem omdömesgillt och dokumentera dem noggrant.
• Prestanda: Decorators kan introducera en overhead, särskilt om de utför komplexa operationer vid körning. Det är viktigt att överväga prestandakonsekvenserna av att använda decorators.
• Felsökning: Felsökning av kod som använder decorators kan vara utmanande, eftersom exekveringsflödet kan vara mindre rakt på sak. Goda loggningsrutiner och felsökningsverktyg är väsentliga.
• Inlärningskurva: Utvecklare som inte är bekanta med decorators kan behöva investera tid i att lära sig hur de fungerar.

Bästa praxis för att använda Decorators

• Använd Decorators sparsamt: Använd endast decorators när de ger en tydlig fördel i termer av kodläsbarhet, återanvändbarhet eller underhållbarhet.
• Dokumentera dina Decorators: Dokumentera tydligt syftet och beteendet för varje decorator.
• Håll Decorators enkla: Undvik komplex logik inom decorators. Om nödvändigt, delegera komplexa operationer till separata funktioner.
• Testa dina Decorators: Testa dina decorators noggrant för att säkerställa att de fungerar korrekt.
• Följ namnkonventioner: Använd en konsekvent namnkonvention för decorators (t.ex. @LogMethod, @ValidateInput).
• Tänk på prestanda: Var medveten om prestandakonsekvenserna av att använda decorators, särskilt i prestandakritisk kod.

Slutsats

JavaScript decorators erbjuder ett kraftfullt och flexibelt sätt att förbättra kodens återanvändbarhet, underhållbarhet och implementera tvärgående ansvarsområden. Genom att förstå de grundläggande koncepten för decorators och Reflect Metadata API kan du utnyttja dem för att skapa mer uttrycksfulla och modulära applikationer. Även om det finns utmaningar att överväga, överväger fördelarna med att använda decorators ofta nackdelarna, särskilt i stora och komplexa projekt. I takt med att JavaScript-ekosystemet utvecklas kommer decorators sannolikt att spela en allt viktigare roll i att forma hur vi skriver och strukturerar kod. Experimentera med de angivna exemplen och utforska hur decorators kan lösa specifika problem i dina projekt. Att omfamna denna kraftfulla funktion kan leda till mer eleganta, underhållbara och robusta JavaScript-applikationer i olika internationella sammanhang.