JavaScript Moduļu Dekoratoru Modeļi: Uzvedības Uzlabošana

Nepārtraukti mainīgajā JavaScript izstrādes ainavā tīra, uzturējama un atkārtoti izmantojama koda rakstīšana ir ārkārtīgi svarīga. Moduļu dekoratoru modeļi piedāvā spēcīgu paņēmienu JavaScript moduļu uzvedības uzlabošanai, nemainot to galveno loģiku. Šī pieeja veicina interešu nodalīšanu, padarot jūsu kodu elastīgāku, pārbaudāmāku un vieglāk saprotamu.

Kas ir Moduļu Dekoratori?

Moduļa dekorators ir funkcija, kas kā ievadi ņem moduli (parasti funkciju vai klasi) un atgriež modificētu šī moduļa versiju. Dekorators pievieno vai modificē oriģinālā moduļa uzvedību, tieši nemainot tā pirmkodu. Tas atbilst Atvērtības/Slēgtības principam, kas nosaka, ka programmatūras entītēm (klasēm, moduļiem, funkcijām utt.) jābūt atvērtām paplašināšanai, bet slēgtām modifikācijai.

Padomājiet par to kā par papildu piedevu pievienošanu picai. Picas pamats (oriģinālais modulis) paliek nemainīgs, bet jūs esat to uzlabojis ar papildu garšām un funkcijām (dekoratora papildinājumiem).

Moduļu Dekoratoru Lietošanas Priekšrocības

• Uzlabota Koda Atkārtota Izmantošana: Dekoratorus var lietot vairākiem moduļiem, ļaujot atkārtoti izmantot uzvedības uzlabojumus visā jūsu kodu bāzē.
• Uzlabota Uzturējamība: Atdalot intereses, dekoratori atvieglo atsevišķu moduļu un to uzlabojumu sapratni, modificēšanu un testēšanu.
• Palielināta Elastība: Dekoratori nodrošina elastīgu veidu, kā pievienot vai modificēt funkcionalitāti, nemainot oriģinālā moduļa kodu.
• Atvērtības/Slēgtības Principa Ievērošana: Dekoratori ļauj paplašināt moduļu funkcionalitāti, tieši nemainot to pirmkodu, veicinot uzturējamību un samazinot kļūdu ieviešanas risku.
• Uzlabota Pārbaudāmība: Dekorētos moduļus var viegli pārbaudīt, izmantojot izspēles vai aizstājējfunkcijas dekoratoru funkcijām.

Pamatjēdzieni un Īstenošana

Būtībā moduļa dekorators ir augstākas kārtas funkcija. Tā kā argumentu ņem funkciju (vai klasi) un atgriež jaunu, modificētu funkciju (vai klasi). Galvenais ir saprast, kā manipulēt ar oriģinālo funkciju un pievienot vēlamo uzvedību.

Pamata Dekoratora Piemērs (Funkcijas Dekorators)

Sāksim ar vienkāršu piemēru, kā dekorēt funkciju, lai reģistrētu tās izpildes laiku:

            function timingDecorator(func) {
  return function(...args) {
    const start = performance.now();
    const result = func.apply(this, args);
    const end = performance.now();
    console.log(`Function ${func.name} took ${end - start}ms`);
    return result;
  };
}

function myExpensiveFunction(n) {
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += i;
  }
  return result;
}

const decoratedFunction = timingDecorator(myExpensiveFunction);

console.log(decoratedFunction(100000));

            

              
                Copy
              
            
          

Šajā piemērā timingDecorator ir dekoratora funkcija. Tā kā ievadi ņem myExpensiveFunction un atgriež jaunu funkciju, kas aptin oriģinālo funkciju. Šī jaunā funkcija mēra izpildes laiku un reģistrē to konsolē.

Klases Dekoratori (ES Dekoratoru Priekšlikums)

ECMAScript Dekoratoru priekšlikums (pašlaik 3. posmā) ievieš elegantāku sintaksi klašu un klašu locekļu dekorēšanai. Lai gan tas vēl nav pilnībā standartizēts visās JavaScript vidēs, tas gūst popularitāti un to atbalsta tādi rīki kā Babel un TypeScript.

Šeit ir klases dekoratora piemērs:

            // Requires a transpiler like Babel with the decorators plugin

