M

MLOG

Svenska

Utforska kraften i JavaScript-dekoratörer för metadatahantering och kodmodifiering. Lär dig förbättra din kod med tydlighet och effektivitet, enligt bästa praxis.

JavaScript-dekoratörer: Utnyttja kraften i metadata och kodmodifiering

JavaScript-dekoratörer erbjuder ett kraftfullt och elegant sätt att lägga till metadata och modifiera beteendet hos klasser, metoder, egenskaper och parametrar. De tillhandahåller en deklarativ syntax för att förbättra kod med tvärgående ansvarsområden som loggning, validering, auktorisering med mera. Även om det fortfarande är en relativt ny funktion, vinner dekoratörer i popularitet, särskilt i TypeScript, och lovar att förbättra kodens läsbarhet, underhållbarhet och återanvändbarhet. Denna artikel utforskar funktionerna i JavaScript-dekoratörer, med praktiska exempel och insikter för utvecklare över hela världen.

Vad är JavaScript-dekoratörer?

Dekoratörer är i grunden funktioner som omsluter andra funktioner eller klasser. De erbjuder ett sätt att modifiera eller förbättra det dekorerade elementets beteende utan att direkt ändra dess ursprungliga kod. Dekoratörer använder symbolen @ följt av ett funktionsnamn för att dekorera klasser, metoder, accessorer, egenskaper eller parametrar.

Se dem som syntaktiskt socker för högre ordningens funktioner, vilket erbjuder ett renare och mer läsbart sätt att tillämpa tvärgående ansvarsområden på din kod. Dekoratörer ger dig möjlighet att effektivt separera ansvarsområden, vilket leder till mer modulära och underhållbara applikationer.

Typer av dekoratörer

JavaScript-dekoratörer finns i flera varianter, var och en riktad mot olika delar av din kod:

Grundläggande syntax

Syntaxen för att tillämpa en dekoratör är enkel:

@decoratorName
class MyClass {
  @methodDecorator
  myMethod( @parameterDecorator param: string ) {
    @propertyDecorator
    myProperty: number;
  }
}

Här är en genomgång:

Klassdekoratörer: Modifiera klassbeteende

Klassdekoratörer är funktioner som tar emot klassens konstruktor som ett argument. De kan användas för att:

Exempel: Logga skapandet av klasser

Föreställ dig att du vill logga varje gång en ny instans av en klass skapas. En klassdekoratör kan åstadkomma detta:

function logClassCreation(constructor: Function) {
  return class extends constructor {
    constructor(...args: any[]) {
      console.log(`Creating a new instance of ${constructor.name}`);
      super(...args);
    }
  };
}

@logClassCreation
class User {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const user = new User("Alice"); // Utskrift: Creating a new instance of User

I detta exempel ersätter logClassCreation den ursprungliga User-klassen med en ny klass som ärver från den. Den nya klassens konstruktor loggar ett meddelande och anropar sedan den ursprungliga konstruktorn med super.

Metoddekoratörer: Förbättra metodfunktionalitet

Metoddekoratörer tar emot tre argument:

De kan användas för att:

Exempel: Logga metodanrop

Låt oss skapa en metoddekoratör som loggar varje gång en metod anropas, tillsammans med dess argument:

function logMethodCall(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling method ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @logMethodCall
  add(x: number, y: number): number {
    return x + y;
  }
}

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Utskrift: Calling method add with arguments: [5,3]
                                 //         Method add returned: 8

Dekoratören logMethodCall omsluter den ursprungliga metoden. Innan den ursprungliga metoden exekveras loggar den metodnamnet och argumenten. Efter exekvering loggar den det returnerade värdet.

Accessordekoratörer: Kontrollera åtkomst till egenskaper

Accessordekoratörer liknar metoddekoratörer men tillämpas specifikt på getter- och setter-metoder (accessorer). De tar emot samma tre argument som metoddekoratörer:

De kan användas för att:

Exempel: Validera setter-värden

Låt oss skapa en accessordekoratör som validerar värdet som sätts för en egenskap:

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

  descriptor.set = function (value: number) {
    if (value < 0) {
      throw new Error("Age cannot be negative");
    }
    originalSet.call(this, value);
  };

  return descriptor;
}

class Person {
  private _age: number;

  @validateAge
  set age(value: number) {
    this._age = value;
  }

  get age(): number {
    return this._age;
  }
}

const person = new Person();
person.age = 30; // Fungerar bra

try {
  person.age = -5; // Kastar ett fel: Age cannot be negative
} catch (error:any) {
  console.error(error.message);
}

Dekoratören validateAge fångar upp settern för egenskapen age. Den kontrollerar om värdet är negativt och kastar ett fel om så är fallet. Annars anropar den den ursprungliga settern.

