JavaScript'i dekoraatorite ettepanek: meetodite täiustamine ja metaandmete annotatsioon

JavaScript kui dünaamiline ja arenev keel otsib pidevalt viise, kuidas parandada koodi loetavust, hooldatavust ja laiendatavust. Üks oodatumaid funktsioone, mis nendele aspektidele keskendub, on dekoraatorite ettepanek. See artikkel annab põhjaliku ülevaate JavaScripti dekoraatoritest, uurides nende süntaksit, võimekust ja potentsiaalset mõju kaasaegsele JavaScripti arendusele. Kuigi praegu on tegemist 3. etapi ettepanekuga, kasutatakse dekoraatoreid juba laialdaselt raamistikes nagu Angular ja neid võetakse üha enam kasutusele transpilaatorite, näiteks Babeli, kaudu. See muudab nende mõistmise iga kaasaegse JavaScripti arendaja jaoks ülioluliseks.

Mis on JavaScripti dekoraatorid?

Dekoraatorid on disainimuster, mis on laenatud teistest keeltest nagu Python ja Java. Sisuliselt on need eriline deklaratsioonitüüp, mida saab lisada klassile, meetodile, aktsessorile, omadusele või parameetrile. Dekoraatorid kasutavad süntaksit @avaldis, kus avaldis peab andma tulemuseks funktsiooni, mida käivitatakse käitusajal koos informatsiooniga dekoreeritud deklaratsiooni kohta.

Mõelge dekoraatoritest kui viisist lisada olemasolevale koodile lisafunktsionaalsust või metaandmeid ilma seda otse muutmata. See soodustab deklaratiivsemat ja hooldatavamat koodibaasi.

Põhisüntaks ja kasutus

Lihtne dekoraator on funktsioon, mis võtab ühe, kaks või kolm argumenti, sõltuvalt sellest, mida see dekoreerib:

• Klassidekoraatori puhul on argumendiks klassi konstruktor.
• Meetodi või aktsessori dekoraatori puhul on argumendid sihtobjekt (kas klassi prototüüp või staatiliste liikmete puhul klassi konstruktor), omaduse võti (meetodi või aktsessori nimi) ja omaduse deskriptor.
• Omaduse dekoraatori puhul on argumendid sihtobjekt ja omaduse võti.
• Parameetri dekoraatori puhul on argumendid sihtobjekt, omaduse võti ja parameetri indeks funktsiooni parameetrite loendis.

Klassidekoraatorid

Klassidekoraatorit rakendatakse klassi konstruktorile. Seda saab kasutada klassi definitsiooni jälgimiseks, muutmiseks või asendamiseks. Levinud kasutusjuht on klassi registreerimine raamistikus või teegis.

Näide: Klassi instantside logimine

            function logClass(constructor: Function) {
 return class extends constructor {
 constructor(...args: any[]) {
 super(...args);
 console.log(`Loodi uus instants klassist ${constructor.name}.`);
 }
 };
}

@logClass
class MyClass {
 constructor(public message: string) {
 }
}

const instance = new MyClass("Tere, dekoraatorid!"); // Väljund: Loodi uus instants klassist MyClass.
            

              
                Copy
              
            
          

Selles näites muudab logClass dekoraator MyClass konstruktorit, et logida teade iga kord, kui luuakse uus instants.

Meetodidekoraatorid

Meetodidekoraatoreid rakendatakse klassi sees olevatele meetoditele. Neid saab kasutada meetodi käitumise jälgimiseks, muutmiseks või asendamiseks. See on kasulik näiteks meetodikutsete logimiseks, argumentide valideerimiseks või vahemälu rakendamiseks.

Näide: Meetodikutsete logimine

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

 descriptor.value = function (...args: any[]) {
 console.log(`Kutsutakse välja meetodit ${propertyKey} argumentidega: ${JSON.stringify(args)}`);
 const result = originalMethod.apply(this, args);
 console.log(`Meetod ${propertyKey} tagastas: ${result}`);
 return result;
 };

 return descriptor;
}

class Calculator {
 @logMethod
 add(a: number, b: number): number {
 return a + b;
 }
}

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Väljund: Kutsutakse välja meetodit add argumentidega: [5,3]
 // Väljund: Meetod add tagastas: 8
            

              
                Copy
              
            
          

logMethod dekoraator logib add meetodi argumendid ja tagastusväärtuse.

Aktsessoridekoraatorid