function LogClass(constructor) {
  return class extends constructor {
    constructor(...args) {
      super(...args);
      console.log(`Creating a new instance of ${constructor.name}`);
    }
  };
}

@LogClass
class MyClass {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

const instance = new MyClass("Alice");
instance.greet();

            

              
                Copy
              
            
          

Šajā gadījumā @LogClass ir dekorators, kas, lietojot MyClass, uzlabo tā konstruktoru, lai reģistrētu ziņojumu ikreiz, kad tiek izveidota jauna klases instance.

Metodes Dekoratori (ES Dekoratoru Priekšlikums)

Varat arī dekorēt atsevišķas metodes klasē:

            // Requires a transpiler like Babel with the decorators plugin

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

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

class MyClass {
  constructor(name) {
    this.name = name;
  }

  @LogMethod
  add(a, b) {
    return a + b;
  }
}

const instance = new MyClass("Bob");
instance.add(5, 3);

            

              
                Copy
              
            
          

Šeit @LogMethod dekorē add metodi, reģistrējot metodei nodotos argumentus un vērtību, ko tā atgriež.

Bieži Moduļu Dekoratoru Modeļi

Moduļu dekoratorus var izmantot, lai ieviestu dažādus dizaina modeļus un pievienotu jūsu moduļiem šķērsvirziena intereses. Šeit ir daži izplatīti piemēri:

1. Reģistrēšanas Dekorators

Kā parādīts iepriekšējos piemēros, reģistrēšanas dekoratori pievieno reģistrēšanas funkcionalitāti moduļiem, nodrošinot ieskatu to uzvedībā un veiktspējā. Tas ir ārkārtīgi noderīgi lietojumprogrammu atkļūdošanai un uzraudzībai.

Piemērs: Reģistrēšanas dekorators varētu reģistrēt funkciju zvanus, argumentus, atgrieztās vērtības un izpildes laikus centrālajā reģistrēšanas pakalpojumā. Tas ir īpaši vērtīgi sadalītās sistēmās vai mikropakalpojumu arhitektūrās, kur pieprasījumu izsekošana vairākos pakalpojumos ir ļoti svarīga.

2. Kešatmiņas Dekorators

Kešatmiņas dekoratori kešatmiņā saglabā dārgu funkciju zvanu rezultātus, uzlabojot veiktspēju, samazinot nepieciešamību atkārtoti aprēķināt tās pašas vērtības.

            function cacheDecorator(func) {
  const cache = new Map();

  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log("Fetching from cache");
      return cache.get(key);
    }

