নামকৃত এলিমেন্ট আইডিগুলিকে জাভাস্ক্রিপ্ট গ্লোবাল হিসাবে উল্লেখ করা যেতে পারে

var el = querySelector("#cool");

  
    window.foo = "bar";
  


  
I won't override window.foo
  
    console.log(window.foo); // Prints "bar"
  

I will be overridden :(

  window.foo = "bar";
  console.log(window.foo); // Prints "bar"

, যা অন্যথায় অবৈধ করে একটি দ্বন্দ্ব তৈরি করবে৷ alert API এই সুরক্ষা কৌশলটি খুব ভাল হতে পারে কেন আপনি — যদি আপনি আমার মতো হন — প্রথমবারের মতো এটি সম্পর্কে শিখছেন৷

নামধারী গ্লোবালদের বিরুদ্ধে মামলা

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

• যদি DOM পরিবর্তিত হয়, তাহলে রেফারেন্সটিও তাই করে। এটি কিছু সত্যিই "ভঙ্গুর" জন্য করে তোলে (স্পেস এর টার্ম এর জন্য) কোড যেখানে এইচটিএমএল এবং জাভাস্ক্রিপ্টের মধ্যে উদ্বেগের বিচ্ছেদ খুব বেশি হতে পারে।
• দুর্ঘটনাজনিত রেফারেন্সগুলি খুব সহজ। একটি সাধারণ টাইপো খুব ভালভাবে একটি নামযুক্ত গ্লোবাল রেফারেন্স বন্ধ করে দিতে পারে এবং আপনাকে অপ্রত্যাশিত ফলাফল দিতে পারে।
• এটি ব্রাউজারে ভিন্নভাবে প্রয়োগ করা হয়। উদাহরণস্বরূপ, আমরা একটি সঙ্গে একটি অ্যাঙ্কর অ্যাক্সেস করতে সক্ষম হওয়া উচিত id — যেমন — কিন্তু কিছু ব্রাউজার (যেমন Safari এবং Firefox) একটি ফেরত দেয় ReferenceError কনসোলে
• এটি আপনি যা মনে করেন তা ফেরত নাও হতে পারে। স্পেস অনুসারে, যখন DOM-এ একই নামের উপাদানের একাধিক দৃষ্টান্ত থাকে — বলুন, দুটি উদাহরণ

  - ব্রাউজার একটি ফেরত দেওয়া উচিত HTMLCollection উদাহরণ একটি অ্যারের সঙ্গে. ফায়ারফক্স, তবে, শুধুমাত্র প্রথম উদাহরণ প্রদান করে। তারপর আবার, স্পেক বলে আমরা একটি উদাহরণ ব্যবহার করা উচিত id যাইহোক একটি উপাদান গাছে. কিন্তু এটি করার ফলে একটি পৃষ্ঠা কাজ করা বা এর মতো কিছু বন্ধ করবে না।

• হয়তো একটি কর্মক্ষমতা খরচ আছে? আমি বলতে চাচ্ছি, ব্রাউজারের সেই রেফারেন্সের তালিকা তৈরি করতে হবে এবং এটি বজায় রাখতে হবে। কয়েক জন লোক পরীক্ষা দিয়েছিলেন এই StackOverflow থ্রেডে, যেখানে নামযুক্ত বিশ্ব আসলে ছিল একটি পরীক্ষায় আরও পারফরম্যান্স এবং সাম্প্রতিক পরীক্ষায় কম পারফরম্যান্স.

অতিরিক্ত বিবেচনা

ধরা যাক আমরা নামযুক্ত গ্লোবাল ব্যবহার করার বিরুদ্ধে সমালোচনাগুলিকে চুক করি এবং যাইহোক সেগুলি ব্যবহার করি। এটা সব ভাল. তবে এমন কিছু জিনিস রয়েছে যা আপনি আপনার মতো বিবেচনা করতে চাইতে পারেন।

পলিফিলস

এজ-কেস-ওয়াই শোনাতে পারে, এই ধরনের গ্লোবাল চেকগুলি পলিফিলের জন্য একটি সাধারণ সেটআপ প্রয়োজনীয়তা। নিম্নলিখিত উদাহরণটি দেখুন যেখানে আমরা নতুন ব্যবহার করে একটি কুকি সেট করেছি CookieStore এপিআই, এটি এখনও সমর্থন করে না এমন ব্রাউজারগুলিতে এটি পলিফিলিং:

  
  
    // Polyfill the CookieStore API if not yet implemented.
    // https://developer.mozilla.org/en-US/docs/Web/API/CookieStore
    if (!window.cookieStore) {
      window.cookieStore = myCookieStorePolyfill;
    }
    cookieStore.set("foo", "bar");
  

এই কোডটি ক্রোমে পুরোপুরি সূক্ষ্মভাবে কাজ করে, তবে সাফারিতে নিম্নলিখিত ত্রুটিটি নিক্ষেপ করে।

TypeError: cookieStore.set is not a function

সাফারির জন্য সমর্থনের অভাব রয়েছে CookieStore এই লেখার হিসাবে API. ফলস্বরূপ, পলিফিল প্রয়োগ করা হয় না কারণ img এলিমেন্ট আইডি একটি গ্লোবাল ভেরিয়েবল তৈরি করে যেটির সাথে সংঘর্ষ হয় cookieStore গ্লোবাল।

জাভাস্ক্রিপ্ট এপিআই আপডেট

আমরা পরিস্থিতিটি ফ্লিপ করতে পারি এবং আরও একটি সমস্যা খুঁজে পেতে পারি যেখানে ব্রাউজারের জাভাস্ক্রিপ্ট ইঞ্জিনের আপডেটগুলি একটি নামযুক্ত উপাদানের গ্লোবাল রেফারেন্স ভেঙে দিতে পারে।

উদাহরণ স্বরূপ:

  
  
    window.BarcodeDetector.focus();
  

সেই স্ক্রিপ্টটি ইনপুট উপাদানের একটি রেফারেন্স দখল করে এবং আহ্বান করে focus() চালু কর. এটি সঠিকভাবে কাজ করে। এখনও, আমরা জানি না কিভাবে দীর্ঘ এটা কাজ চালিয়ে যাবে.

আপনি দেখতে পাচ্ছেন, আমরা যে গ্লোবাল ভেরিয়েবলটি ব্যবহার করছি ইনপুট উপাদানটি রেফারেন্স করার জন্য ব্রাউজারগুলি সমর্থন করা শুরু করার সাথে সাথে কাজ করা বন্ধ করে দেবে BarcodeDetector এপিআই. সেই সময়ে, দ window.BarcodeDetector গ্লোবাল আর ইনপুট উপাদান এবং একটি রেফারেন্স হবে না .focus() নিক্ষেপ করবে "window.BarcodeDetector.focus একটি ফাংশন নয়" ত্রুটি।

বোনাস: সমস্ত নামযুক্ত উপাদান বিশ্বব্যাপী রেফারেন্স তৈরি করে না

মজার কিছু শুনতে চান? আঘাতে অপমান যোগ করার জন্য, নামযুক্ত উপাদানগুলি কেবলমাত্র যদি নামগুলিতে অক্ষর ছাড়া আর কিছুই না থাকে তবেই বৈশ্বিক ভেরিয়েবল হিসাবে অ্যাক্সেসযোগ্য। ব্রাউজারগুলি একটি আইডি সহ একটি উপাদানের জন্য একটি বিশ্বব্যাপী রেফারেন্স তৈরি করবে না যাতে বিশেষ অক্ষর এবং সংখ্যা রয়েছে, যেমন hello-world এবং item1.

উপসংহার

আসুন আমরা এখানে কিভাবে এসেছি তা সংক্ষিপ্ত করা যাক:

• সমস্ত প্রধান ব্রাউজার স্বয়ংক্রিয়ভাবে প্রতিটি DOM উপাদানের সাথে একটি বিশ্বব্যাপী রেফারেন্স তৈরি করে id (বা, কিছু ক্ষেত্রে, ক name বৈশিষ্ট্য)।
• তাদের বিশ্বব্যাপী রেফারেন্সের মাধ্যমে এই উপাদানগুলি অ্যাক্সেস করা অবিশ্বস্ত এবং সম্ভাব্য বিপজ্জনক। ব্যবহার করুন querySelector or getElementById পরিবর্তে.
• যেহেতু বিশ্বব্যাপী রেফারেন্সগুলি স্বয়ংক্রিয়ভাবে তৈরি হয়, সেগুলি আপনার কোডে কিছু পার্শ্বপ্রতিক্রিয়া থাকতে পারে। এটি ব্যবহার এড়াতে একটি ভাল কারণ id আপনি সত্যিই এটি প্রয়োজন না হলে বৈশিষ্ট্য.

দিনের শেষে, জাভাস্ক্রিপ্টে নামযুক্ত গ্লোবাল ব্যবহার করা এড়ানো সম্ভবত একটি ভাল ধারণা। এটি কীভাবে "ভঙ্গুর" কোডের দিকে নিয়ে যায় সে সম্পর্কে আমি আগে উল্লেখ করেছিলাম, তবে পয়েন্টটি হোম ড্রাইভ করার জন্য এখানে সম্পূর্ণ পাঠ্য রয়েছে:

একটি সাধারণ নিয়ম হিসাবে, এর উপর নির্ভর করা ভঙ্গুর কোডের দিকে পরিচালিত করবে। কোন আইডি এই API-তে ম্যাপিং শেষ করে সময়ের সাথে সাথে পরিবর্তিত হতে পারে, যেমন ওয়েব প্ল্যাটফর্মে নতুন বৈশিষ্ট্য যোগ করা হয়, উদাহরণস্বরূপ। এর পরিবর্তে ব্যবহার করুন document.getElementById() or document.querySelector().

আমি মনে করি যে এইচটিএমএল স্পেক নিজেই এই বৈশিষ্ট্য থেকে দূরে থাকার পরামর্শ দেয় তা নিজেই কথা বলে।