Aktsessoridekoraatorid on sarnased meetodidekoraatoritele, kuid neid rakendatakse getteri või setteri meetoditele. Neid saab kasutada omadustele juurdepääsu kontrollimiseks või valideerimisloogika lisamiseks.

Näide: Setteri väärtuste valideerimine

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

 descriptor.set = function (value: number) {
 if (value < 0) {
 throw new Error("Väärtus peab olema mittenegatiivne.");
 }
 originalSet.call(this, value);
 };
}

class Temperature {
 private _celsius: number = 0;

 @validate
 set celsius(value: number) {
 this._celsius = value;
 }

 get celsius(): number {
 return this._celsius;
 }
}

const temperature = new Temperature();
temperature.celsius = 25; // OK
// temperature.celsius = -10; // Viskab vea
            

              
                Copy
              
            
          

validate dekoraator tagab, et celsius setter aktsepteerib ainult mittenegatiivseid väärtusi.

Omadustedekoraatorid

Omadustedekoraatoreid rakendatakse klassi omadustele. Neid saab kasutada omaduse kohta metaandmete defineerimiseks või selle käitumise muutmiseks.

Näide: Kohustusliku omaduse defineerimine

            function required(target: any, propertyKey: string) {
 let existingRequiredProperties: string[] = target.__requiredProperties__ || [];
 existingRequiredProperties.push(propertyKey);
 target.__requiredProperties__ = existingRequiredProperties;
}

class UserProfile {
 @required
 name: string;

 age: number;

 constructor(data: any) {
 this.name = data.name;
 this.age = data.age;

 const requiredProperties: string[] = (this.constructor as any).prototype.__requiredProperties__ || [];
 requiredProperties.forEach(property => {
 if (!this[property]) {
 throw new Error(`Puudub kohustuslik omadus: ${property}`);
 }
 });
 }
}

// const user = new UserProfile({}); // Viskab vea: Puudub kohustuslik omadus: name
const user = new UserProfile({ name: "John Doe" }); // OK
            

              
                Copy
              
            
          

required dekoraator märgib name omaduse kohustuslikuks. Seejärel kontrollib konstruktor, kas kõik kohustuslikud omadused on olemas.

Parameetridekoraatorid

Parameetridekoraatoreid rakendatakse funktsiooni parameetritele. Neid saab kasutada parameetri kohta metaandmete lisamiseks või selle käitumise muutmiseks. Need on vähem levinud kui muud tüüpi dekoraatorid.

Näide: Sõltuvuste süstimine

            import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
 return (target: any) => {
 Reflect.defineMetadata('injectable', true, target);
 };
};

const Inject = (token: any): ParameterDecorator => {
 return (target: any, propertyKey: string | symbol | undefined, parameterIndex: number) => {
 Reflect.defineMetadata('design:paramtypes', [token], target, propertyKey!)
 };
};

@Injectable()
class DatabaseService {
 connect() {
 console.log("Ühendun andmebaasiga...");
 }
}

class UserService {
 private databaseService: DatabaseService;

 constructor(@Inject(DatabaseService) databaseService: DatabaseService) {
 this.databaseService = databaseService;
 }

 getUser(id: number) {
 this.databaseService.connect();
 console.log(`Pärin kasutajat ID-ga: ${id}`);
 }
}

const databaseService = new DatabaseService();
const userService = new UserService(databaseService);
userService.getUser(123);
            

              
                Copy
              
            
          

Selles näites kasutame reflect-metadata't (tavapärane praktika JavaScripti/TypeScripti sõltuvuste süstimisega töötamisel). @Inject dekoraator ütleb UserService'i konstruktorile, et see süstiks DatabaseService'i instantsi. Kuigi ülaltoodud näidet ei saa ilma täiendava seadistuseta täielikult käivitada, demonstreerib see soovitud efekti.

Kasutusjuhud ja eelised

Dekoraatorid pakuvad mitmeid eeliseid ja neid saab rakendada erinevatel kasutusjuhtudel:

• Metaandmete annotatsioon: Dekoraatoreid saab kasutada metaandmete lisamiseks klassidele, meetoditele ja omadustele. Seda metaandmestikku saavad raamistikud ja teegid kasutada lisafunktsionaalsuse pakkumiseks, näiteks sõltuvuste süstimine, marsruutimine ja valideerimine.
• Aspekt-orienteeritud programmeerimine (AOP): Dekoraatorid saavad rakendada AOP kontseptsioone nagu logimine, turvalisus ja tehinguhaldus, mähkides meetodid täiendava käitumisega.
• Koodi taaskasutatavus: Dekoraatorid soodustavad koodi taaskasutatavust, võimaldades teil eraldada ühise funktsionaalsuse taaskasutatavateks dekoraatoriteks.
• Parem loetavus: Dekoraatorid muudavad koodi loetavamaks ja deklaratiivsemaks, eraldades ülesanded ja vähendades korduvat koodi.
• Raamistiku integratsioon: Dekoraatoreid kasutatakse laialdaselt populaarsetes JavaScripti raamistikes nagu Angular, NestJS ja MobX, et pakkuda deklaratiivsemat ja väljendusrikkamat viisi komponentide, teenuste ja muude raamistikuspetsiifiliste kontseptsioonide defineerimiseks.

Reaalse maailma näited ja rahvusvahelised kaalutlused

Kuigi dekoraatorite põhikontseptsioonid jäävad erinevates programmeerimiskontekstides samaks, võib nende rakendus varieeruda sõltuvalt konkreetsest kasutatavast raamistikust või teegist. Siin on mõned näited:

• Angular (Arendanud Google, kasutatakse üle maailma): Angular kasutab laialdaselt dekoraatoreid komponentide, teenuste ja direktiivide defineerimiseks. Näiteks kasutatakse @Component dekoraatorit kasutajaliidese komponendi defineerimiseks koos selle malli, stiilide ja muude metaandmetega. See võimaldab erineva taustaga arendajatel hõlpsasti luua ja hallata keerukaid kasutajaliideseid, kasutades standardiseeritud lähenemist.

              
   @Component({
   selector: 'app-my-component',
   templateUrl: './my-component.html',
   styleUrls: ['./my-component.css']
   })
   class MyComponent {
   // Komponendi loogika siin
   }
   
              
  
                
                  Copy
                
              
            

• NestJS (Node.js raamistik, mis on inspireeritud Angularist, ülemaailmselt kasutusele võetud): NestJS kasutab dekoraatoreid kontrollerite, marsruutide ja moodulite defineerimiseks. @Controller ja @Get dekoraatoreid kasutatakse API otspunktide ja nende vastavate käsitlejate defineerimiseks. See lihtsustab skaleeritavate ja hooldatavate serveripoolsete rakenduste loomise protsessi, sõltumata arendaja geograafilisest asukohast.

              
   @Controller('users')
   class UsersController {
   @Get()
   findAll(): string {
   return 'See toiming tagastab kõik kasutajad';
   }
   }
   
              
  
                
                  Copy
                
              
            

• MobX (Olekuhalduse teek, mida kasutatakse laialdaselt Reacti rakendustes üle maailma): MobX kasutab dekoraatoreid jälgitavate omaduste ja arvutatud väärtuste defineerimiseks. @observable ja @computed dekoraatorid jälgivad automaatselt andmete muutusi ja värskendavad vastavalt kasutajaliidest. See aitab arendajatel luua tundlikke ja tõhusaid kasutajaliideseid rahvusvahelisele publikule, tagades sujuva kasutajakogemuse isegi keeruliste andmevoogude korral.

              
   class Store {
   @observable count = 0;
  
   @computed get doubledCount() {
   return this.count * 2;
   }
  
   increment() {
   this.count++;
   }
   }
   
              
  
                
                  Copy
                
              
            

Internatsionaliseerimise kaalutlused: Dekoraatorite kasutamisel ülemaailmsele sihtrühmale suunatud projektides on oluline arvestada internatsionaliseerimise (i18n) ja lokaliseerimisega (l10n). Kuigi dekoraatorid ise i18n/l10n-iga otseselt ei tegele, saab neid kasutada protsessi täiustamiseks järgmiselt:

• Metaandmete lisamine tõlkimiseks: Dekoraatoreid saab kasutada omaduste või meetodite märkimiseks, mis vajavad tõlkimist. Seda metaandmestikku saavad seejärel i18n-teegid kasutada asjakohase teksti eraldamiseks ja tõlkimiseks.
• Tõlgete dünaamiline laadimine: Dekoraatoreid saab kasutada tõlgete dünaamiliseks laadimiseks vastavalt kasutaja lokaadile. See tagab, et rakendus kuvatakse kasutaja eelistatud keeles, sõltumata tema asukohast.
• Kuupäevade ja numbrite vormindamine: Dekoraatoreid saab kasutada kuupäevade ja numbrite vormindamiseks vastavalt kasutaja lokaadile. See tagab, et kuupäevad ja numbrid kuvatakse kultuuriliselt sobivas vormingus.