Egenskapsdekoratörer: Modifiera egenskapsbeskrivare

Egenskapsdekoratörer tar emot två argument:

De kan användas för att:

Exempel: Göra en egenskap skrivskyddad

Låt oss skapa en egenskapsdekoratör som gör en egenskap skrivskyddad:

function readOnly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
  });
}

class Configuration {
  @readOnly
  apiUrl: string = "https://api.example.com";
}

const config = new Configuration();

try {
  (config as any).apiUrl = "https://newapi.example.com"; // Kastar ett fel i strict mode
  console.log(config.apiUrl); // Utskrift: https://api.example.com
} catch (error) {
  console.error("Cannot assign to read only property 'apiUrl' of object '#'", error);
}

Dekoratören readOnly använder Object.defineProperty för att modifiera egenskapsbeskrivaren och sätter writable till false. Försök att ändra egenskapen kommer nu att resultera i ett fel (i strict mode) eller ignoreras.

Parameterdekoratörer: Tillhandahålla metadata om parametrar

Parameterdekoratörer tar emot tre argument:

Parameterdekoratörer används mer sällan än andra typer, men de kan vara användbara i scenarier där du behöver associera metadata med specifika parametrar.

Exempel: Dependency Injection

Parameterdekoratörer kan användas i ramverk för dependency injection för att identifiera beroenden som ska injiceras i en metod. Även om ett komplett dependency injection-system ligger utanför ramen för denna artikel, är här en förenklad illustration:

const dependencies: any[] = [];

function inject(token: any) {
  return function (target: any, propertyKey: string | symbol, parameterIndex: number) {
    dependencies.push({
      target,
      propertyKey,
      parameterIndex,
      token,
    });
  };
}

class UserService {
  getUser(id: number) {
    return `User with ID ${id}`;
  }
}

class UserController {
  private userService: UserService;

  constructor(@inject(UserService) userService: UserService) {
    this.userService = userService;
  }

  getUser(id: number) {
    return this.userService.getUser(id);
  }
}

//Förenklad hämtning av beroenden
const userServiceInstance = new UserService();
const userController = new UserController(userServiceInstance);
console.log(userController.getUser(123)); // Utskrift: User with ID 123

I detta exempel lagrar dekoratören @inject metadata om parametern userService i arrayen dependencies. En dependency injection-container kan sedan använda denna metadata för att lösa och injicera lämpligt beroende.

Praktiska tillämpningar och användningsfall

Dekoratörer kan tillämpas på en mängd olika scenarier för att förbättra kodkvalitet och underhållbarhet:

Fördelar med att använda dekoratörer

Dekoratörer erbjuder flera viktiga fördelar:

Överväganden och bästa praxis

Dekoratörer i olika miljöer

Även om dekoratörer är en del av ESNext-specifikationen, varierar deras stöd i olika JavaScript-miljöer:

Globala perspektiv på dekoratörer

Användningen av dekoratörer varierar mellan olika regioner och utvecklingsgemenskaper. I vissa regioner där TypeScript är allmänt antaget (t.ex. delar av Nordamerika och Europa) används dekoratörer ofta. I andra regioner, där JavaScript är vanligare eller där utvecklare föredrar enklare mönster, kan dekoratörer vara mindre vanliga.

Dessutom kan användningen av specifika dekoratörmönster variera beroende på kulturella preferenser och branschstandarder. Till exempel, i vissa kulturer föredras en mer detaljerad och explicit kodstil, medan i andra en mer koncis och uttrycksfull stil föredras.

När man arbetar med internationella projekt är det viktigt att ta hänsyn till dessa kulturella och regionala skillnader och att etablera kodningsstandarder som är tydliga, koncisa och lätta att förstå för alla teammedlemmar. Detta kan innebära att tillhandahålla ytterligare dokumentation, utbildning eller mentorskap för att säkerställa att alla är bekväma med att använda dekoratörer.

Slutsats

JavaScript-dekoratörer är ett kraftfullt verktyg för att förbättra kod med metadata och modifiera beteende. Genom att förstå de olika typerna av dekoratörer och deras praktiska tillämpningar kan utvecklare skriva renare, mer underhållbar och återanvändbar kod. Allt eftersom dekoratörer får bredare acceptans är de på väg att bli en väsentlig del av JavaScript-utvecklingslandskapet. Omfamna denna kraftfulla funktion och frigör dess potential att lyfta din kod till nya höjder. Kom ihåg att alltid följa bästa praxis och att överväga prestandakonsekvenserna av att använda dekoratörer i dina applikationer. Med noggrann planering och implementering kan dekoratörer avsevärt förbättra kvaliteten och underhållbarheten i dina JavaScript-projekt. Lycka till med kodningen!