Teks asli bahasa Inggris: Tujuh aturan JavaScript yang Tidak Mencolok
Alamat asli: http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
Penulis asli: Chris Heilmann
Alamat terjemahan: http://www.zhuoqun.net/html/y2008/1103.html
Ditulis di depan: Saat kejun melatih kami JavaScript beberapa waktu lalu, dia merekomendasikan banyak artikel klasik di slide, termasuk artikel yang satu ini. Saya merasa sangat baik setelah membacanya, tetapi saya sering tidak memahami artikelnya secara mendalam. Kebetulan saya tidak menemukan artikel ini versi China, jadi saya mendapat ide untuk menerjemahkannya, jadi saya terpikir untuk menerjemahkannya. agar saya dapat membagikannya dan memperdalam pemahaman saya. Penulis artikel ini, Chris Heilmann, adalah seorang insinyur Inggris di Yahoo! (sosok "ayah baptis" menurut Kejun), dan terjemahan artikel ini juga disetujui olehnya.
Satu hal lagi di sini, saya telah menerjemahkan banyak hal sebelumnya, tetapi saat itu saya lebih banyak menerjemahkan demi terjemahan, dan saya tidak memahami banyak artikel teknis, jadi saya masih menjadi penerjemah sampai sekarang. Saya akan terus menerjemahkan beberapa artikel di masa mendatang, namun sebaiknya saya hanya menerjemahkan artikel klasik yang perlu dipahami dengan cermat. Jika Anda punya waktu, Anda masih harus menulis lebih banyak kode.
Terjemahan terminologi: Mengenai istilah "JavaScript yang Tidak Mencolok", saya tidak dapat memikirkan terjemahan yang tepat. Setelah mencari di Internet, saya menemukan bahwa beberapa diterjemahkan sebagai "JavaScript sederhana", beberapa diterjemahkan sebagai "JavaScript yang tidak mengganggu", dan beberapa di Taiwan diterjemahkan sebagai "JavaScript yang tidak mengganggu"... Setelah banyak penelitian, Saya memutuskan untuk menggunakan "JavaScript yang tidak mengganggu". Terjemahan ini adalah "JavaScript yang mengganggu" (walaupun ini masih kurang cocok untuk saya), silakan lihat artikel ini untuk detailnya. Sebenarnya "JavaScript Tidak Mencolok" mengandung banyak arti, dan sulit untuk meringkasnya dalam satu kata. Jika Anda tertarik, Anda bisa melihat penjelasan "JavaScript Tidak Mencolok" di Wikipedia. Selain itu, menurut saya terjemahan adalah untuk mengungkapkan maksud penulis, dan tidak harus diterjemahkan kata demi kata, oleh karena itu, untuk memudahkan pemahaman pembaca, saya telah menghapus sebagian dan menambahkan beberapa di artikel, tetapi ini adalah tanpa merusak makna teks aslinya yang dilakukan atas dasar.
Ada hal lain yang perlu diperhatikan yaitu kemampuan penerjemahan saya sangat amatir, jadi pasti ada kesalahan dalam penerjemahan, jadi mohon koreksinya.
Setelah bertahun-tahun mengembangkan, mengajar, dan menulis JavaScript yang tidak mengganggu, saya menemukan pedoman berikut. Saya harap mereka membantu Anda memahami sedikit tentang mengapa lebih baik merancang dan mengeksekusi JavaScript dengan cara ini. Aturan ini telah membantu saya mengirimkan produk lebih cepat, dengan kualitas lebih tinggi, dan lebih mudah perawatannya.
1. Jangan membuat asumsi apa pun (JavaScript adalah asisten yang tidak bisa diandalkan)
Mungkin karakteristik paling penting dari JavaScript yang tidak mengganggu adalah Anda harus berhenti membuat asumsi apa pun:
jangan berasumsi bahwa JavaScript tersedia, sebaiknya Anda berpikir bahwa itu mungkin. tidak tersedia daripada mengandalkannya secara langsung.
Jangan berasumsi bahwa browser mendukung metode dan properti sampai Anda mengujinya dan memastikan bahwa metode dan properti tersebut berfungsi.
Jangan berasumsi bahwa kode HTML itu benar seperti yang Anda pikirkan, periksalah setiap saat, dan jangan lakukan apa pun jika tidak tersedia.
Jadikan fungsi JavaScript tidak bergantung pada perangkat input Ingatlah bahwa skrip lain dapat memengaruhi fungsi JavaScript Anda, jadi pastikan skrip Anda dicakup seaman mungkin.
Sebelum mulai mendesain skrip Anda, hal pertama yang harus dipertimbangkan adalah memeriksa kode HTML yang akan Anda buat skripnya dan melihat apakah ada sesuatu yang dapat membantu Anda mencapai tujuan Anda.
2. Temukan hubungan hook dan node (HTML adalah landasan pembuatan skrip)
Sebelum Anda mulai menulis skrip, lihatlah HTML yang ingin Anda tuliskan JavaScriptnya. Jika HTML tidak terorganisir atau tidak diketahui, hampir tidak mungkin untuk mendapatkan solusi skrip yang baik - kemungkinan besar Anda akan membuat terlalu banyak markup dalam JavaScript, atau aplikasi akan terlalu bergantung pada JavaScript.
Ada beberapa hal yang perlu dipertimbangkan dalam HTML, dan itu adalah hubungan hook dan node.
<1>.HTML hook
Hook asli dan terpenting dari HTML adalah ID, dan ID dapat diakses melalui metode DOM tercepat-getElementById. Jika semua ID dalam dokumen HTML yang valid adalah unik (ada bug di IE terkait nama dan ID, namun beberapa perpustakaan bagus mengatasi masalah ini), penggunaan ID aman, andal, dan mudah untuk diuji.
Beberapa kait lainnya adalah elemen HTML dan kelas CSS. Elemen HTML dapat diakses melalui metode getElementsByTagName, tetapi kelas CSS tidak dapat diakses melalui metode DOM asli di sebagian besar browser. Namun, ada banyak perpustakaan kelas eksternal yang menyediakan metode yang dapat mengakses nama kelas CSS (mirip dengan getElementsByClassName).
<2>.Hubungan Node HTML
Hal menarik lainnya tentang HTML adalah hubungan antar tag. Pikirkan pertanyaan berikut:
Bagaimana kita dapat mencapai node target dengan paling mudah dan dengan jumlah traversal DOM paling sedikit?
Dengan memodifikasi tanda apa, kita dapat mengakses sebanyak mungkin node anak yang perlu dimodifikasi?
Atribut atau informasi apa yang dimiliki suatu elemen tertentu yang dapat digunakan untuk menjangkau elemen lainnya?
Melintasi DOM membutuhkan banyak sumber daya dan lambat, itulah sebabnya Anda harus mencoba menggunakan teknik yang sudah digunakan di browser untuk melakukannya.
3. Serahkan traversal pada ahlinya (CSS, traverse DOM lebih cepat).
Membuat skrip DOM dan menggunakan metode atau properti (getElementsByTagName, nextSibling, previousSibling, parentNode, dan lainnya) untuk traversal DOM sepertinya membingungkan banyak orang . menarik. Hal yang menarik adalah kami telah melakukan hal ini melalui teknologi lain-CSS.
CSS adalah teknik yang menggunakan pemilih CSS untuk mengakses elemen target dan mengubah properti visualnya dengan melintasi DOM. Sepotong JavaScript kompleks yang menggunakan DOM dapat diganti dengan pemilih CSS:
var n = document.getElementById('nav');
jika(n){
var as = n.getElementsByTagName('a');
if(sebagai.panjang > 0){
untuk(var i=0;sebagai[i];i++){
sebagai[i].style.color = '#369′;
as[i].style.textDecoration = 'tidak ada';
}
}
}
/* Kode berikut mempunyai fungsi yang sama dengan kode di atas*/
#nav a{
warna:#369;
dekorasi teks: tidak ada;
}
Ini adalah teknik yang sangat ampuh yang dapat dimanfaatkan dengan baik. Anda dapat mencapainya dengan menambahkan kelas secara dinamis ke elemen tingkat tinggi di DOM atau mengubah ID elemen. Jika Anda menggunakan DOM untuk menambahkan kelas CSS ke badan dokumen, desainer dapat dengan mudah menentukan versi dokumen statis dan dinamis.
JavaScript:
var DynamicClass = 'js';
var b = dokumen.tubuh;
b.namakelas = b.namakelas ? b.namakelas + 'js' : 'js';
CSS:
/* Versi statis*/
#nav {
....
}
/* Versi dinamis*/
body.js #nav {
....
}
4. Memahami browser dan pengguna (dan membangun apa yang Anda perlukan berdasarkan pola penggunaan yang ada)
Bagian penting dari JavaScript yang tidak mengganggu adalah memahami cara kerja browser (terutama cara browser mogok) dan Apa yang diharapkan pengguna. Apa pun browsernya, Anda dapat dengan mudah membuat antarmuka yang benar-benar berbeda menggunakan JavaScript. Antarmuka seret dan lepas, area lipat, bilah gulir, dan penggeser semuanya dapat dibuat menggunakan JavaScript, namun masalah ini bukanlah masalah teknis yang sederhana. Anda perlu memikirkan pertanyaan berikut:
Bisakah antarmuka baru ini tidak bergantung pada perangkat masukan? Jika tidak, apa yang bisa Anda andalkan?
Apakah antarmuka baru yang saya buat mengikuti pedoman browser atau antarmuka kaya lainnya (dapatkah Anda beralih antar menu multi-level langsung dengan mouse? Atau apakah Anda perlu menggunakan tombol tab?)
Fungsionalitas apa yang perlu saya sediakan yang mengandalkan JavaScript?
Pertanyaan terakhir sebenarnya tidak menjadi masalah karena Anda dapat menggunakan DOM untuk membuat HTML jika diperlukan. Contohnya adalah tautan "cetak". Karena browser tidak menyediakan fungsionalitas non-JavaScript untuk mencetak dokumen, Anda perlu menggunakan DOM untuk membuat tautan tersebut. Hal yang sama berlaku untuk bilah judul yang dapat diklik yang mengimplementasikan modul konten yang diperluas dan diciutkan. Bilah judul tidak dapat diaktifkan oleh keyboard, tetapi tautannya bisa. Jadi untuk membuat bilah judul yang dapat diklik, Anda perlu menambahkan tautan menggunakan JavaScript, dan kemudian semua pengguna dengan keyboard dapat menutup dan memperluas modul konten.
Sumber yang bagus untuk memecahkan masalah jenis ini adalah Design Pattern Library. Adapun mengetahui hal-hal mana di browser yang tidak bergantung pada perangkat input, itu bergantung pada akumulasi pengalaman. Hal pertama yang perlu Anda pahami adalah mekanisme penanganan event.
5. Memahami kejadian (penanganan kejadian menyebabkan perubahan)
Penanganan kejadian adalah langkah kedua menuju JavaScript yang tidak mengganggu. Intinya bukan untuk membuat semuanya dapat diseret, diklik, atau menambahkan penanganan sebaris ke dalamnya, namun untuk memahami bahwa penanganan peristiwa adalah sesuatu yang dapat dipisahkan sepenuhnya. Kami telah memisahkan HTML, CSS, dan JavaScript, namun kami belum melangkah terlalu jauh dalam memisahkan penanganan event.
Event handler akan memonitor perubahan yang terjadi pada elemen-elemen dalam dokumen. Jika suatu event terjadi, handler akan menemukan objek yang luar biasa (biasanya parameter bernama e). .
Yang benar-benar menarik dari sebagian besar penanganan event adalah bahwa hal ini tidak hanya terjadi pada elemen yang ingin Anda akses, tetapi pada semua elemen yang lebih tinggi di DOM (tetapi tidak semua event seperti ini, fokus dan Pengecualian adalah event blur) . Misalnya, Anda dapat menggunakan fitur ini untuk menambahkan hanya satu pengendali peristiwa ke daftar navigasi, dan menggunakan metode pengendali peristiwa untuk mendapatkan elemen yang benar-benar memicu peristiwa tersebut. Teknik ini disebut delegasi acara, dan memiliki beberapa keuntungan:
Anda hanya perlu memeriksa apakah suatu elemen ada, alih-alih memeriksa setiap elemen. Anda dapat menambahkan atau menghapus node anak secara dinamis tanpa menghapus event handler yang sesuai. Anda dapat mengingat hal lain ketika merespons peristiwa yang sama pada elemen yang berbeda adalah Anda dapat menghentikan penyebaran peristiwa ke elemen induk dan Anda dapat mengganti perilaku default elemen HTML (seperti tautan). Namun, terkadang hal ini bukan ide yang baik karena browser memberikan perilaku pada elemen HTML karena suatu alasan. Misalnya, link mungkin mengarah ke target dalam halaman, dan membiarkannya tidak diubah akan memastikan bahwa pengguna juga dapat menandai status skrip halaman saat ini.
6. Pikirkan yang lain (ruang nama, cakupan, dan skema)
Kode Anda hampir tidak akan pernah menjadi satu-satunya kode skrip dalam dokumen. Jadi, sangat penting untuk memastikan bahwa tidak ada fungsi global atau variabel global dalam kode Anda yang dapat ditimpa oleh skrip lain. Ada beberapa pola yang tersedia untuk menghindari masalah ini, yang paling mendasar adalah dengan menggunakan kata kunci var untuk menginisialisasi semua variabel. Misalkan kita menulis skrip berikut:
var nav = document.getElementById('nav');
fungsi init(){
// melakukan sesuatu
}
pertunjukan fungsi(){
// melakukan sesuatu
}
pengaturan ulang fungsi(){
// melakukan sesuatu
}
Kode di atas berisi variabel global yang disebut nav dan tiga fungsi bernama init, show, dan reset. Fungsi-fungsi ini dapat mengakses variabel nav dan dapat mengakses satu sama lain melalui nama fungsi:
var nav = document.getElementById('nav');
fungsi init(){
menunjukkan();
if(nav.className === 'tunjukkan'){
mengatur ulang();
}
// melakukan sesuatu
}
pertunjukan fungsi(){
var c = nav.namakelas;
// melakukan sesuatu
}
pengaturan ulang fungsi(){
// melakukan sesuatu
}
Anda dapat menghindari pengkodean global di atas dengan merangkum kode menjadi sebuah objek, sehingga fungsi dapat diubah menjadi metode dalam objek, dan variabel global dapat diubah menjadi properti dalam objek. Anda perlu menggunakan metode "nama + titik dua" untuk mendefinisikan metode dan properti, dan Anda perlu menambahkan koma sebagai pemisah setelah setiap properti atau metode.
var skrip saya = {
nav:document.getElementById('nav'),
init:fungsi(){
// melakukan sesuatu
},
tampilkan:fungsi(){
// melakukan sesuatu
},
setel ulang:fungsi(){
// melakukan sesuatu
}
}
Semua metode dan properti dapat diakses secara eksternal dan internal menggunakan "nama kelas + operator titik".
var skrip saya = {
nav:document.getElementById('nav'),
init:fungsi(){
myScript.show();
if(myScript.nav.className === 'tunjukkan'){
myScript.reset();
}
// melakukan sesuatu
},
tampilkan:fungsi(){
var c = myScript.nav.className;
// melakukan sesuatu
},
setel ulang:fungsi(){
// melakukan sesuatu
}
}
Kekurangan model ini adalah setiap kali Anda mengakses metode atau properti lain dari suatu metode, Anda harus menambahkan nama objek di depannya, dan semua yang ada di objek tersebut dapat diakses dari luar. Jika Anda hanya ingin beberapa kode dapat diakses oleh skrip lain dalam dokumen, pertimbangkan pola modul berikut:
var skrip saya = fungsi(){
//Ini adalah metode dan properti pribadi
var nav = dokumen.getElementById('nav');
fungsi init(){
// melakukan sesuatu
}
pertunjukan fungsi(){
// melakukan sesuatu
}
pengaturan ulang fungsi(){
// melakukan sesuatu
}
//Metode dan properti publik dibungkus dalam pernyataan return menggunakan sintaksis objek
kembali {
publik:fungsi(){
},
foo:'bar'
}
}();
Anda dapat mengakses properti dan metode publik yang dikembalikan dengan cara yang sama seperti kode sebelumnya, dalam hal ini: myScript.public() dan myScript.foo. Namun ada hal lain yang tidak menyenangkan di sini: ketika Anda ingin mengakses metode publik dari luar atau dari metode pribadi di dalam, Anda masih harus menulis nama yang panjang (nama objek bisa sangat panjang). Untuk menghindari hal ini, Anda perlu mendefinisikannya sebagai pribadi dan hanya mengembalikan alias dalam pernyataan return:
var skrip saya = fungsi(){
// Ini adalah metode dan properti pribadi
var nav = dokumen.getElementById('nav');
fungsi init(){
// melakukan sesuatu
}
pertunjukan fungsi(){
// melakukan sesuatu
// melakukan sesuatu
}
pengaturan ulang fungsi(){
// melakukan sesuatu
}
var foo = 'batang';
function public(){
}
//Kembalikan hanya pointer ke metode dan properti privat yang ingin Anda akses
kembali {
publik: publik,
foo: foo
}
}();
Hal ini memastikan gaya kode yang konsisten dan memungkinkan Anda menggunakan alias yang lebih pendek untuk mengakses metode atau properti.
Jika Anda tidak ingin mengekspos metode atau properti apa pun ke dunia luar, Anda dapat merangkum semua kode ke dalam metode anonim dan menjalankannya segera setelah definisinya:
(function(){
// ini semua adalah metode dan properti pribadi
var nav = dokumen.getElementById('nav');
fungsi init(){
// melakukan sesuatu
show(); // Tidak diperlukan awalan nama kelas di sini
}
pertunjukan fungsi(){
// melakukan sesuatu
}
pengaturan ulang fungsi(){
// melakukan sesuatu
}
})();
Pola ini bagus untuk modul kode yang dijalankan hanya sekali dan tidak memiliki ketergantungan pada fungsi lainnya.
Dengan mengikuti aturan di atas, kode Anda akan berfungsi lebih baik bagi pengguna, dan kode Anda akan berjalan lebih baik di mesin serta lebih cocok dengan kode pengembang lain. Namun, ada satu kelompok yang perlu dipertimbangkan.
7. Pertimbangkan pengembang yang akan mengambil alih kode Anda (membuat pemeliharaan lebih mudah)
Langkah terakhir untuk membuat skrip Anda benar-benar tidak mengganggu adalah dengan memeriksa ulang setelah Anda menulisnya, dan menjaga pengembang yang akan mengambil alih kode Anda setelahnya. naskah ditayangkan. Pertimbangkan pertanyaan-pertanyaan berikut:
Apakah semua nama variabel dan fungsi masuk akal dan mudah dimengerti?
Apakah kodenya diatur dengan benar? Apakah mengalir dengan lancar dari awal hingga akhir?
Apakah semua ketergantungan sudah jelas?
Apakah komentar telah ditambahkan jika memungkinkan sehingga dapat menimbulkan kebingungan?
Hal terpenting yang perlu diperhatikan adalah: sadari bahwa kode HTML dan CSS dalam dokumen lebih mungkin diubah dibandingkan JavaScript (karena keduanya bertanggung jawab atas efek visual). Jadi jangan sertakan kelas dan ID apa pun yang dapat dilihat oleh pengguna akhir dalam kode skrip, tetapi pisahkan menjadi objek yang menyimpan informasi konfigurasi.
skrip saya = fungsi(){
var konfigurasi = {
ID navigasi:'nav',
kelas terlihat: 'tampilkan'
};
var nav = dokumen.getElementById(config.navigationID);
fungsi init(){
menunjukkan();
if(nav.className === config.visibleClass){
mengatur ulang();
};
// melakukan sesuatu
};
pertunjukan fungsi(){
var c = nav.namakelas;
// melakukan sesuatu
};
pengaturan ulang fungsi(){
// melakukan sesuatu
};
}();
Dengan cara ini pengelola mengetahui di mana harus mengubah properti ini tanpa harus mengubah kode lain.
Informasi lebih lanjut
Jadi itulah tujuh pedoman yang saya temukan. Jika Anda ingin mempelajari lebih lanjut tentang topik yang dibahas di atas, lihat tautan berikut: