Zamonaviy veb-ishlanmalarda funksionallikni oshirish, kodni qayta ishlatish va parvarishlashni yaxshilash uchun ilg'or JavaScript modul dekorator namunalari bilan tanishing.
JavaScript Modul Dekorator Namunalari: Xulq-atvorni Takomillashtirish
JavaScript ishlanmalarining doimo rivojlanib borayotgan landshaftida toza, parvarishlanadigan va qayta ishlatiladigan kodni yozish ustuvor ahamiyatga ega. Modul dekorator namunalari JavaScript modullarining asosiy logikasini o'zgartirmasdan ularning xulq-atvorini yaxshilash uchun kuchli usulni taklif etadi. Ushbu yondashuv vazifalarni ajratishni rag'batlantiradi, bu esa kodni yanada moslashuvchan, sinovdan o'tkaziladigan va tushunish osonroq bo'lishini ta'minlaydi.
Modul Dekoratorlari Nima?
Modul dekoratori — bu modulni (odatda funksiya yoki sinf) kirish sifatida qabul qiladigan va ushbu modulning o'zgartirilgan versiyasini qaytaradigan funksiyadir. Dekorator asl modulning manba kodini to'g'ridan-to'g'ri o'zgartirmasdan uning xulq-atvorini qo'shadi yoki o'zgartiradi. Bu "Ochiq/Yopiq Tamoyili" ga rioya qiladi, ya'ni dasturiy ob'ektlar (sinflar, modullar, funksiyalar va boshqalar) kengaytirish uchun ochiq, ammo o'zgartirish uchun yopiq bo'lishi kerak.
Buni pitsaga qo'shimcha souslar qo'shishga o'xshating. Asosiy pitsa (asl modul) o'zgarishsiz qoladi, lekin siz uni qo'shimcha lazzatlar va xususiyatlar (dekoratorning qo'shimchalari) bilan boyitgansiz.
Modul Dekoratorlaridan Foydalanishning Afzalliklari
- Kodni Qayta Ishlatishni Yaxshilash: Dekoratorlar bir nechta modullarga qo'llanilishi mumkin, bu sizga kod bazasi bo'ylab xulq-atvorni takomillashtirishni qayta ishlatishga imkon beradi.
- Parvarishlashni Kuchaytirish: Vazifalarni ajratish orqali dekoratorlar individual modullar va ularning takomillashtirishlarini tushunish, o'zgartirish va sinovdan o'tkazishni osonlashtiradi.
- Moslashuvchanlikni Oshirish: Dekoratorlar asl modul kodini o'zgartirmasdan funksionallikni qo'shish yoki o'zgartirishning moslashuvchan usulini taqdim etadi.
- Ochiq/Yopiq Tamoyiliga Rioya Qilish: Dekoratorlar sizga modullarning manba kodini to'g'ridan-to'g'ri o'zgartirmasdan funksionalligini kengaytirishga imkon beradi, bu esa parvarishlashni rag'batlantiradi va xatoliklarni kiritish xavfini kamaytiradi.
- Sinovdan O'tkazishni Yaxshilash: Dekoratsiyalangan modullar dekorator funksiyalarini maketlash yoki stublash orqali osongina sinovdan o'tkazilishi mumkin.
Asosiy Tushunchalar va Amalga Oshirish
Asosida, modul dekoratori yuqori tartibli funksiyadir. U funksiyani (yoki sinfni) argument sifatida qabul qiladi va yangi, o'zgartirilgan funksiyani (yoki sinfni) qaytaradi. Kalit — asl funksiyani manipulyatsiya qilish va kerakli xulq-atvorni qo'shishni tushunishdir.
Asosiy Dekorator Namunasi (Funksiya Dekoratori)
Keling, funksiyaning bajarilish vaqtini qayd etish uchun uni bezashning oddiy misolidan boshlaylik:
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));
Ushbu misolda, timingDecorator dekorator funksiyasidir. U myExpensiveFunction ni kirish sifatida oladi va asl funksiyani o'rab turgan yangi funksiyani qaytaradi. Ushbu yangi funksiya bajarilish vaqtini o'lchaydi va uni konsolga qayd etadi.
Sinf Dekoratorlari (ES Dekoratorlar Taklifi)
ECMAScript Dekoratorlar taklifi (hozirda 3-bosqichda) sinflar va sinf a'zolarini bezash uchun yanada oqlangan sintaksisni joriy etadi. Har qanday JavaScript muhitida hali to'liq standartlashtirilmagan bo'lsa-da, u mashhurlik kasb etmoqda va Babel va TypeScript kabi vositalar tomonidan qo'llab-quvvatlanadi.
Mana sinf dekoratori misoli:
// Babel kabi transpilyator va dekoratorlar plaginini talab qiladi
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();
Bu holda, @LogClass — bu MyClass ga qo'llanilganda, sinfning yangi namunasi yaratilganda xabarni qayd etadigan dekoratordir.
Metod Dekoratorlari (ES Dekoratorlar Taklifi)
Sinfdagi alohida metodlarni ham bezashingiz mumkin:
// Babel kabi transpilyator va dekoratorlar plaginini talab qiladi
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);
Bu yerda @LogMethod add metodini bezaydi, metodga uzatilgan argumentlarni va u qaytargan qiymatni qayd etadi.
Umumiy Modul Dekorator Namunalari
Modul dekoratorlari turli xil dizayn namunalari va modullarga ko'p qirrali xususiyatlarni qo'shish uchun ishlatilishi mumkin. Mana bir nechta umumiy misollar:
1. Qayd Etuvchi Dekorator
Oldingi misollarda ko'rsatilganidek, qayd etuvchi dekoratorlar modullarga qayd etish funksionalligini qo'shadi, ularning xulq-atvori va ishlashi haqida ma'lumot beradi. Bu xatolarni tuzatish va ilovalarni kuzatish uchun juda foydali.
Misol: Qayd etuvchi dekorator funksiya chaqiruvlari, argumentlar, qaytish qiymatlari va bajarilish vaqtlarini markaziy qayd etish xizmatiga yozishi mumkin. Bu, ayniqsa, tarqatilgan tizimlar yoki mikroservis arxitekturalarida, bir nechta xizmatlar bo'ylab so'rovlarni kuzatish muhim bo'lgan joylarda qimmatlidir.
2. Kesh Dekori
Kesh dekoratorlari qimmatbaho funksiya chaqiruvlarining natijalarini keshlaydi, bir xil qiymatlarni takroran hisoblash zaruriyatini kamaytirish orqali ishlashni yaxshilaydi.
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");
// Vaqt talab qiladigan operatsiyani simulyatsiya qilish
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)); // Keshdan olinadi
Xalqaro Tizimlashtirish Misoli: Valyuta kursi kurslarini namoyish etishi kerak bo'lgan ilovani ko'rib chiqing. Keshlovchi dekorator valyuta konvertatsiya xizmatiga API chaqiruvlari natijalarini saqlashi mumkin, bu esa qilingan chaqiruvlar sonini kamaytiradi va foydalanuvchi tajribasini yaxshilaydi, ayniqsa sekin internet aloqasiga ega foydalanuvchilar yoki yuqori kechikishli mintaqalarda.
3. Autentifikatsiya Dekori
Autentifikatsiya dekoratorlari foydalanuvchi autentifikatsiya holatiga qarab ma'lum modullarga yoki funksiyalarga kirishni cheklaydi. Bu sizning ilovangizni himoya qilishga va ruxsat etilmagan kirishni oldini olishga yordam beradi.
function authenticationDecorator(func) {
return function(...args) {
if (isAuthenticated()) { // Sizning autentifikatsiya logikangiz bilan almashtiring
return func.apply(this, args);
} else {
console.log("Authentication required");
return null; // Yoki xatolikni keltirib chiqarish
}
};
}
function isAuthenticated() {
// Haqiqiy autentifikatsiya tekshiruvini almashtiring
return true; // Ko'rsatuv maqsadlarida
}
function sensitiveOperation() {
console.log("Performing sensitive operation");
}
const authenticatedOperation = authenticationDecorator(sensitiveOperation);
authenticatedOperation();
Global Konteks: Global elektron tijorat platformasida, autentifikatsiya dekoratori buyurtmalarni boshqarish funksiyalariga faqat vakolatli xodimlarning kirishini cheklash uchun ishlatilishi mumkin. isAuthenticated() funksiyasi foydalanuvchi rollari va ruxsatlarini platformaning xavfsizlik modeliga asoslangan holda tekshirishi kerak bo'ladi, bu mintaqaviy qoidalarga qarab farq qilishi mumkin.
4. Validatsiya Dekori
Validatsiya dekoratorlari ma'lumotlar yaxlitligini ta'minlash va xatolarni oldini olish uchun funksiyalarning kirish parametrlarini bajarilishidan oldin tekshiradi.
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");
Mahalliylashtirish va Validatsiya: Validatsiya dekoratori global manzil formasida pochta kodlarini foydalanuvchi mamlakatiga qarab tekshirish uchun ishlatilishi mumkin. validator funksiyasi mamlakatga xos validatsiya qoidalaridan foydalanishi kerak, ehtimol tashqi API yoki konfiguratsiya faylidan olingan. Bu manzil ma'lumotlari har bir mintaqaning pochta talablariga mos kelishini ta'minlaydi.
5. Qayta Urunish Dekori
Qayta urunish dekoratorlari funksiya chaqiruvi bajarilmasa, uni avtomatik ravishda qayta urunadi, bu esa dasturingizning chidamliligini oshiradi, ayniqsa ishonchsiz xizmatlar yoki tarmoq ulanishlari bilan ishlashda.
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)); // Qayta urunishdan oldin 1 soniya kutib turing
}
}
throw new Error(`Function failed after ${maxRetries} retries`);
};
};
}
async function fetchData() {
// Muammoga duch kelishi mumkin bo'lgan funksiyani simulyatsiya qilish
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));
Tarmoq Chidamliligi: Barqaror bo'lmagan internet aloqalariga ega mintaqalarda, qayta urunish dekoratori buyurtmalarni topshirish yoki ma'lumotlarni saqlash kabi muhim operatsiyalarning oxir-oqibat muvaffaqiyatli bo'lishini ta'minlash uchun juda qimmatli bo'lishi mumkin. Qayta urunishlar soni va qayta urunishlar orasidagi kechikish ma'lum bir muhit va operatsiyaning sezgirligiga qarab sozlanishi kerak.
Ilg'or Usullar
Dekoratorlarni Birlashtirish
Bir modullarga bir nechta takomillashtirishlarni qo'llash uchun dekoratorlarni birlashtirish mumkin. Bu sizga asl modul kodini o'zgartirmasdan murakkab va yuqori darajada sozlashtirilgan xulq-atvorni yaratishga imkon beradi.
// Transpilyatsiyani talab qiladi (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); // Chiqish TRACE xabarlarini o'z ichiga oladi
console.log(calc.getValue()); // Chiqish TRACE xabarlarini o'z ichiga oladi
try{
calc.getValue = function(){ return "hacked!"; }
} catch(e){
console.log("Cannot overwrite ReadOnly property");
}
Dekorator Fabrikalari
Dekorator fabrikasi — bu dekoratorni qaytaradigan funksiyadir. Bu sizga dekoratorlaringizni parametrlashtirishga va ularning xulq-atvorini ma'lum talablarga asoslangan holda sozlashga imkon beradi.
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`);
};
};
}
// Maxsus parametrlar bilan qayta urunish dekoratorini yaratish uchun fabrikadan foydalaning
const retryFetchData = retryDecoratorFactory(5, 2000)(fetchData);
Ko'rib Chiqishlar va Eng Yaxshi Amaliyotlar
- ES Dekoratorlar Taklifini Tushuning: Agar siz ES Dekoratorlar taklifidan foydalansangiz, sintaksis va semantikasi bilan tanishing. U hali ham taklif ekanligini va kelajakda o'zgarishi mumkinligini unutmang.
- Transpilyatorlardan Foydalaning: Agar siz ES Dekoratorlar taklifidan foydalansangiz, kodni brauzerda ishlatiladigan formatga aylantirish uchun Babel yoki TypeScript kabi transpilyatordan foydalanishingiz kerak bo'ladi.
- Ortiqcha Foydalanishdan saqlaning: Dekoratorlar kuchli bo'lsa-da, ulardan ortiqcha foydalanishdan saqlaning. Juda ko'p dekoratorlar kodni tushunish va xatolarni tuzatishni qiyinlashtirishi mumkin.
- Dekoratorlarni Fokuslangan Holda Saqlang: Har bir dekorator bitta, aniq belgilangan maqsadga ega bo'lishi kerak. Bu ularni tushunish va qayta ishlatishni osonlashtiradi.
- Dekoratorlaringizni Sinovdan O'tkazing: Ular kutilganidek ishlayotganligiga va hech qanday xatoliklarni kiritmayotganligiga ishonch hosil qilish uchun dekoratorlaringizni to'liq sinovdan o'tkazing.
- Dekoratorlaringizni Hujjatlang: Dekoratorlaringizni aniq hujjatlang, ularning maqsadini, foydalanishini va istalgan yon ta'sirlarini tushuntiring.
- Ishlashni Ko'rib Chiqing: Dekoratorlar kodga qo'shimcha yuk qo'shishi mumkin. Ishlashni hisobga oling, ayniqsa tez-tez chaqiriladigan funksiyalarni bezashda. Zarur bo'lganda kesh usullaridan foydalaning.
Haqiqiy Dunyo Misollari
Modul dekoratorlari turli xil haqiqiy dunyo stsenariylarida qo'llanilishi mumkin, jumladan:
- Fremvorklar va Kutubxonalar: Ko'pgina zamonaviy JavaScript fremvorklari va kutubxonalari qaramliklarni kiritish, marshrutlash va holatni boshqarish kabi xususiyatlarni taqdim etish uchun dekoratorlardan keng foydalanadi. Masalan, Angular dekoratorlarga katta tayangan.
- API Mijozlari: Dekoratorlar API mijoz funksiyalariga qayd etish, keshni saqlash va autentifikatsiyani qo'shish uchun ishlatilishi mumkin.
- Ma'lumotlarni Validatsiya Qilish: Dekoratorlar ma'lumotlar bazasiga saqlashdan yoki API ga yuborishdan oldin ma'lumotlarni tekshirish uchun ishlatilishi mumkin.
- Hodisa Yaratish: Dekoratorlar hodisa yaratish logikasini soddalashtirish uchun ishlatilishi mumkin.
Xulosa
JavaScript modul dekorator namunalari kod xulq-atvorini yaxshilashning kuchli va moslashuvchan usulini taklif etadi, bu esa qayta ishlatish, parvarishlash va sinovdan o'tkazishni rag'batlantiradi. Ushbu maqolada muhokama qilingan asosiy tushunchalarni tushunish va namunalarni qo'llash orqali siz toza, yanada mustahkam va yanada kengayadigan JavaScript ilovalarini yozishingiz mumkin. ES Dekoratorlar taklifi kengroq qabul qilinayotganligi sababli, bu usul zamonaviy JavaScript ishlanmalarida yanada keng tarqalgan bo'ladi. Ushbu namunalarni loyihalaringizga kiritish orqali o'rganing, tajriba qiling va kodlaringizni keyingi bosqichga olib chiqing. Loyihalaringizning o'ziga xos ehtiyojlariga moslashtirilgan o'zining maxsus dekoratorlarini yaratishdan qo'rqmang.