JavaScript-dekoratorer: Förbättra och validera egenskaper med accessorer

JavaScript-dekoratorer erbjuder ett kraftfullt och elegant sätt att modifiera och förbättra klasser och deras medlemmar, vilket gör koden mer läsbar, underhållbar och utbyggbar. Det här inlägget fördjupar sig i detaljerna kring att använda dekoratorer med accessorer (getters och setters) för egenskapsförbättring och validering, och ger praktiska exempel och bästa praxis för modern JavaScript-utveckling.

Vad är JavaScript-dekoratorer?

Dekoratorer, som introducerades i ES2016 (ES7) och har standardiserats, är ett designmönster som låter dig lägga till funktionalitet i befintlig kod på ett deklarativt och återanvändbart sätt. De använder symbolen @ följt av dekoratorns namn och appliceras på klasser, metoder, accessorer eller egenskaper. Se dem som syntaktiskt socker som gör metaprogrammering enklare och mer läsbar.

Obs: Dekoratorer kräver att experimentellt stöd aktiveras i din JavaScript-miljö. I TypeScript behöver du till exempel aktivera kompileringsalternativet experimentalDecorators i din tsconfig.json-fil.

Grundläggande syntax

En dekorator är i grunden en funktion som tar målet (klassen, metoden, accessorn eller egenskapen som dekoreras), namnet på medlemmen som dekoreras, och egenskapsbeskrivaren (för accessorer och metoder) som argument. Den kan sedan modifiera eller ersätta målelementet.

            function MyDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  // Dekoratorlogik här
}

class MyClass {
  @MyDecorator
  myProperty: string;
}

            

              
                Copy
              
            
          

Dekoratorer och accessorer (Getters och Setters)

Accessorer (getters och setters) låter dig kontrollera åtkomsten till klassens egenskaper. Att dekorera accessorer ger en kraftfull mekanism för att lägga till funktionalitet såsom:

• Validering: Säkerställa att värdet som tilldelas en egenskap uppfyller vissa kriterier.
• Transformation: Modifiera värdet innan det lagras eller returneras.
• Loggning: Spåra åtkomst till egenskaper för felsökning eller granskning.
• Memoization: Cachning av resultatet från en getter för prestandaoptimering.
• Auktorisering: Kontrollera åtkomst till egenskaper baserat på användarroller eller behörigheter.

Exempel: Valideringsdekorator

Låt oss skapa en dekorator som validerar värdet som tilldelas en egenskap. Detta exempel använder en enkel längdkontroll för en sträng, men det kan enkelt anpassas för mer komplexa valideringsregler.

            function ValidateLength(minLength: number) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalSet = descriptor.set;

    descriptor.set = function (value: any) {
      if (typeof value === 'string' && value.length < minLength) {
        throw new Error(`Egenskapen ${propertyKey} måste vara minst ${minLength} tecken lång.`);
      }
      originalSet.call(this, value);
    };
  };
}

class User {
  private _username: string;

  @ValidateLength(3)
  set username(value: string) {
    this._username = value;
  }

  get username(): string {
    return this._username;
  }
}

const user = new User();

try {
  user.username = 'ab'; // Detta kommer att kasta ett fel
} catch (error) {
  console.error(error.message); // Utskrift: Egenskapen username måste vara minst 3 tecken lång.
}

user.username = 'abc'; // Detta kommer att fungera bra
console.log(user.username); // Utskrift: abc

            

              
                Copy
              
            
          

Förklaring:

1. Dekoratorn ValidateLength är en fabriksfunktion som tar minimilängden som ett argument.
2. Den returnerar en dekoratorfunktion som tar emot target, propertyKey (namnet på egenskapen) och descriptor.
3. Dekoratorfunktionen fångar upp den ursprungliga settern (descriptor.set).
4. Inuti den uppfångade settern utför den valideringskontrollen. Om värdet är ogiltigt kastar den ett fel. Annars anropar den den ursprungliga settern med originalSet.call(this, value).

Exempel: Transformationsdekorator

Detta exempel visar hur man transformerar ett värde innan det lagras i en egenskap. Här skapar vi en dekorator som automatiskt tar bort blanksteg från ett strängvärde.

            function Trim() {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalSet = descriptor.set;

    descriptor.set = function (value: any) {
      if (typeof value === 'string') {
        value = value.trim();
      }
      originalSet.call(this, value);
    };
  };
}

class Product {
  private _name: string;

  @Trim()
  set name(value: string) {
    this._name = value;
  }

  get name(): string {
    return this._name;
  }
}

