Mador – 80 satrlik Proxy asosidagi reaktiv DOM kutubxonasi

Mador - JavaScript muhitida DOMni tez va samarali reaktiv qilishga mo‘ljallangan, 80 satrga yaqin koddan iborat kutubxona. U framework yoki virtual DOM talab qilmaydigan sahifalar uchun ideal yechim bo‘lib, rasmiy repozitoriyda ochiq manba sifatida taqdim etilgan.

Kontekst va yaratilish sabablari

Ko‘pgina zamonaviy veb‑ilovalar React, Vue yoki Svelte kabi yirik frameworklarga tayanadi. Biroq, ba’zi sahifalar faqat bir necha interaktiv elementga ega bo‘lib, to‘liq frameworkni qo‘shish ortiqcha yuk bo‘lishi mumkin. Mador aynan shu “yengil” ehtiyojlarga javob beradi: mavjud HTML‑ni o‘zgartirmasdan, kichik JavaScript kod bilan elementlarni dinamik yangilash imkonini beradi.

import mador from "https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js";

const [r, w] = mador({
  count: 1,
});

r(
  ".counter",
  (el, count) => {
    el.textContent = `Count: ${count}`;
  },
  (state) => state.count,
);

r(
  ".another-counter",
  (el, count) => {
    el.textContent = count * 3;
  },
  (state) => state.count,
);

w((state) => {
  state.count++;
});

Texnik arxitektura

Mador ES module sifatida taqdim etiladi va import mador from "https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js" kabi CDN yoki npm orqali ishlatiladi. Asosiy API ikki funksiyadan iborat:

• r(selector, update, read) – reaktiv bog‘lanishni yaratadi.
• w(callback) – holat (state)ni o‘zgartiradi.

r funksiyasi uchta parametr oladi:

r(selector, update, read);

• selector – yangilanishi kerak bo‘lgan elementlarni tanlaydi (CSS‑selektor).
• update – har bir element va o‘qilgan qiymatga asoslanib DOMni yangilovchi funksiya.
• read – holatdan qaysi qiymatni o‘qish kerakligini belgilovchi funksiyani qabul qiladi.

Bu struktura orqali Mador dependency tracking (bog‘lanish kuzatuvi)ni amalga oshiradi: read funksiyasi ichida o‘qilgan xususiyatlar avtomatik ravishda kuzatiladi, va faqat shu xususiyatlar o‘zgarganda update qayta ishga tushadi.

Yozish (write) mexanizmi

Holatni o‘zgartirish w funksiyasi orqali amalga oshiriladi. Bu funksiya ichida foydalanuvchi holat obyektini to‘g‘ridan‑to‘g‘ri o‘zgartiradi:

r(
  ".counter",
  (el, count) => {
    el.textContent = count * 2;
  },
  (state) => state.count,
);

w(state => { state.count++; });

Yozuvlar batch (to‘plam) shaklida bajariladi, ya’ni bir nechta o‘zgarish bir vaqtning o‘zida qayta hisoblanadi, bu esa render overheadini kamaytiradi.

Taqqoslash: Mador va boshqa yengil kutubxonalar

Bozorida htmx, Alpine.js yoki Stimulus kabi yengil reaktiv kutubxonalar mavjud. Ularning har biri o‘ziga xos yondashuvga ega:

w((state) => {
  state.count++;
});

• Alpine.js – deklarativ atributlar (x‑) orqali DOMni boshqaradi, lekin har bir komponent uchun alohida init kodini talab qiladi.
• htmx – server‑tomonidan HTML fragmentlarini dinamik yuklashga yo‘naltirilgan, lekin ichki holatni kuzatish imkoniyati cheklangan.
• Stimulus – klassik MVC uslubida controller‑lar orqali DOMni boshqaradi, lekin proxy asosidagi avtomatik bog‘lanish yo‘q.

Mador esa proxy orqali o‘qilgan xususiyatlarni avtomatik aniqlaydi, komponent yoki template konseptsiyasini yo‘q qiladi, va faqat kerakli elementlarni yangilaydi. Bu yondashuv kodni minimal darajada saqlashga imkon beradi.

Cheklovlar va ochiq savollar

Yengil bo‘lishi ba’zi funksional cheklovlarni ham olib keladi:

import mador from "mador";

• Komponent hayotiy sikli (mount/unmount) avtomatik boshqarilmaydi; foydalanuvchi element o‘chirilganda bog‘lanishni qo‘lda tozalash kerak bo‘lishi mumkin.
• Virtual DOM yoki diff algoritmi yo‘q, shuning uchun katta ro‘yxatlarda yoki murakkab UIda qo‘lda optimallashtirish talab qilinadi.
• Foydalanish faqat Proxy qo‘llab‑quvvatlaydigan brauzerlarga cheklangan; eski IE versiyalari ishlamaydi.

Kelajakda SSR (server‑side rendering) integratsiyasi yoki TypeScript tiplarini avtomatik yaratish kabi qo‘shimchalar foydalanuvchi bazasini kengaytirishi mumkin.

Amaliy ta’siri va kimga mo‘ljallangan

Mador asosan quyidagi guruhlar uchun foydali:

• Statik saytlar (Jekyll, Hugo) sahifalariga kichik interaktivlik qo‘shmoqchi bo‘lgan front‑end ishlab chiquvchilar.
• Prototip yaratishda tezkor UI elementlarini sinashni istagan dizayner‑developerlar.
• Yirik frameworkni o‘rnatishdan qochib, sahifani yengil saqlashni afzal ko‘rganlar.

Shuningdek, Mador MIT litsenziyasi ostida bo‘lgani uchun korporativ loyihalarda ham erkin qo‘llanilishi mumkin.

Xulosa

Mador – 855 bayt (minifikatsiyalangan) hajmda, komponent, template yoki virtual DOMga ehtiyoj sezmaydigan sahifalar uchun qulay, proxy‑asosan reaktivlikni ta’minlaydigan kutubxona. U kodni qisqartiradi, yozuvlarni batch qiladi va faqat kerakli DOM elementlarini yangilaydi. Kichik loyihalar, prototiplar va yengil interaktiv sahifalar uchun ajoyib tanlov bo‘lsa-da, murakkab UI yoki eski brauzerlar uchun qo‘shimcha yechimlar talab qilinadi.

Asl manba: github.com