نامزد عنصر IDs کو JavaScript Globals کے طور پر حوالہ دیا جا سکتا ہے۔

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 تبدیل ہوتا ہے، تو حوالہ بھی ایسا ہی ہوتا ہے۔ اس سے کچھ واقعی " ٹوٹنے والے" (مخصوص کی اصطلاح اس کے لیے) کوڈ جہاں HTML اور JavaScript کے درمیان خدشات کی علیحدگی بہت زیادہ ہو سکتی ہے۔
• حادثاتی حوالہ جات بہت آسان ہیں۔ ایک سادہ ٹائپو نامی عالمی کا حوالہ دے کر بہت اچھی طرح سے ختم کر سکتا ہے اور آپ کو غیر متوقع نتائج دے سکتا ہے۔
• یہ براؤزرز میں مختلف طریقے سے لاگو ہوتا ہے۔ مثال کے طور پر، ہمیں ایک کے ساتھ اینکر تک رسائی حاصل کرنے کے قابل ہونا چاہیے۔ id - مثال کے طور پر — لیکن کچھ براؤزر (یعنی سفاری اور فائر فاکس) لوٹتے ہیں۔ ReferenceError کنسول میں
• ہو سکتا ہے یہ واپس نہ آئے جو آپ سوچتے ہیں۔ قیاس کے مطابق، جب DOM میں ایک ہی نام کے عنصر کی متعدد مثالیں موجود ہیں - کہیے، دو مثالیں

  - براؤزر کو واپس آنا چاہئے۔ HTMLCollection مثالوں کی ایک صف کے ساتھ۔ فائر فاکس، تاہم، صرف پہلی مثال واپس کرتا ہے۔ پھر دوبارہ، قیاس کا کہنا ہے کہ ہمیں ایک کی ایک مثال استعمال کرنی چاہیے۔ id ویسے بھی ایک عنصر کے درخت میں۔ لیکن ایسا کرنے سے کسی صفحہ کو کام کرنے یا اس جیسی کوئی چیز نہیں روکے گی۔

• شاید کارکردگی کی قیمت ہے؟ میرا مطلب ہے، براؤزر کو حوالہ جات کی وہ فہرست بنانا ہوگی اور اسے برقرار رکھنا ہوگا۔ چند لوگوں نے ٹیسٹ دیا۔ اس اسٹیک اوور فلو تھریڈ میں، جہاں نامی گلوبلز اصل میں تھے۔ ایک ٹیسٹ میں زیادہ پرفارمنس اور زیادہ حالیہ ٹیسٹ میں کم کارکردگی.

اضافی تحفظات

ہم کہتے ہیں کہ ہم نامی گلوبلز کے استعمال کے خلاف تنقیدوں کو چکنا چور کرتے ہیں اور بہرحال ان کا استعمال کرتے ہیں۔ یہ سب اچھا ہے. لیکن کچھ چیزیں ایسی ہیں جن پر آپ غور کرنا چاہتے ہیں جیسا کہ آپ کرتے ہیں۔

پولی فلز

جیسا کہ edge-case-y لگتا ہے، اس قسم کے عالمی چیک پولی فلز کے لیے ایک عام سیٹ اپ کی ضرورت ہے۔ مندرجہ ذیل مثال کو دیکھیں جہاں ہم نے نئی کا استعمال کرتے ہوئے کوکی سیٹ کی ہے۔ CookieStore API، اسے ایسے براؤزرز پر پولی فل کرنا جو ابھی تک اس کی حمایت نہیں کرتے ہیں:

  
  
    // 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 عنصر ID ایک عالمی متغیر بناتا ہے جو کہ کے ساتھ تصادم کرتا ہے۔ cookieStore عالمی

JavaScript API اپ ڈیٹس