const product = new Product();
product.name = '  Min Produkt  ';
console.log(product.name); // Utskrift: Min Produkt

            

              
                Copy
              
            
          

Förklaring:

1. Dekoratorn Trim fångar upp settern för egenskapen name.
2. Den kontrollerar om värdet som tilldelas är en sträng.
3. Om det är en sträng anropar den metoden trim() för att ta bort inledande och avslutande blanksteg.
4. Slutligen anropar den den ursprungliga settern med det trimmade värdet.

Exempel: Loggningsdekorator

Detta exempel visar hur man loggar åtkomst till en egenskap, vilket kan vara användbart för felsökning eller granskning.

            function LogAccess() {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalGet = descriptor.get;
    const originalSet = descriptor.set;

    if (originalGet) {
      descriptor.get = function () {
        const result = originalGet.call(this);
        console.log(`Hämtar ${propertyKey}: ${result}`);
        return result;
      };
    }

    if (originalSet) {
      descriptor.set = function (value: any) {
        console.log(`Ställer in ${propertyKey} till: ${value}`);
        originalSet.call(this, value);
      };
    }
  };
}

class Configuration {
  private _apiKey: string;

  @LogAccess()
  set apiKey(value: string) {
    this._apiKey = value;
  }

  get apiKey(): string {
    return this._apiKey;
  }
}

const config = new Configuration();
config.apiKey = 'din_api_nyckel'; // Utskrift: Ställer in apiKey till: din_api_nyckel
console.log(config.apiKey); // Utskrift: Hämtar apiKey: din_api_nyckel
                              // Utskrift: din_api_nyckel

            

              
                Copy
              
            
          

Förklaring:

1. Dekoratorn LogAccess fångar upp både gettern och settern för egenskapen apiKey.
2. När gettern anropas loggar den det hämtade värdet till konsolen.
3. När settern anropas loggar den värdet som tilldelas till konsolen.

Praktiska tillämpningar och överväganden

Dekoratorer med accessorer kan användas i en mängd olika scenarier, inklusive:

• Datakoppling: Automatiskt uppdatera gränssnittet när en egenskap ändras. Ramverk som Angular och React använder ofta liknande mönster internt.
• Objektrelationell mappning (ORM): Definiera hur klassegenskaper mappar till databaskolumner, inklusive valideringsregler och datatransformationer. En dekorator skulle till exempel kunna säkerställa att en strängegenskap lagras med gemener i databasen.
• API-integration: Validera och transformera data som tas emot från externa API:er. En dekorator skulle kunna säkerställa att en datumsträng som tas emot från ett API tolkas som ett giltigt JavaScript Date-objekt.
• Konfigurationshantering: Ladda konfigurationsvärden från miljövariabler eller konfigurationsfiler och validera dem. En dekorator skulle till exempel kunna säkerställa att ett portnummer ligger inom ett giltigt intervall.

Att tänka på:

• Komplexitet: Överanvändning av dekoratorer kan göra koden svårare att förstå och felsöka. Använd dem omdömesgillt och dokumentera deras syfte tydligt.
• Prestanda: Dekoratorer lägger till ett extra lager av indirektion, vilket potentiellt kan påverka prestandan. Mät prestandakritiska delar av din kod för att säkerställa att dekoratorer inte orsakar en betydande nedgång.
• Kompatibilitet: Även om dekoratorer nu är standardiserade, kanske äldre JavaScript-miljöer inte stöder dem inbyggt. Använd en transpiler som Babel eller TypeScript för att säkerställa kompatibilitet över olika webbläsare och Node.js-versioner.
• Metadata: Dekoratorer används ofta i samband med metadata-reflektion, vilket låter dig komma åt information om de dekorerade medlemmarna vid körtid. Biblioteket reflect-metadata erbjuder ett standardiserat sätt att lägga till och hämta metadata.

Avancerade tekniker

Använda Reflect API

Reflect API erbjuder kraftfulla introspektionsmöjligheter, vilket gör att du kan inspektera och ändra beteendet hos objekt vid körtid. Det används ofta i samband med dekoratorer för att lägga till metadata till klasser och deras medlemmar.

Exempel:

            import 'reflect-metadata';

const formatMetadataKey = Symbol('format');

function format(formatString: string) {
  return Reflect.metadata(formatMetadataKey, formatString);
}

function getFormat(target: any, propertyKey: string) {
  return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
}

class Greeter {
  @format('Hej, %s')
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    let formatString = getFormat(this, 'greeting');
    return formatString.replace('%s', this.greeting);
  }
}

let greeter = new Greeter('världen');
console.log(greeter.greet()); // Utskrift: Hej, världen

            

              
                Copy
              
            
          

