JavaScript Modulių Dekoratorių Šablonai: Elgesio Pagerinimas

Nuolat besikeičiančioje JavaScript kūrimo aplinkoje svarbiausia yra rašyti švarų, prižiūrimą ir pakartotinai naudojamą kodą. Modulių dekoratorių šablonai siūlo galingą techniką, skirtą JavaScript modulių elgesiui pagerinti, nekeičiant pagrindinės jų logikos. Šis požiūris skatina rūpesčių atskyrimą, todėl jūsų kodas tampa lankstesnis, lengviau išbandomas ir suprantamas.

Kas yra Modulių Dekoratoriai?

Modulio dekoratorius yra funkcija, kuri priima modulį (paprastai funkciją arba klasę) kaip įvestį ir grąžina modifikuotą to modulio versiją. Dekoratorius prideda arba modifikuoja originalaus modulio elgesį tiesiogiai nekeisdamas jo pirminio kodo. Tai atitinka Atvirumo/Uždarumo principą, kuris teigia, kad programinės įrangos subjektai (klasės, moduliai, funkcijos ir t. t.) turėtų būti atviri plėtimui, bet uždari modifikavimui.

Pagalvokite apie tai kaip apie papildomų priedų pridėjimą prie picos. Pagrindinė pica (originalus modulis) išlieka tokia pati, bet jūs ją patobulinote su papildomais skoniais ir funkcijomis (dekoratoriaus priedais).

Modulių Dekoratorių Naudojimo Privalumai

• Pagerintas Kodo Pakartotinis Naudojimas: Dekoratoriai gali būti taikomi keliems moduliams, leidžiant pakartotinai naudoti elgesio patobulinimus visoje kodo bazėje.
• Pagerintas Prižiūrimumas: Atskiriant rūpesčius, dekoratoriai leidžia lengviau suprasti, modifikuoti ir išbandyti atskirus modulius ir jų patobulinimus.
• Padidėjęs Lankstumas: Dekoratoriai suteikia lankstų būdą pridėti arba modifikuoti funkcionalumą nekeičiant originalaus modulio kodo.
• Atvirumo/Uždarumo Principo Laikymasis: Dekoratoriai leidžia išplėsti modulių funkcionalumą tiesiogiai nekeičiant jų pirminio kodo, skatinant prižiūrimumą ir mažinant klaidų atsiradimo riziką.
• Pagerintas Bandymų Atlikimas: Dekoratorių modulius galima lengvai išbandyti simuliuojant arba užblokuojant dekoratoriaus funkcijas.

Pagrindinės Koncepcijos ir Įgyvendinimas

Iš esmės modulio dekoratorius yra aukštesnio lygio funkcija. Jis priima funkciją (arba klasę) kaip argumentą ir grąžina naują, modifikuotą funkciją (arba klasę). Svarbiausia yra suprasti, kaip manipuliuoti originalia funkcija ir pridėti norimą elgesį.

Pagrindinis Dekoratoriaus Pavyzdys (Funkcijos Dekoratorius)

Pradėkime nuo paprasto funkcijos dekoravimo pavyzdžio, kad būtų galima registruoti jos vykdymo laiką:

            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
              
            
          

Šiame pavyzdyje timingDecorator yra dekoratoriaus funkcija. Ji priima myExpensiveFunction kaip įvestį ir grąžina naują funkciją, kuri apgaubia originalią funkciją. Ši nauja funkcija matuoja vykdymo laiką ir registruoja jį konsolėje.

Klasių Dekoratoriai (ES Dekoratorių Pasiūlymas)

ECMAScript Dekoratorių pasiūlymas (šiuo metu 3-ioje stadijoje) pristato elegantiškesnę sintaksę klasėms ir klasių nariams dekoruoti. Nors dar nėra visiškai standartizuotas visose JavaScript aplinkose, jis įgauna pagreitį ir yra palaikomas tokių įrankių kaip Babel ir TypeScript.

Štai klasės dekoratoriaus pavyzdys:

            // 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
              
            
          

Šiuo atveju @LogClass yra dekoratorius, kuris, pritaikytas MyClass, patobulina jo konstruktorių, kad būtų registruojamas pranešimas, kai tik sukuriama nauja klasės instancija.