ہم صورت حال کو پلٹ سکتے ہیں اور ایک اور مسئلہ تلاش کر سکتے ہیں جہاں براؤزر کے JavaScript انجن میں اپ ڈیٹس ایک نامزد عنصر کے عالمی حوالہ جات کو توڑ سکتے ہیں۔

مثال کے طور پر:

  
  
    window.BarcodeDetector.focus();
  

وہ اسکرپٹ ان پٹ عنصر کا حوالہ پکڑتا ہے اور اس کی درخواست کرتا ہے۔ focus() اس پر. یہ صحیح طریقے سے کام کرتا ہے۔ پھر بھی، ہم نہیں جانتے کہ کیسے طویل یہ کام کرتا رہے گا.

آپ دیکھتے ہیں، عالمی متغیر جو ہم ان پٹ عنصر کا حوالہ دینے کے لیے استعمال کر رہے ہیں، جیسے ہی براؤزر اس کی حمایت کرنا شروع کر دیں گے کام کرنا بند کر دے گا۔ BarcodeDetector API. اس وقت، the window.BarcodeDetector گلوبل اب ان پٹ عنصر اور کا حوالہ نہیں رہے گا۔ .focus() پھینک دیں گے "window.BarcodeDetector.focus ایک فنکشن نہیں ہے" خرابی۔

بونس: تمام نامزد عناصر عالمی حوالہ جات نہیں بناتے ہیں۔

کچھ مضحکہ خیز سننا چاہتے ہیں؟ چوٹ کی توہین کو شامل کرنے کے لیے، نامزد عناصر عالمی متغیر کے طور پر صرف اس صورت میں قابل رسائی ہیں جب ناموں میں خط کے سوا کچھ نہ ہو۔ براؤزر کسی ایسے عنصر کے لیے عالمی حوالہ تخلیق نہیں کریں گے جس میں خاص حروف اور نمبر ہوں، جیسے hello-world اور item1.

نتیجہ

آئیے خلاصہ کریں کہ ہم یہاں کیسے پہنچے:

• تمام بڑے براؤزرز خود بخود ایک کے ساتھ ہر DOM عنصر کے عالمی حوالہ جات بناتے ہیں۔ id (یا، بعض صورتوں میں، a name وصف).
• ان عناصر تک ان کے عالمی حوالوں سے رسائی ناقابل اعتبار اور ممکنہ طور پر خطرناک ہے۔ استعمال کریں۔ querySelector or getElementById بجائے.
• چونکہ عالمی حوالہ جات خود بخود تیار ہوتے ہیں، اس لیے ان کے آپ کے کوڈ پر کچھ مضر اثرات ہو سکتے ہیں۔ استعمال کرنے سے بچنے کی یہ ایک اچھی وجہ ہے۔ id attribute جب تک کہ آپ کو واقعی اس کی ضرورت نہ ہو۔

دن کے اختتام پر، جاوا اسکرپٹ میں نامزد گلوبلز استعمال کرنے سے گریز کرنا شاید ایک اچھا خیال ہے۔ میں نے پہلے اس قیاس کا حوالہ دیا تھا کہ یہ کس طرح "برٹل" کوڈ کی طرف جاتا ہے، لیکن پوائنٹ کو گھر پہنچانے کے لیے مکمل متن یہ ہے:

عام اصول کے طور پر، اس پر بھروسہ کرنے سے کوڈ ٹوٹ جائے گا۔ اس API میں کون سے IDs کی میپنگ ختم ہوتی ہے وقت کے ساتھ ساتھ مختلف ہو سکتے ہیں، جیسا کہ ویب پلیٹ فارم میں نئی ​​خصوصیات شامل کی جاتی ہیں، مثال کے طور پر۔ اس کے بجائے استعمال کریں۔ document.getElementById() or document.querySelector().

مجھے لگتا ہے کہ حقیقت یہ ہے کہ ایچ ٹی ایم ایل اسپیک خود اس خصوصیت سے دور رہنے کی سفارش کرتا ہے۔