‏۹ باری که کتابخانه‌ها مسیر وب را عوض کردند

پلتفرم وب بیشتر APIهای خوبش رو خودش اختراع نکرده — فقط بهشون رسیده. کتابخانه‌ها اون R&D اولیه رو توی محیط واقعی انجام دادن؛ هزاران توسعه‌دهنده روشون کار کردن، باگ گزارش دادن، ایترِیت کردن، و الگوهایی که جون سخت بودن در نهایت بخشی از پلتفرم خود مرورگر شدن. این یه نگاه به تبارشناسی چند تا از APIهایی‌ه که احتمالاً هر روز باهاشون سروکار داری.

querySelector و querySelectorAll — قبل از اینا، پیدا کردن عناصر DOM یعنی ترکیبی از getElementById، getElementsByClassName و getElementsByTagName و بعد پیاده‌روی توی .children. Dojo اول این ایده رو آورد، بعد jQuery با $() و موتور Sizzle پشتش، این مدل ذهنی رو برای یه نسل کامل از توسعه‌دهنده‌ها عادی کرد. مرورگرها بعداً نسخه بومی خودشون رو شیپ کردن:

const button = document.querySelector(".buy-now");
const allButtons = document.querySelectorAll(".buy-now");
allButtons.forEach((btn) => {
  console.log(btn.textContent);
});

querySelector اولین تطابق رو برمی‌گردونه و querySelectorAll یه NodeList از همه موارد منطبق.

رابط کاربری اعلانی با popovertarget و command — این دو اتریبیوت به جای جاوااسکریپت از HTML استفاده می‌کنن. قبلاً برای وصل کردن یه دکمه به یه مودال باید یه addEventListener می‌نوشتی و classList رو دستی مدیریت می‌کردی. Bootstrap این الگوی تکراری رو با اتریبیوت‌های data-* حل کرد و پلاگین jQuery‌ش بقیه کار رو می‌کرد. پلتفرم وب دقیقاً همین ایده رو بدون نیاز به کتابخانه جذب کرد. عناصر هدف این اتریبیوت‌ها، مثل popover و ``، رفتارهای دسترسی‌پذیری داخلی هم دارن: مدیریت فوکوس، بستن با Escape و light-dismiss — چیزی که قبلاً باید دستی پیاده‌سازی می‌شد.

classList — قبل از این، کلاس‌های CSS رو از طریق className به‌صورت یه رشته جداشده با فاصله مدیریت می‌کردی. اضافه کردن، حذف یا چک کردن کلاس‌ها پر از اشتباهات ریز بود. jQuery با .addClass()، .removeClass()، .toggleClass() و .hasClass() این مشکل رو حل کرد. مرورگرها نسخه خودشون رو زیر classList شیپ کردن:

const button = document.querySelector(".buy-now");
button.classList.add("is-loading");
button.classList.remove("is-disabled");
button.classList.toggle("is-active");
button.classList.contains("is-loading"); // boolean
button.classList.replace("is-loading", "is-success");

یه نکته ظریف: نام کلاس رو بدون نقطه پیشوندی می‌نویسی — این یه اشتباه رایج اول کاره.

متدهای کمکی روی رشته و آرایه — یه دسته کامل از متدهای کوچیک مستقیم از Underscore، Lodash، MooTools و Prototype.js اومدن. اونقدر توی هر کدبیس رایج بودن که استانداردسازیشون دیر شده بود. متدهایی مثل String.prototype.startsWith، endsWith، includes، padStart، padEnd، Array.prototype.flat (از _.flatten لاداش) و flatMap همه قبلاً یه خط npm install بودن.

نکته‌ی جالب اینه که این سیکل هنوز هم در جریانه. کتابخانه‌ها و فریم‌ورک‌های امروزی دارن ایده‌هایی رو آزمایش می‌کنن که احتمالاً چند سال دیگه توی مرورگرها می‌بینیمشون. این یه رابطه سیمبیوتیک‌ه: کتابخانه‌ها فضای آزمایش دارن و پلتفرم نتیجه بلوغ‌یافته‌شون رو جذب می‌کنه.

نکات کلیدی:

• querySelector و querySelectorAll از Dojo و jQuery با موتور Sizzle الهام گرفتن
• اتریبیوت‌های popovertarget و command همون ایده data-* بوت‌استرپ رو بومی کردن
• classList نسخه مرورگری متدهای jQuery برای مدیریت کلاس‌هاست
• ده‌ها متد روی String و Array مستقیم از Lodash و Underscore و Prototype.js وارد استاندارد شدن
• کتابخانه‌ها آزمایشگاه واقعی وب‌اند — مرورگرها نتیجه نهایی رو جذب می‌کنن