Metodų Dekoratoriai (ES Dekoratorių Pasiūlymas)

Taip pat galite dekoruoti atskirus metodus klasėje:

            // 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
              
            
          

Čia @LogMethod dekoruoja add metodą, registruodamas argumentus, perduotus metodui, ir reikšmę, kurią jis grąžina.

Dažni Modulių Dekoratorių Šablonai

Modulių dekoratoriai gali būti naudojami įvairiems projektavimo šablonams įgyvendinti ir į jūsų modulius įtraukti įvairias problemas. Štai keletas dažniausių pavyzdžių:

1. Registravimo Dekoratorius

Kaip parodyta ankstesniuose pavyzdžiuose, registravimo dekoratoriai prideda registravimo funkcijas prie modulių, suteikdami įžvalgų apie jų elgesį ir našumą. Tai labai naudinga derinant ir stebint programas.

Pavyzdys: Registravimo dekoratorius galėtų registruoti funkcijų iškvietimus, argumentus, grąžinamas reikšmes ir vykdymo trukmę į centrinę registravimo tarnybą. Tai ypač vertinga paskirstytose sistemose arba mikroservisų architektūrose, kur svarbu atsekti užklausas per kelias tarnybas.

2. Talpyklos Dekoratorius

Talpyklos dekoratoriai talpina brangių funkcijų iškvietimų rezultatus, pagerindami našumą, sumažindami poreikį pakartotinai apskaičiuoti tas pačias reikšmes.

            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
              
            
          

Internacionalizavimo Pavyzdys: Įsivaizduokite programą, kurioje reikia rodyti valiutų keitimo kursus. Talpyklos dekoratorius gali saugoti API iškvietimų rezultatus į valiutos konvertavimo tarnybą, sumažindamas užklausų skaičių ir pagerindamas vartotojo patirtį, ypač vartotojams, turintiems lėtesnį interneto ryšį arba esantiems regionuose, kuriuose didelis latentinis laikotarpis.

3. Autentifikavimo Dekoratorius

Autentifikavimo dekoratoriai apriboja prieigą prie tam tikrų modulių ar funkcijų, atsižvelgiant į vartotojo autentifikavimo būseną. Tai padeda apsaugoti jūsų programą ir užkirsti kelią neteisėtai prieigai.

            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
              
            
          

Globalus Kontekstas: Globalioje el. komercijos platformoje autentifikavimo dekoratorius galėtų būti naudojamas apriboti prieigą prie užsakymų valdymo funkcijų tik įgaliotiems darbuotojams. isAuthenticated() funkcija turėtų patikrinti vartotojo vaidmenis ir leidimus, atsižvelgiant į platformos saugos modelį, kuris gali skirtis priklausomai nuo regioninių taisyklių.

4. Validavimo Dekoratorius

Validavimo dekoratoriai patvirtina funkcijos įvesties parametrus prieš vykdymą, užtikrindami duomenų vientisumą ir išvengdami klaidų.

            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
              
            
          

Lokalizavimas ir Validavimas: Validavimo dekoratorius galėtų būti naudojamas globalioje adreso formoje, kad būtų patvirtinti pašto kodai pagal vartotojo šalį. validator funkcija turėtų naudoti konkrečios šalies validavimo taisykles, kurios galėtų būti gaunamos iš išorinės API arba konfigūracijos failo. Tai užtikrina, kad adreso duomenys atitiktų kiekvieno regiono pašto reikalavimus.

5. Pakartotinio Bandymo Dekoratorius

Pakartotinio bandymo dekoratoriai automatiškai pakartoja funkcijos iškvietimą, jei jis nepavyksta, pagerindami jūsų programos atsparumą, ypač kai dirbate su nepatikimomis tarnybomis arba tinklo ryšiais.

            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
              
            
          

Tinklo Atsparumas: Regionuose su nestabiliu interneto ryšiu pakartotinio bandymo dekoratorius gali būti neįkainojamas užtikrinant, kad kritinės operacijos, tokios kaip užsakymų pateikimas arba duomenų įrašymas, galiausiai pavyktų. Pakartotinių bandymų skaičius ir delsa tarp pakartotinių bandymų turėtų būti konfigūruojami atsižvelgiant į konkrečią aplinką ir operacijos jautrumą.

Pažangios Technikos

Dekoratorių Derinimas

Dekoratorius galima derinti, norint pritaikyti kelis patobulinimus vienam moduliui. Tai leidžia sukurti sudėtingą ir labai pritaikytą elgesį nekeičiant originalaus modulio kodo.

            //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
              
            
          

Dekoratoriaus Fabrikai

Dekoratoriaus fabrikas yra funkcija, kuri grąžina dekoratorių. Tai leidžia jums parametrizuoti dekoratorius ir konfigūruoti jų elgesį pagal konkrečius reikalavimus.

            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
              
            
          

Apsvarstymai ir Geriausia Praktika

• Supraskite ES Dekoratorių Pasiūlymą: Jei naudojate ES Dekoratorių pasiūlymą, susipažinkite su sintaksė ir semantika. Atminkite, kad tai vis dar yra pasiūlymas ir ateityje gali keistis.
• Naudokite Transpiliatorius: Jei naudojate ES Dekoratorių pasiūlymą, jums reikės transpiliatoriaus, tokio kaip Babel arba TypeScript, kad konvertuotumėte savo kodą į naršyklėje suderinamą formatą.
• Neviršykite Naudojimo: Nors dekoratoriai yra galingi, venkite jų per daug naudoti. Per daug dekoratorių gali padaryti jūsų kodą sunkiai suprantamą ir derinamą.
• Laikykite Dekoratorius Sutelktus: Kiekvienas dekoratorius turėtų turėti vieną, aiškiai apibrėžtą tikslą. Tai leidžia lengviau suprasti ir pakartotinai naudoti.
• Išbandykite Savo Dekoratorius: Kruopščiai išbandykite savo dekoratorius, kad įsitikintumėte, jog jie veikia taip, kaip tikėtasi, ir neįveda jokių klaidų.
• Dokumentuokite Savo Dekoratorius: Aiškiai dokumentuokite savo dekoratorius, paaiškindami jų tikslą, naudojimą ir bet kokį galimą šalutinį poveikį.
• Apsvarstykite Našumą: Dekoratoriai gali padidinti jūsų kodo našumą. Atminkite apie našumo pasekmes, ypač kai dekoruojate dažnai iškviečiamas funkcijas. Naudokite talpinimo metodus, kur tinka.

Realaus Pasaulio Pavyzdžiai

Modulių dekoratorius galima pritaikyti įvairiuose realaus pasaulio scenarijuose, įskaitant:

• Sistemos ir Bibliotekos: Daugelis šiuolaikinių JavaScript sistemų ir bibliotekų plačiai naudoja dekoratorius, kad suteiktų tokias funkcijas kaip priklausomybių įdiegimas, maršrutizavimas ir būsenos valdymas. Pavyzdžiui, Angular labai priklauso nuo dekoratorių.
• API Klientai: Dekoratorius galima naudoti norint pridėti registravimą, talpinimą ir autentifikavimą prie API kliento funkcijų.
• Duomenų Validavimas: Dekoratorius galima naudoti norint patvirtinti duomenis prieš juos įrašant į duomenų bazę arba siunčiant į API.
• Įvykių Apdorojimas: Dekoratorius galima naudoti norint supaprastinti įvykių apdorojimo logiką.

Išvada

JavaScript modulių dekoratorių šablonai siūlo galingą ir lankstų būdą pagerinti jūsų kodo elgesį, skatinant pakartotinį naudojimą, prižiūrimumą ir išbandymą. Suprasdami pagrindines sąvokas ir taikydami šiame straipsnyje aptartus šablonus, galite rašyti švaresnes, tvirtesnes ir labiau keičiamas JavaScript programas. ES Dekoratorių pasiūlymui vis labiau įsitvirtinant, ši technika taps dar labiau paplitusi šiuolaikiniame JavaScript kūrime. Naršykite, eksperimentuokite ir įtraukite šiuos šablonus į savo projektus, kad pakeltumėte savo kodą į kitą lygį. Nebijokite kurti savo pasirinktinių dekoratorių, pritaikytų konkretiems jūsų projektų poreikiams.