Xiao A adalah insinyur front-end dari tim wirausaha tertentu, yang bertanggung jawab untuk menulis program JavaScript proyek.
Konflik variabel global
Menurut pengalamannya sendiri, Xiao yang pertama kali mengekstraksi beberapa fungsi yang umum digunakan dan menuliskannya ke dalam fungsi dan menempatkannya di basis file publik.
Salinan kode adalah sebagai berikut:
var _ = {
$: function (id) {return document.getElementById (id); },
getCookie: function (key) {...},
setCookie: function (tombol, value) {...}
};
Xiao A menempatkan fungsi -fungsi ini di objek _ untuk mencegah terlalu banyak variabel global yang menyebabkan konflik. Dia mengatakan kepada anggota tim lainnya bahwa jika ada yang ingin menggunakan fungsi -fungsi ini, cukup perkenalkan Base.js.
Xiao C adalah kolega Xiao A. Dia mengatakan kepada Xiao A: Halamannya telah memperkenalkan perpustakaan kelas yang disebut Underscore.js, dan perpustakaan kelas ini juga akan menempati variabel global ini, yang akan bertentangan dengan "base.js". Xiao Pemikiran pada dirinya sendiri bahwa underscore.js adalah perpustakaan pihak ketiga dan mungkin sulit untuk dimodifikasi, tetapi base.js telah tersebar di banyak halaman dan tidak mungkin untuk memodifikasinya. Pada akhirnya, Xiao A tidak punya pilihan selain mengubah variabel global yang ditempati oleh Underscore.js.
Pada saat ini, Xiao A menemukan bahwa menempatkan fungsi dalam namespace dapat mengurangi probabilitas konflik variabel global, tetapi tidak menyelesaikan masalah konflik variabel global.
mengandalkan
Dengan pengembangan bisnis, Xiao A telah menulis serangkaian perpustakaan fungsi dan komponen UI, seperti Tag Switching Component Tabs.js, yang membutuhkan fungsi panggilan di base.js dan util.js.
Suatu hari, kolega baru Xiao D dan Xiao A melaporkan bahwa ia telah mengutip tabs.js di halaman, tetapi fungsinya tidak normal. Xiao A menemukan masalah dengan sekilas. Ternyata Xiao D tidak tahu bahwa Tabs.js mengandalkan Base.js dan util.js, jadi dia tidak menambahkan referensi ke dua file ini. Jadi dia segera membuat perubahan:
Salinan kode adalah sebagai berikut:
<skrip src = "tabs.js"> </script>
<skrip src = "base.js"> </script>
<skrip src = "util.js"> </script>
Namun, fungsinya masih abnormal. Pada saat ini, Xiao A mengajarkan pelajaran: "Semua orang mengatakan itu adalah ketergantungan, sehingga pihak yang bergantung harus ditempatkan di hadapan pihak yang tergantung." Ternyata Xiao D menempatkan base.js dan util.js setelah tabs.js.
Xiao Pemikiran pada dirinya sendiri bahwa dia adalah penulisnya dan secara alami tahu ketergantungan komponen, tetapi sulit untuk dikatakan orang lain, terutama pendatang baru.
Setelah beberapa saat, Xiao berfungsi tambahan untuk komponen tag switching. Untuk mengimplementasikan fungsi ini, tabs.js juga perlu memanggil fungsi di UI.JS. Pada saat ini, Xiao menemukan masalah serius. Dia perlu menambahkan referensi UI.js ke semua halaman yang disebut tabs.js! Lai Lai
Setelah beberapa saat, Xiao tab. Sesuatu yang besar terjadi padanya ketika dia membuat modifikasi. MM di tim uji mengatakan kepadanya bahwa beberapa halaman tidak normal. Ketika Xiao A melihatnya, ia tiba -tiba menyadari bahwa fungsi lain dari beberapa halaman menggunakan fungsi di util.js. Dia menghapus referensi ke file ini dan menyebabkan kesalahan. Untuk memastikan fungsinya normal, ia memulihkan kode lagi.
Xiao Sebuah pemikiran lagi, apakah ada cara untuk memodifikasi dependensi tanpa memodifikasi halaman satu per satu, dan tidak mempengaruhi fungsi lain?
Modular
Ketika Xiao A berbelanja di internet, ia secara tidak sengaja menemukan metode pengkodean modular baru yang dapat menyelesaikan semua masalah yang ditimbulkannya sebelumnya.
Dalam pemrograman modular, setiap file adalah modul. Setiap modul dibuat oleh fungsi yang disebut Define. Misalnya, setelah mengubah basis.js menjadi modul, kode akan menjadi seperti ini:
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul) {
ekspor. $ = function (id) {return document.getElementById (id); };
exports.getCookie = function (key) {...};
exports.setCookie = function (key, value) {...};
});
Semua antarmuka yang disediakan oleh Base.js ditambahkan ke objek Ekspor. Ekspor adalah variabel lokal, dan kode seluruh modul tidak menempati setengah dari variabel global.
Jadi bagaimana Anda memanggil antarmuka yang disediakan oleh modul tertentu? Ambil tabs.js sebagai contoh, itu tergantung pada base.js dan util.js:
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul) {
var _ = membutuhkan ('base.js'), util = membutuhkan ('util.js');
var div_tabs = _. $ ('tab');
// .... kode lain
});
Modul dapat memperoleh antarmuka modul lain melalui fungsi lokal yang dibutuhkan. Pada saat ini, variabel _ dan util keduanya variabel lokal, dan nama variabel sepenuhnya dikendalikan oleh pengembang. Jika Anda tidak suka _, Anda juga dapat menggunakan basis:
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul) {
var base = membutuhkan ('base.js'), util = membutuhkan ('util.js');
var div_tabs = base. $ ('tab');
// .... kode lain
});
Setelah Anda ingin menghapus util.js dan menambahkan UI.js, cukup ubah tabs.js:
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul) {
var base = membutuhkan ('base.js'), ui = membutuhkan ('ui.js');
var div_tabs = base. $ ('tab');
// .... kode lain
});
Pemuat
Karena kurangnya dukungan browser asli, jika kita ingin mengkode dengan cara modular, kita harus mengandalkan sesuatu yang disebut loader.
Saat ini, ada banyak implementasi loader, seperti kebutuhan.js dan Seajs. Perpustakaan Kelas Jraiser juga memiliki loader sendiri.