    const result = func.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

function expensiveCalculation(n) {
  console.log("Performing expensive calculation");
  // Simulate a time-consuming operation
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

const cachedCalculation = cacheDecorator(expensiveCalculation);

console.log(cachedCalculation(1000));
console.log(cachedCalculation(1000)); // Fetches from cache

            

              
                Copy
              
            
          

Internacionalizācijas Piemērs: Apsveriet lietojumprogrammu, kurai jāparāda valūtas maiņas kursi. Kešatmiņas dekorators var saglabāt API zvanu rezultātus valūtas konvertēšanas pakalpojumam, samazinot veikto pieprasījumu skaitu un uzlabojot lietotāja pieredzi, īpaši lietotājiem ar lēnākiem interneta savienojumiem vai tiem, kas atrodas reģionos ar lielu latentumu.

3. Autentifikācijas Dekorators

Autentifikācijas dekoratori ierobežo piekļuvi noteiktiem moduļiem vai funkcijām, pamatojoties uz lietotāja autentifikācijas statusu. Tas palīdz nodrošināt jūsu lietojumprogrammas drošību un novērst nesankcionētu piekļuvi.

            function authenticationDecorator(func) {
  return function(...args) {
    if (isAuthenticated()) { // Replace with your authentication logic
      return func.apply(this, args);
    } else {
      console.log("Authentication required");
      return null; // Or throw an error
    }
  };
}

function isAuthenticated() {
  // Replace with your actual authentication check
  return true; // For demonstration purposes
}

function sensitiveOperation() {
  console.log("Performing sensitive operation");
}

const authenticatedOperation = authenticationDecorator(sensitiveOperation);

authenticatedOperation();

            

              
                Copy
              
            
          

Globāls Konteksts: Globālā e-komercijas platformā autentifikācijas dekoratoru varētu izmantot, lai ierobežotu piekļuvi pasūtījumu pārvaldības funkcijām tikai pilnvarotiem darbiniekiem. Funkcijai isAuthenticated() būtu jāpārbauda lietotāja lomas un atļaujas, pamatojoties uz platformas drošības modeli, kas var atšķirties atkarībā no reģionālajiem noteikumiem.

4. Validācijas Dekorators

Validācijas dekoratori validē funkcijas ievades parametrus pirms izpildes, nodrošinot datu integritāti un novēršot kļūdas.

            function validationDecorator(validator) {
  return function(func) {
    return function(...args) {
      const validationResult = validator(args);
      if (validationResult.isValid) {
        return func.apply(this, args);
      } else {
        console.error("Validation failed:", validationResult.errorMessage);
        throw new Error(validationResult.errorMessage);
      }
    };
  };
}

function createUserValidator(args) {
  const [username, email] = args;
  if (!username) {
    return { isValid: false, errorMessage: "Username is required" };
  }
  if (!email.includes("@")) {
    return { isValid: false, errorMessage: "Invalid email format" };
  }
  return { isValid: true };
}

function createUser(username, email) {
  console.log(`Creating user with username: ${username} and email: ${email}`);
}

const validatedCreateUser = validationDecorator(createUserValidator)(createUser);

validatedCreateUser("john.doe", "john.doe@example.com");
validatedCreateUser("jane", "invalid-email");

            

              
                Copy
              
            
          

Lokalizācija un Validācija: Validācijas dekoratoru varētu izmantot globālā adrešu veidlapā, lai validētu pasta indeksus, pamatojoties uz lietotāja valsti. Funkcijai validator būtu jāizmanto valstij specifiski validācijas noteikumi, kas, iespējams, iegūti no ārēja API vai konfigurācijas faila. Tas nodrošina, ka adrešu dati atbilst katra reģiona pasta prasībām.

5. Atkārtošanas Dekorators

Atkārtošanas dekoratori automātiski atkārtoti izmēģina funkcijas zvanu, ja tas neizdodas, uzlabojot jūsu lietojumprogrammas noturību, īpaši strādājot ar neuzticamiem pakalpojumiem vai tīkla savienojumiem.

            function retryDecorator(maxRetries) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Attempt ${retries + 1} failed:`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second before retrying
        }
      }
      throw new Error(`Function failed after ${maxRetries} retries`);
    };
  };
}

async function fetchData() {
  // Simulate a function that might fail
  if (Math.random() < 0.5) {
    throw new Error("Failed to fetch data");
  }
  return "Data fetched successfully!";
}

const retryFetchData = retryDecorator(3)(fetchData);

retryFetchData()
  .then(data => console.log(data))
  .catch(error => console.error("Final error:", error));

            

              
                Copy
              
            
          

Tīkla Noturība: Reģionos ar nestabiliem interneta savienojumiem atkārtošanas dekorators var būt nenovērtējams, lai nodrošinātu, ka svarīgas darbības, piemēram, pasūtījumu iesniegšana vai datu saglabāšana, galu galā izdodas. Atkārtojumu skaitam un kavējumam starp atkārtojumiem jābūt konfigurējamam, pamatojoties uz konkrēto vidi un darbības jutīgumu.

Uzlabotas Metodes

Dekoratoru Apvienošana

Dekoratorus var apvienot, lai vienam modulim lietotu vairākus uzlabojumus. Tas ļauj izveidot sarežģītu un ļoti pielāgotu uzvedību, nemainot oriģinālā moduļa kodu.

            //Requires transpilation (Babel/Typescript)
function ReadOnly(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor;
}

function Trace(target, name, descriptor) {
    const original = descriptor.value;
    descriptor.value = function (...args) {
        console.log(`TRACE: Calling ${name} with arguments: ${args}`);
        const result = original.apply(this, args);
        console.log(`TRACE: ${name} returned: ${result}`);
        return result;
    };
    return descriptor;
}

class Calculator {
    constructor(value) {
        this.value = value;
    }

    @Trace
    add(amount) {
        this.value += amount;
        return this.value;
    }

    @ReadOnly
    @Trace
    getValue() {
        return this.value;
    }
}

const calc = new Calculator(10);
calc.add(5); // Output will include TRACE messages
console.log(calc.getValue()); // Output will include TRACE messages

try{
    calc.getValue = function(){ return "hacked!"; }
} catch(e){
    console.log("Cannot overwrite ReadOnly property");
}

            

              
                Copy
              
            
          

Dekoratoru Rūpnīcas

Dekoratoru rūpnīca ir funkcija, kas atgriež dekoratoru. Tas ļauj parametrizēt savus dekoratorus un konfigurēt to uzvedību, pamatojoties uz konkrētām prasībām.

            function retryDecoratorFactory(maxRetries, delay) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Attempt ${retries + 1} failed:`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, delay));
        }
      }
      throw new Error(`Function failed after ${maxRetries} retries`);
    };
  };
}

