DOM গুণাবলী এখন প্রোটোটাইপ চেইনে

পল কিনলান

Chrome টিম সম্প্রতি ঘোষণা করেছে যে আমরা DOM বৈশিষ্ট্যগুলিকে প্রোটোটাইপ চেইনে স্থানান্তরিত করছি ৷ এই পরিবর্তন, Chrome 43 -এ প্রয়োগ করা হয়েছে - (বিটা এপ্রিল 2015-এর মাঝামাঝি) - ক্রোমকে ওয়েব IDL স্পেক এবং অন্যান্য ব্রাউজারগুলির বাস্তবায়ন, যেমন IE এবং Firefox এর সাথে সামঞ্জস্যপূর্ণ করে। সম্পাদনা করুন: স্পষ্ট করা পুরানো ওয়েবকিট ভিত্তিক ব্রাউজার, বর্তমানে স্পেকের সাথে সামঞ্জস্যপূর্ণ নয়, তবে সাফারি এখন।

নতুন আচরণ অনেক উপায়ে ইতিবাচক। এটা:

  • বিশেষত্বের সাথে সম্মতির মাধ্যমে ওয়েব জুড়ে সামঞ্জস্যতা উন্নত করে (IE এবং Firefox ইতিমধ্যেই এটি করে)।
  • আপনাকে প্রতিটি DOM অবজেক্টে ধারাবাহিকভাবে এবং দক্ষতার সাথে গেটার/সেটার তৈরি করতে দেয়।
  • DOM প্রোগ্রামিং এর হ্যাকযোগ্যতা বাড়ায়। উদাহরণস্বরূপ, এটি আপনাকে পলিফিলগুলি প্রয়োগ করতে সক্ষম করবে যা আপনাকে কিছু ব্রাউজার এবং জাভাস্ক্রিপ্ট লাইব্রেরিতে অনুপস্থিত কার্যকারিতাকে দক্ষতার সাথে অনুকরণ করতে দেয় যা ডিফল্ট DOM অ্যাট্রিবিউট আচরণগুলিকে ওভাররাইড করে।

উদাহরণস্বরূপ, একটি অনুমানমূলক W3C স্পেসিফিকেশনে isSuperContentEditable নামে কিছু নতুন কার্যকারিতা রয়েছে এবং ক্রোম ব্রাউজার এটি বাস্তবায়ন করে না, তবে একটি লাইব্রেরির মাধ্যমে বৈশিষ্ট্যটিকে "পলিফিল" বা অনুকরণ করা সম্ভব। লাইব্রেরি ডেভেলপার হিসাবে, আপনি স্বাভাবিকভাবেই একটি দক্ষ পলিফিল তৈরি করতে নিম্নরূপ prototype ব্যবহার করতে চান:

Object.defineProperty(HTMLDivElement.prototype, "isSuperContentEditable", {
    get: function() { return true; },
    set: function() { /* some logic to set it up */ },
});

এই পরিবর্তনের আগে - ক্রোমের অন্যান্য DOM বৈশিষ্ট্যগুলির সাথে সামঞ্জস্যের জন্য - আপনাকে প্রতিটি উদাহরণে নতুন সম্পত্তি তৈরি করতে হবে, যা পৃষ্ঠার প্রতিটি HTMLDivElement এর জন্য খুব অকার্যকর হবে৷

এই পরিবর্তনগুলি ওয়েব প্ল্যাটফর্মের ধারাবাহিকতা, কর্মক্ষমতা এবং মানককরণের জন্য গুরুত্বপূর্ণ, তবুও তারা বিকাশকারীদের জন্য কিছু সমস্যার কারণ হতে পারে। আপনি যদি Chrome এবং WebKit-এর মধ্যে লিগ্যাসি সামঞ্জস্যের কারণে এই আচরণের উপর নির্ভর করে থাকেন তবে আমরা আপনাকে আপনার সাইট পরীক্ষা করতে এবং নীচের পরিবর্তনগুলির সারাংশ দেখতে উৎসাহিত করি।

