Chrome সংস্করণ 133-এ উপলব্ধ নতুন moveBefore() DOM API ঘোষণা করতে পেরে আমরা উচ্ছ্বসিত, যা স্থিতি না হারিয়ে DOM-এ উপাদানগুলিকে সরানো সহজ করে তোলে৷ আপনি আপনার প্রকল্পগুলিতে এটি কীভাবে ব্যবহার করতে পারেন তা জানতে পড়তে থাকুন!
DOM মিউটেশনের সময় হারানো অবস্থা
আপনি কি DOM-এ নতুন উপাদান সন্নিবেশ করতে appendChild() API ব্যবহার করেন? তাই অনেকেই করেন, কিন্তু আপনি কি কখনও এটিকে কল করার চেষ্টা করেছেন—অথবা insertBefore() , বা সেই বিষয়ে অন্য কোনো সন্নিবেশ API-কে এমন একটি উপাদানের সাথে যা ইতিমধ্যেই DOM-এ আছে? যদি তাই হয়, আপনি হয়ত বুঝতে পারেননি যে এটি প্রথমে তার পুরানো অভিভাবক থেকে উপাদানটিকে সরিয়ে নতুনটিতে পুনরায় ঢোকানোর মাধ্যমে শান্তভাবে কাজ করে৷ কারণ 1998 সালে প্রথম DOM স্ট্যান্ডার্ড ড্রাফ্ট চালু হওয়ার পর থেকে ডকুমেন্ট অবজেক্ট মডেলে শুধুমাত্র আদিম অপসারণ এবং সন্নিবেশ করা হয়েছে। যখনই আপনি মনে করেন যে আপনি DOM-এর মধ্যে একটি জায়গা থেকে অন্য জায়গায় কিছু "সরানো" করছেন, আপনি সত্যিই মুছে ফেলছেন এবং হুডের নীচে ঢোকাচ্ছেন ।
সত্য যে একটি "সরানো" সত্যিই একটি "সরানো এবং সন্নিবেশ" সাধারণত ব্যবহারকারীর অভিজ্ঞতার উপর কোন প্রভাব ফেলে না। উদাহরণ স্বরূপ, যখন DOM-এ একটি <p> "সরানো" হয়, তখন এই দুটি অপারেশনের কোনো বিঘ্নিত পার্শ্বপ্রতিক্রিয়া থাকে না, কিন্তু জটিল নোডগুলিকে সরানোর সময় যেগুলি গুরুত্বপূর্ণ অবস্থা ধারণ করে—যেমন <iframe> উপাদান, পূর্ণস্ক্রীনের উপাদান, CSS অ্যানিমেশন, এবং আরও অনেক কিছু—অন্তর্নিহিত "অপসারণ" অপারেশন সমস্ত ধরণের অবস্থা পুনরায় সেট করে।
এটি আশ্চর্যজনকভাবে বিঘ্নিত পার্শ্ব প্রতিক্রিয়া হতে পারে
আপনি DOM ট্রিতে চলাফেরা করার মাধ্যমে স্টেট-সংরক্ষিত ডেমো ওয়েবসাইটে রিসেট করা অবস্থায় দেখতে পাবেন। নিম্নলিখিত উদাহরণে CSS অ্যানিমেশন এবং <iframe> স্টেট রিসেটিং দেখায় যখন উপাদানগুলি একটি মূল কন্টেইনার থেকে অন্যটিতে সরানো হয়।
এই সীমাবদ্ধতা গতিশীল ব্যবহারকারীর অভিজ্ঞতা তৈরি করা কঠিন বা এমনকি অসম্ভব করে তুলতে পারে। অ্যাপ্লিকেশনের অবস্থা রহস্যজনকভাবে রিসেট হলে ব্যবহারকারীরা হতাশ এবং বিভ্রান্ত হন, এবং JavaScript ফ্রেমওয়ার্ক লেখকরা এই সমস্যাটির চারপাশে তাদের ফ্রন্টএন্ড কোড পুনর্নির্মাণ করতে, MorphDOM-এর মতো জটিল লাইব্রেরি রচনা করে, বা বাগ রিপোর্ট ফিল্ডিং করে যে সমস্যাগুলি তারা সমাধান করতে পারে না হাইলাইট করে এর ক্ষতির সম্মুখীন হয়৷
নতুন moveBefore() API
আমরা DOM-এ একটি নতুন আদিম ক্রিয়াকলাপ যোগ করে এই সমস্যাটি সমাধান করার জন্য প্রস্তুত হয়েছি। এটিকে যথাযথভাবে "মুভ" আদিম বলা হয়, এবং নতুন moveBefore() DOM API-এর মাধ্যমে বিকাশকারীদের কাছে প্রকাশ করা হয়।
moveBefore() insertBefore() এর মতো একই আর্গুমেন্ট নেয়, কিন্তু নোডগুলিকে সরিয়ে ফেলা এবং পুনরায় সন্নিবেশ করার পরিবর্তে যখন তারা ইতিমধ্যেই DOM-এর সাথে সংযুক্ত থাকে, এই নতুন এপিআই বেশিরভাগ অবস্থা রিসেট না করেই টার্গেট নোডটিকে নতুন প্যারেন্টে নিয়ে যায় । এটি অবশেষে জাভাস্ক্রিপ্ট ডেভেলপারদের চলমান অ্যানিমেশন, আইফ্রেম, পূর্ণস্ক্রীন উপাদান এবং আরও অনেক কিছুর সাথে গতিশীল অভিজ্ঞতা তৈরি করতে দেয়। chrome://flags/#atomic-move পরীক্ষামূলক পতাকা সক্ষম করে এবং আমাদের ডেমো সাইট পরিদর্শন করে, অথবা 4 ঠা ফেব্রুয়ারি, 2025-এ প্রকাশিত হওয়ার পরে Chrome এর 133 সংস্করণ ব্যবহার করে আপনি নিজের জন্য এটি চেষ্টা করতে পারেন।
আচরণের উদাহরণ যা এই নতুন আদিম জাভাস্ক্রিপ্ট লেখকদের অর্জন করার অনুমতি দেবে:
- ব্যবহারকারী একটি ওয়েবসাইটের মাধ্যমে নেভিগেট করার সময় একটি ভিডিওর প্লে অবস্থা সংরক্ষণ করুন (ভিডিওটি
<video>বা<iframe>উপাদান থেকে সরবরাহ করা হোক না কেন)। - একটি ব্যবহারকারী ইনপুট ক্ষেত্রের ফোকাস সংরক্ষণ করুন যেহেতু এটি DOM এ সরানো হয়।
- DOM থেকে নতুন বিষয়বস্তু যুক্ত বা সরানোর সাথে সাথে অ্যানিমেশনগুলিকে মসৃণভাবে শেষ করার অনুমতি দিন।
- নতুন বিষয়বস্তুর সাথে বিদ্যমান DOM-এর সমন্বয়ের জন্য উচ্চতর বিশ্বস্ততা মরফিং অ্যালগরিদম।
- মডেল ডায়ালগ, পপওভার এবং পূর্ণস্ক্রীন উপাদান খোলা রাখুন।
আমরা অন্যান্য ব্রাউজারগুলির সাথে ওয়েব প্ল্যাটফর্মে এই APIটি চালু করার জন্য কঠোর পরিশ্রম করছি, এবং আমরা এটিকে শীঘ্রই ডেভেলপারদের হাতে পেয়ে রোমাঞ্চিত, বছরের পর বছর ডেভেলপারদের অনুরোধ সন্তুষ্ট করে এবং ওয়েব প্ল্যাটফর্মে একটি উল্লেখযোগ্য শূন্যতা পূরণ করতে পেরেছি৷
বরাবরের মতো, টুইটার বা নীচের মন্তব্যের মাধ্যমে আপনি কী মনে করেন তা আমাদের জানান এবং crbug.com/new এ বাগ জমা দিন।