// Use the factory to create a retry decorator with specific parameters
const retryFetchData = retryDecoratorFactory(5, 2000)(fetchData);

            

              
                Copy
              
            
          

Apsvērumi un Labākā Prakse

• Izprotiet ES Dekoratoru Priekšlikumu: Ja izmantojat ES Dekoratoru priekšlikumu, iepazīstieties ar sintaksi un semantiku. Ņemiet vērā, ka tas joprojām ir priekšlikums un nākotnē var mainīties.
• Izmantojiet Transpilatorus: Ja izmantojat ES Dekoratoru priekšlikumu, jums būs nepieciešams transpilators, piemēram, Babel vai TypeScript, lai konvertētu savu kodu pārlūkprogrammai saderīgā formātā.
• Izvairieties no Pārmērīgas Lietošanas: Lai gan dekoratori ir spēcīgi, izvairieties no to pārmērīgas lietošanas. Pārāk daudz dekoratoru var apgrūtināt jūsu koda sapratni un atkļūdošanu.
• Uzturiet Dekoratorus Koncentrētus: Katram dekoratoram jābūt vienam, labi definētam mērķim. Tas atvieglo to sapratni un atkārtotu izmantošanu.
• Pārbaudiet Savus Dekoratorus: Rūpīgi pārbaudiet savus dekoratorus, lai pārliecinātos, ka tie darbojas, kā paredzēts, un neievieš nekādas kļūdas.
• Dokumentējiet Savus Dekoratorus: Skaidri dokumentējiet savus dekoratorus, izskaidrojot to mērķi, lietojumu un iespējamās blakusparādības.
• Apsveriet Veiktspēju: Dekoratori var palielināt jūsu koda papildu izmaksas. Pievērsiet uzmanību veiktspējas sekām, īpaši dekorējot bieži izsauktas funkcijas. Izmantojiet kešatmiņas metodes, kur tas ir piemēroti.

Reālās Pasaules Piemēri

Moduļu dekoratorus var izmantot dažādos reālās pasaules scenārijos, tostarp:

• Ietvari un Bibliotēkas: Daudzi moderni JavaScript ietvari un bibliotēkas plaši izmanto dekoratorus, lai nodrošinātu tādas funkcijas kā atkarību injekcija, maršrutēšana un stāvokļa pārvaldība. Piemēram, Angular lielā mērā paļaujas uz dekoratoriem.
• API Klienti: Dekoratorus var izmantot, lai API klienta funkcijām pievienotu reģistrēšanu, kešatmiņu un autentifikāciju.
• Datu Validācija: Dekoratorus var izmantot, lai validētu datus pirms to saglabāšanas datu bāzē vai nosūtīšanas uz API.
• Notikumu Apstrāde: Dekoratorus var izmantot, lai vienkāršotu notikumu apstrādes loģiku.

Secinājums

JavaScript moduļu dekoratoru modeļi piedāvā spēcīgu un elastīgu veidu, kā uzlabot jūsu koda uzvedību, veicinot atkārtotu izmantošanu, uzturējamību un pārbaudāmību. Izprotot pamatjēdzienus un lietojot šajā rakstā aplūkotos modeļus, jūs varat rakstīt tīrākas, robustākas un mērogojamākas JavaScript lietojumprogrammas. ES Dekoratoru priekšlikumam iegūstot plašāku atzinību, šī tehnika kļūs vēl izplatītāka modernā JavaScript izstrādē. Izpētiet, eksperimentējiet un iekļaujiet šos modeļus savos projektos, lai paceltu savu kodu jaunā līmenī. Nebaidieties izveidot savus pielāgotus dekoratorus, kas pielāgoti jūsu projektu īpašajām vajadzībām.