পরিবর্তনের সারসংক্ষেপ

একটি DOM অবজেক্ট ইনস্ট্যান্সে hasOwnProperty ব্যবহার করা এখন false ফিরে আসবে

কখনও কখনও ডেভেলপাররা একটি বস্তুতে একটি সম্পত্তির উপস্থিতি পরীক্ষা করার জন্য hasOwnProperty ব্যবহার করবে। এটি আর স্পেসিফিকেশন অনুযায়ী কাজ করবে না কারণ DOM অ্যাট্রিবিউটগুলি এখন প্রোটোটাইপ চেইনের অংশ এবং hasOwnProperty শুধুমাত্র বর্তমান অবজেক্টগুলি পরিদর্শন করে যে এটিতে সংজ্ঞায়িত করা হয়েছে কিনা।

ক্রোম 42 এর আগে এবং সহ নিম্নলিখিতটি true হবে।

> div = document.createElement("div");
> div.hasOwnProperty("isContentEditable");

true

ক্রোম 43 এর পরে এটি false ফিরে আসবে।

> div = document.createElement("div");
> div.hasOwnProperty("isContentEditable");

false

এর মানে এখন আপনি যদি চেক করতে চান যে isContentEditable উপাদানটিতে উপলব্ধ রয়েছে তাহলে আপনাকে HTMLElement অবজেক্টের প্রোটোটাইপটি পরীক্ষা করতে হবে। উদাহরণস্বরূপ HTMLDivElement HTMLElement থেকে উত্তরাধিকার সূত্রে প্রাপ্ত যা isContentEditable প্রপার্টি সংজ্ঞায়িত করে।

> HTMLElement.prototype.hasOwnProperty("isContentEditable");

true

আপনি hasOwnProperty ব্যবহারে লক ইন করেননি। আমরা in আরও সহজ ব্যবহার করার পরামর্শ দিই কারণ এটি সম্পূর্ণ প্রোটোটাইপ চেইনের সম্পত্তি পরীক্ষা করবে। 

if("isContentEditable" in div) {
    // We have support!!
}

DOM অবজেক্ট ইন্সট্যান্সে Object.getOwnPropertyDescriptor আর অ্যাট্রিবিউটের জন্য কোনো সম্পত্তি বর্ণনাকারী ফেরত দেবে না

যদি আপনার সাইটের একটি DOM অবজেক্টে একটি বৈশিষ্ট্যের জন্য সম্পত্তি বিবরণী পেতে হয়, তাহলে আপনাকে এখন প্রোটোটাইপ চেইন অনুসরণ করতে হবে।

আপনি যদি Chrome 42 এবং তার আগে সম্পত্তির বিবরণ পেতে চান তবে আপনি করতেন:

> Object.getOwnPropertyDescriptor(div, "isContentEditable");

Object {value: "", writable: true, enumerable: true, configurable: true}

এই পরিস্থিতিতে Chrome 43 পরবর্তীতে undefined ফিরে আসবে।

> Object.getOwnPropertyDescriptor(div, "isContentEditable");

undefined

যার মানে এখন isContentEditable সম্পত্তির জন্য সম্পত্তি বর্ণনাকারী পেতে আপনাকে নিম্নরূপ প্রোটোটাইপ চেইন অনুসরণ করতে হবে: 

> Object.getOwnPropertyDescriptor(HTMLElement.prototype, "isContentEditable");

Object {get: function, set: function, enumerable: false, configurable: false}

JSON.stringify আর DOM অ্যাট্রিবিউটকে সিরিয়ালাইজ করবে না

JSON.stringify প্রোটোটাইপে থাকা DOM বৈশিষ্ট্যগুলিকে সিরিয়ালাইজ করে না। উদাহরণস্বরূপ, আপনি যদি পুশ নোটিফিকেশনের পুশসাবস্ক্রিপশনের মতো কোনো বস্তুকে সিরিয়ালাইজ করার চেষ্টা করেন তবে এটি আপনার সাইটকে প্রভাবিত করতে পারে।