Förklaring:

1. Vi importerar biblioteket reflect-metadata.
2. Vi definierar en metadatanyckel med en Symbol för att undvika namnkonflikter.
3. Dekoratorn format lägger till metadata till egenskapen greeting och specificerar formatsträngen.
4. Funktionen getFormat hämtar metadatan som är associerad med en egenskap.
5. Metoden greet hämtar formatsträngen från metadatan och använder den för att formatera hälsningsmeddelandet.

Sammansättning av dekoratorer

Du kan kombinera flera dekoratorer för att tillämpa flera förbättringar på en enda accessor. Detta gör att du kan skapa komplexa validerings- och transformationskedjor.

Exempel:

            function ToUpperCase() {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalSet = descriptor.set;

    descriptor.set = function (value: any) {
      if (typeof value === 'string') {
        value = value.toUpperCase();
      }
      originalSet.call(this, value);
    };
  };
}

@ValidateLength(5)
@ToUpperCase()
class DataItem {
  private _value: string;

  set value(newValue: string) {
    this._value = newValue;
  }

  get value(): string {
    return this._value;
  }
}

const item = new DataItem();
try {
  item.value = 'kort'; // Detta kommer att kasta ett fel eftersom den är kortare än 5 tecken.
} catch (e) {
  console.error(e.message); // Egenskapen value måste vara minst 5 tecken lång.
}

item.value = 'längre';
console.log(item.value); // LÄNGRE

            

              
                Copy
              
            
          

I det här exemplet tillämpas dekoratorn `ValidateLength` först, följt av `ToUpperCase`. Ordningen på dekoratorernas tillämpning är viktig; här valideras längden *innan* strängen konverteras till versaler.

Bästa praxis

• Håll dekoratorer enkla: Dekoratorer bör vara fokuserade och utföra en enda, väldefinierad uppgift. Undvik att skapa alltför komplexa dekoratorer som är svåra att förstå och underhålla.
• Använd fabriksfunktioner: Använd fabriksfunktioner för att skapa dekoratorer som accepterar argument, vilket gör att du kan anpassa deras beteende.
• Dokumentera dina dekoratorer: Dokumentera tydligt syftet och användningen av dina dekoratorer för att göra dem lättare att förstå och använda för andra utvecklare.
• Testa dina dekoratorer: Skriv enhetstester för att säkerställa att dina dekoratorer fungerar korrekt och att de inte introducerar några oväntade sidoeffekter.
• Undvik sidoeffekter: Dekoratorer bör helst vara rena funktioner som inte har några sidoeffekter utöver att modifiera målelementet.
• Tänk på appliceringsordningen: När du komponerar flera dekoratorer, var uppmärksam på i vilken ordning de tillämpas, eftersom detta kan påverka resultatet.
• Var medveten om prestanda: Mät prestandapåverkan av dina dekoratorer, särskilt i prestandakritiska delar av din kod.

Globalt perspektiv

Principerna för att använda dekoratorer för egenskapsförbättring och validering är tillämpliga över olika programmeringsparadigm och mjukvaruutvecklingspraxis världen över. Däremot kan den specifika kontexten och kraven variera beroende på bransch, region och projekt.

Till exempel, i starkt reglerade branscher som finans eller hälsovård, kan stränga krav på datavalidering och säkerhet kräva användning av mer komplexa och robusta valideringsdekoratorer. I motsats till detta, i snabbt utvecklande startups, kan fokus ligga på snabb prototyping och iteration, vilket leder till ett mer pragmatiskt och mindre rigoröst tillvägagångssätt för validering.

Utvecklare som arbetar i internationella team bör också vara medvetna om kulturella skillnader och språkbarriärer. När du definierar valideringsregler, överväg de olika dataformat och konventioner som används i olika länder. Till exempel kan datumformat, valutasymboler och adressformat variera avsevärt mellan olika regioner.

Slutsats

JavaScript-dekoratorer med accessorer erbjuder ett kraftfullt och flexibelt sätt att förbättra och validera egenskaper, vilket förbättrar kodkvalitet, underhållbarhet och återanvändbarhet. Genom att förstå grunderna i dekoratorer, accessorer och Reflect API, och genom att följa bästa praxis, kan du utnyttja dessa funktioner för att bygga robusta och väl utformade applikationer.

Kom ihåg att överväga den specifika kontexten och kraven för ditt projekt, och att anpassa ditt tillvägagångssätt därefter. Med noggrann planering och implementering kan dekoratorer vara ett värdefullt verktyg i din JavaScript-utvecklingsarsenal.