ID Elemen Dinamakan Boleh Dirujuk Sebagai JavaScript Globals

Adakah anda tahu? Elemen DOM dengan ID boleh diakses sebagai pembolehubah global dalam JavaScript? Ini adalah ciri yang telah lama wujud, tetapi saya hanya membincangkannya untuk kali pertama.

Jika anda mula -mula mendengar tentang ciri ini, bersiaplah! Cukup tambahkan ID ke elemen dalam HTML dan kita dapat melihat bagaimana ia digunakan dalam amalan:

<div id="cool"></div>

Biasanya, kami menggunakan

atau querySelector("#cool") untuk menentukan pemboleh ubah baru untuk memilih elemen: getElementById("cool")

var el = querySelector("#cool");

tetapi sebenarnya, kita boleh mengakses

tanpa operasi yang rumit ini: #cool Oleh itu, mana -mana ID (atau atribut nama) dalam HTML boleh diakses dalam JavaScript menggunakan

. Sekali lagi, ini bukan ciri "baru", tetapi jarang berlaku.

window[ELEMENT_ID] Seperti yang anda mungkin dapati, mengakses skop global dengan rujukan yang dinamakan bukanlah penyelesaian terbaik. Sesetengah orang menyebutnya sebagai "pencemar skop global." Kami akan meneroka sebab -sebabnya, tetapi pertama ...

beberapa latar belakang

Kaedah ini diterangkan dalam spesifikasi HTML, yang menggambarkannya sebagai "akses yang dinamakan ke objek tetingkap".

Internet Explorer adalah pelayar pertama untuk melaksanakan ciri ini. Pelayar lain telah menambah ciri ini. Pada masa itu, Gecko adalah satu -satunya penyemak imbas yang tidak menyokongnya secara langsung dalam mod standard, tetapi memilih untuk menggunakannya sebagai ciri eksperimen. Orang ramai teragak -agak untuk melaksanakannya, tetapi untuk keserasian penyemak imbas akhirnya maju (Gecko bahkan cuba meyakinkan WebKit untuk mengeluarkannya dari mod standard) dan akhirnya memasuki mod standard di Firefox 14.

Apa yang mungkin kurang dikenali ialah pelayar perlu mengambil beberapa langkah berjaga -jaga (pelbagai tahap kejayaan) untuk memastikan bahawa pembolehubah global yang dihasilkan tidak merosakkan laman web. Salah satu langkahnya ialah ...

Occlusion Variable

Bahagian yang paling menarik dari ciri ini ialah rujukan unsur yang dinamakan tidak mengaburkan pembolehubah global yang ada. Oleh itu, jika ID elemen DOM ditakrifkan sebagai pemboleh ubah global, ia tidak menimpa pembolehubah yang sedia ada. Contohnya:

window.foo = "bar";

Super Versa:

<div id="foo">I won't override window.foo</div>

console.log(window.foo); // 输出 "bar"

Tingkah laku ini sangat penting kerana ia menghapuskan liputan berbahaya, seperti

<div id="foo">I will be overridden :(</div>

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

, jika tidak, ia akan menyebabkan konflik dengan membatalkan API Alert. Teknik perlindungan ini kemungkinan besar sebab mengapa anda (jika anda seperti saya) mula -mula belajar mengenainya.

Artikel Terhadap Menamakan Pembolehubah Global

Saya berkata sebelum ini bahawa menggunakan unsur -unsur global yang dinamakan sebagai rujukan mungkin bukan penyelesaian terbaik. Terdapat banyak sebab, dan TJ Vantoll telah menghuraikannya dengan baik di blognya, dan saya akan meringkaskannya di sini:

• Jika perubahan DOM, rujukan juga akan berubah. Ini menjadikan kod ini sangat "lemah" (istilah dalam spesifikasi), dan pemisahan kebimbangan antara HTML dan JavaScript mungkin terlalu ketat.
• petikan yang tidak disengajakan terlalu mudah. Typo mudah kemungkinan besar akan merujuk kepada pembolehubah global yang dinamakan dan memberi anda hasil yang tidak dijangka.
Kaedah pelaksanaan
• berbeza -beza dalam penyemak imbas yang berbeza. Sebagai contoh, kita sepatutnya dapat mengakses sauh dengan ID (mis. <a> </a>), tetapi beberapa penyemak imbas (iaitu Safari dan Firefox) mengembalikan rujukan di konsol. <a></a>
• Ia mungkin tidak mengembalikan apa yang anda fikir akan berlaku. Menurut spesifikasi, apabila terdapat banyak contoh unsur -unsur yang dinamakan dalam DOM (contohnya, dua
  contoh), penyemak imbas harus mengembalikan htmlcollection yang mengandungi pelbagai contoh ini. Walau bagaimanapun, Firefox hanya mengembalikan contoh pertama. Sekali lagi, spesifikasi menyatakan bahawa kita harus menggunakan contoh ID dalam pokok elemen. Tetapi berbuat demikian tidak akan menghalang halaman daripada bekerja atau apa -apa seperti itu. <div> kemungkinan kos prestasi? <li> Maksud saya, penyemak imbas perlu membuat senarai rujukan itu dan mengekalkannya. Sesetengah orang telah menjalankan ujian dalam benang stackoverflow di mana pembolehubah global yang dinamakan sebenarnya melakukan lebih baik dalam satu ujian dan lebih rendah dalam ujian baru -baru ini. <strong> </strong> </li> Langkah berjaga -jaga lain <h3> Katakan kita meninggalkan kritikan terhadap penggunaan pembolehubah global yang dinamakan dan terus menggunakannya. Semua yang terbaik. Walau bagaimanapun, terdapat beberapa perkara yang mungkin anda ingin pertimbangkan apabila anda melakukan ini. </h3> <p> Polyfills </p> <h4> mungkin terdengar melampau, tetapi jenis pemeriksaan global ini adalah keperluan persediaan tipikal untuk polyfills. Semak contoh berikut, kami menetapkan kuki menggunakan API Cookiestore baru, polyfilling dalam penyemak imbas yang belum menyokongnya: </h4> <p> </p> Kod ini berfungsi dengan baik di Chrome, tetapi dalam Safari melemparkan ralat berikut: <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div id=&quot;cool&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> </p> Pada masa penulisan, Safari tidak menyokong API CookiesTore. Oleh itu, polyfill tidak akan digunakan kerana ID elemen IMG mewujudkan pembolehubah global yang bertentangan dengan pembolehubah global CookiesTore. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var el = querySelector(&quot;#cool&quot;);</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> Kemas kini API JavaScript </p> <h4> kita boleh mengubah keadaan dan mencari masalah lain, iaitu, kemas kini ke enjin JavaScript pelayar boleh memecahkan rujukan global unsur yang dinamakan. </h4> <p> Contoh: </p> <p> </p> Skrip ini mengambil rujukan kepada elemen input dan panggilan fokus () di atasnya. Ia berfungsi dengan baik. Namun, kita tidak tahu berapa lama ia akan berfungsi. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">window.foo = &quot;bar&quot;;</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> anda akan melihat bahawa pembolehubah global yang kami gunakan untuk merujuk elemen input berhenti berfungsi sebaik penyemak imbas mula menyokong API Barcodedetector. Pada masa itu, pembolehubah global window.barcodedetector tidak lagi menjadi rujukan kepada elemen input, dan .focus () akan membuang ralat "window.barcodedetector.focus bukan fungsi" ralat. </p> <h3> Kesimpulan </h3> <p> mari kita meringkaskan bagaimana kita sampai ke tahap ini: </p> <ul> <li> Semua pelayar utama secara automatik membuat rujukan global kepada setiap elemen DOM dengan ID (atau dalam beberapa kes atribut nama). </li> <li> Mengakses unsur -unsur ini melalui rujukan global mereka tidak boleh dipercayai dan boleh berbahaya. Sila gunakan <code>querySelector atau getElementById sebaliknya.
• Sejak rujukan global dihasilkan secara automatik, mereka mungkin mempunyai beberapa kesan sampingan pada kod anda. Ini adalah alasan yang baik untuk mengelakkan menggunakan atribut ID melainkan anda memerlukannya.

Pada akhirnya, adalah lebih baik untuk mengelakkan menggunakan pembolehubah global yang dinamakan dalam JavaScript. Saya telah memetik lebih awal apa spesifikasi yang dikatakan tentangnya menyebabkan kod "kelemahan", tetapi inilah teks penuh untuk menekankan ini:

Secara umumnya, bergantung pada ini akan membawa kepada kod rapuh. ID yang akhirnya boleh memetakan ke API ini dari masa ke masa, sebagai contoh, sebagai ciri baru ditambah ke platform web. Jangan lakukan ini, gunakan document.getElementById() atau document.querySelector().

Saya fikir spesifikasi HTML itu sendiri mencadangkan mengelakkan ciri ini mengatakan semuanya.