ক্রোম 42 এবং তার আগে নিম্নলিখিতগুলি কাজ করত:

> JSON.stringify(subscription);

{
    "endpoint": "https://something",
    "subscriptionId": "SomeID"
}

ক্রোম 43 পরবর্তী প্রোটোটাইপে সংজ্ঞায়িত বৈশিষ্ট্যগুলিকে সিরিয়ালাইজ করবে না এবং আপনাকে একটি খালি বস্তু ফেরত দেওয়া হবে।

> JSON.stringify(subscription);

{}

আপনাকে আপনার নিজস্ব সিরিয়ালাইজেশন পদ্ধতি প্রদান করতে হবে, উদাহরণস্বরূপ আপনি নিম্নলিখিতগুলি করতে পারেন: 

function stringifyDOMObject(object)
{
    function deepCopy(src) {
        if (typeof src != "object")
            return src;
        var dst = Array.isArray(src) ? [] : {};
        for (var property in src) {
            dst[property] = deepCopy(src[property]);
        }
        return dst;
    }
    return JSON.stringify(deepCopy(object));
}
var s = stringifyDOMObject(domObject);

কঠোর মোডে শুধুমাত্র-পঠন বৈশিষ্ট্যে লেখা একটি ত্রুটি নিক্ষেপ করবে

আপনি যখন কঠোর মোড ব্যবহার করছেন তখন শুধুমাত্র-পঠন বৈশিষ্ট্যগুলিতে লেখার একটি ব্যতিক্রম হওয়ার কথা। উদাহরণস্বরূপ, নিম্নলিখিত নিন:

function foo() {
    "use strict";
    var d = document.createElement("div");
    console.log(d.isContentEditable);
    d.isContentEditable = 1;
    console.log(d.isContentEditable);
}

ক্রোম 42 এবং তার আগে ফাংশনটি অব্যাহত থাকত এবং নীরবে ফাংশনটি কার্যকর করা হত, যদিও isContentEditable পরিবর্তন করা হত না।

// Chrome 42 and earlier behavior
> foo();

false // isContentEditable
false // isContentEditable (after writing to read-only property)

এখন Chrome 43 এবং তার পরে একটি ব্যতিক্রম নিক্ষেপ করা হবে। 

// Chrome 43 and onwards behavior
> foo();

false
Uncaught TypeError: Cannot set property isContentEditable of #<HTMLElement> which has only a getter

আমার একটা সমস্যা আছে, আমার কি করা উচিত?

নির্দেশিকা অনুসরণ করুন, অথবা নীচে একটি মন্তব্য করুন এবং আসুন কথা বলি।

আমি একটি সমস্যা সহ একটি সাইট দেখেছি, আমার কি করা উচিত?

মহান প্রশ্ন. সাইটের সাথে বেশিরভাগ সমস্যা হবে এই সত্যের উপর ভিত্তি করে যে একটি সাইট getOwnProperty পদ্ধতির মাধ্যমে অ্যাট্রিবিউট উপস্থিতি সনাক্তকরণ করতে বেছে নিয়েছে, এটি বেশিরভাগই করা হয় যখন কোনও সাইটের মালিক শুধুমাত্র পুরানো ওয়েবকিট ব্রাউজারগুলিকে লক্ষ্য করে। একটি বিকাশকারী করতে পারে এমন কয়েকটি জিনিস রয়েছে:

  • আমাদের (Chrome এর) সমস্যা ট্র্যাকারে প্রভাবিত সাইট সম্পর্কে একটি সমস্যা ফাইল করুন
  • ওয়েবকিট রাডারে একটি সমস্যা ফাইল করুন এবং রেফারেন্স https://bugs.webkit.org/show_bug.cgi?id=49739

আমি সাধারণত এই পরিবর্তন অনুসরণ করতে আগ্রহী