Näiteks kujutage ette dekoraatorit `@Translatable`, mis märgib omaduse tõlget vajavaks. i18n-teek saaks seejärel koodibaasi skannida, leida kõik `@Translatable`-ga märgitud omadused ja eraldada teksti tõlkimiseks. Pärast tõlkimist saab teek asendada algse teksti tõlgitud versiooniga vastavalt kasutaja lokaadile. See lähenemine soodustab organiseeritumat ja hooldatavamat i18n/l10n töövoogu, eriti suurtes ja keerukates rakendustes.

Ettepaneku praegune seis ja brauseri tugi

JavaScripti dekoraatorite ettepanek on praegu TC39 standardimisprotsessis 3. etapis. See tähendab, et ettepanek on suhteliselt stabiilne ja lisatakse tõenäoliselt tulevasse ECMAScripti spetsifikatsiooni.

Kuigi dekoraatorite omatugi brauserites on veel piiratud, saab neid kasutada enamikus kaasaegsetes JavaScripti projektides, kasutades transpilaatoreid nagu Babel või TypeScripti kompilaator. Need tööriistad teisendavad dekoraatori süntaksi standardseks JavaScripti koodiks, mida saab käivitada mis tahes brauseris või Node.js keskkonnas.

Babeli kasutamine: Dekoraatorite kasutamiseks Babeliga peate installima pistikprogrammi @babel/plugin-proposal-decorators ja konfigureerima selle oma Babeli konfiguratsioonifailis (.babelrc või babel.config.js). Tõenäoliselt vajate ka pistikprogrammi @babel/plugin-proposal-class-properties.

            
 // babel.config.js
 module.exports = {
 presets: ['@babel/preset-env'],
 plugins: [
 ['@babel/plugin-proposal-decorators', { legacy: true }],
 ['@babel/plugin-proposal-class-properties', { loose: true }]
 ],
 };
 
            

              
                Copy
              
            
          

TypeScripti kasutamine: TypeScriptil on sisseehitatud tugi dekoraatoritele. Peate lubama kompilaatori valiku experimentalDecorators oma tsconfig.json failis.

            
 // tsconfig.json
 {
 "compilerOptions": {
 "target": "es5",
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,  // Valikuline, kuid kasulik sõltuvuste süstimiseks
 }
 }
 
            

              
                Copy
              
            
          

Pange tähele valikut `emitDecoratorMetadata`. See töötab koos teekidega nagu `reflect-metadata`, et võimaldada sõltuvuste süstimist dekoraatorite kaudu.

Potentsiaalne mõju ja tulevikusuunad

JavaScripti dekoraatorite ettepanekul on potentsiaal oluliselt mõjutada seda, kuidas me JavaScripti koodi kirjutame. Pakkudes deklaratiivsemat ja väljendusrikkamat viisi funktsionaalsuse lisamiseks klassidele, meetoditele ja omadustele, saavad dekoraatorid parandada koodi loetavust, hooldatavust ja taaskasutatavust.

Kuna ettepanek liigub edasi standardimisprotsessis ja kogub laiemat kasutust, võime oodata, et rohkem raamistikke ja teeke hakkab dekoraatoreid kasutama, et pakkuda intuitiivsemat ja võimsamat arendajakogemust.

Lisaks saavad dekoraatorite metaandmete võimekused avada uusi võimalusi tööriistade ja koodianalüüsi jaoks. Näiteks saavad linterid ja koodiredaktorid kasutada dekoraatori metaandmeid, et pakkuda täpsemaid ja asjakohasemaid soovitusi ning veateateid.

Kokkuvõte

JavaScripti dekoraatorid on võimas ja paljulubav funktsioon, mis võib oluliselt täiustada kaasaegset JavaScripti arendust. Mõistes nende süntaksit, võimekust ja potentsiaalseid kasutusjuhtumeid, saavad arendajad kasutada dekoraatoreid hooldatavama, loetavama ja taaskasutatavama koodi kirjutamiseks. Kuigi omatugi brauserites alles areneb, võimaldavad transpilaatorid nagu Babel ja TypeScript dekoraatoreid kasutada enamikus JavaScripti projektides juba täna. Kuna ettepanek liigub standardimise suunas ja kogub laiemat kasutust, saavad dekoraatorid tõenäoliselt JavaScripti arendaja arsenalis oluliseks tööriistaks.

Lisalugemist

• TC39 dekoraatorite ettepanek
• TypeScripti dekoraatorid
• Babeli pistikprogramm dekoraatorite ettepanekule
• reflect-metadata