ما هیجان زده هستیم که API جدید DOM moveBefore() را که در نسخه 133 کروم موجود است، معرفی کنیم که حرکت عناصر را در DOM بدون از دست دادن حالت آسان تر می کند. به خواندن ادامه دهید تا دریابید که چگونه می توانید از آن در پروژه های خود استفاده کنید!
از دست دادن حالت در طول جهش DOM
آیا از appendChild() API برای درج عناصر جدید در DOM استفاده می کنید؟ خیلی ها هم همینطور، اما آیا تا به حال سعی کرده اید آن را - یا insertBefore() یا هر API درج دیگری را با عنصری که قبلاً در DOM است فراخوانی کنید؟ اگر چنین است، ممکن است متوجه نشده باشید که این بی سر و صدا با حذف عنصر از والد قدیمی و قرار دادن مجدد آن در عنصر جدید کار می کند. این به این دلیل است که از زمانی که اولین پیش نویس استاندارد DOM در سال 1998 معرفی شد، Document Object Model تنها دارای حذف و درج اولیه بوده است . و قرار دادن زیر کاپوت
این واقعیت که "حرکت" واقعاً "حذف و درج" است، معمولاً تأثیری بر تجربه کاربر ندارد. به عنوان مثال، هنگام "حرکت" یک <p> در DOM، این دو عملیات هیچ عارضه جانبی مخربی ندارند، اما هنگام جابجایی گره های پیچیده ای که حالت قابل توجهی دارند - مانند عناصر <iframe> ، عناصر در تمام صفحه، انیمیشن های CSS و غیره on-عملیات ضمنی "حذف" انواع حالت ها را بازنشانی می کند.
این می تواند عوارض جانبی به طرز شگفت انگیزی مخرب داشته باشد
می‌توانید با بازی کردن با حرکات در درخت DOM، نوع حالتی را که در وب‌سایت نمایشی حفظ حالت بازنشانی می‌شود، مشاهده کنید. مثال زیر انیمیشن‌های CSS و تنظیم مجدد حالت <iframe> را هنگام انتقال عناصر از یک محفظه والد به محفظه دیگر نشان می‌دهد.
این محدودیت می‌تواند ایجاد تجربه‌های پویا برای کاربر را دشوار یا حتی غیرممکن کند. هنگامی که حالت برنامه به طور مرموزی بازنشانی می‌شود، کاربران ناامید و گیج می‌شوند و نویسندگان چارچوب جاوا اسکریپت با صرف ساعت‌های بی‌شماری برای بازسازی کد ظاهری خود در مورد این مشکل، نوشتن کتابخانه‌های پیچیده‌ای مانند MorphDOM ، یا با ارائه گزارش‌های باگ که مشکلاتی را که می‌توانند برجسته می‌کنند، بار سنگین آن را متحمل می‌شوند. رفع .
API جدید moveBefore()
ما تصمیم گرفتیم این مشکل را با افزودن یک عملیات اولیه جدید به DOM برطرف کنیم. به طور مناسب "move" اولیه نامیده می شود و از طریق DOM API جدید moveBefore() در معرض توسعه دهندگان قرار می گیرد.
moveBefore() همان آرگومان‌های insertBefore() را می‌پذیرد، اما به جای حذف و درج مجدد گره‌ها زمانی که قبلاً به DOM متصل شده‌اند، این API جدید به صورت اتمی گره هدف را به والد جدید منتقل می‌کند بدون اینکه اکثر حالت‌ها را تنظیم مجدد کند . این در نهایت به توسعه دهندگان جاوا اسکریپت اجازه می دهد تا تجربیاتی پویا با انیمیشن های متحرک، iframe، عناصر تمام صفحه و موارد دیگر ایجاد کنند. می‌توانید با فعال کردن پرچم آزمایشی chrome://flags/#atomic-move و بازدید از سایت آزمایشی ما، یا با استفاده از نسخه 133 کروم پس از انتشار در 4 فوریه 2025، این کار را خودتان امتحان کنید.
نمونه هایی از رفتارهایی که این بدوی جدید به نویسندگان جاوا اسکریپت اجازه دستیابی به آنها را می دهد عبارتند از:
- وضعیت پخش یک ویدیو را در حین حرکت کاربر در وب سایت حفظ کنید (خواه ویدیو از عنصر
<video>یا<iframe>ارائه شده باشد). - تمرکز فیلد ورودی کاربر را در حین جابجایی آن در DOM حفظ کنید.
- به انیمیشن‌ها اجازه دهید تا با اضافه شدن یا حذف محتوای جدید از DOM به آرامی به پایان برسند.
- الگوریتم‌های شکل‌گیری با وفاداری بالاتر برای تطبیق DOMهای موجود با محتوای جدید.
- گفتگوهای مودال، پاپاورها و عناصر تمام صفحه را باز نگه دارید.
ما سخت در حال کار بر روی معرفی این API به پلتفرم وب با مرورگرهای دیگر هستیم و خوشحالیم که به زودی آن را در اختیار توسعه دهندگان قرار می دهیم و سال ها درخواست توسعه دهندگان را برآورده می کنیم و شکاف قابل توجهی را در بستر وب پر می کنیم.
مثل همیشه، نظر خود را از طریق توییتر یا نظرات زیر به ما اطلاع دهید و اشکالات را به crbug.com/new ارسال کنید.