Memahami pembangunan modular kemahiran Javascript_javascript

Little A ialah jurutera hadapan bagi pasukan pemula dan bertanggungjawab untuk menulis program Javascript projek.

Konflik pembolehubah global

Berdasarkan pengalamannya sendiri, Xiao A mula-mula mengekstrak beberapa fungsi yang biasa digunakan, menulisnya sebagai fungsi dan meletakkannya dalam pangkalan fail awam.js:

Salin kod Kod adalah seperti berikut:

var _ = {
$: function(id) { return document.getElementById(id); GetCookie: function(key) { ... },
setCookie: fungsi(kunci, nilai) { ... }
};

Little A meletakkan fungsi ini dalam objek _ untuk mengelakkan konflik yang disebabkan oleh terlalu banyak pembolehubah global. Dia memberitahu ahli pasukan lain bahawa jika sesiapa mahu menggunakan fungsi ini, import sahaja base.js.
Little C ialah rakan sekerja Little A. Dia melaporkan kepada Little A: Halamannya telah memperkenalkan perpustakaan kelas yang dipanggil underscore.js, dan perpustakaan kelas ini juga akan menduduki _ pembolehubah global, jadi ia akan mengikuti _ dalam pangkalan. konflik js. Little A terfikir sendiri bahawa underscore.js ialah perpustakaan pihak ketiga dan mungkin sukar untuk diubah, tetapi base.js telah digunakan pada banyak halaman dan adalah mustahil untuk mengubahnya. Akhirnya, Little A tidak mempunyai pilihan selain menukar pembolehubah global yang diduduki oleh underscore.js.

Pada masa ini, Little A mendapati bahawa meletakkan semua fungsi dalam ruang nama boleh mengurangkan kebarangkalian konflik pembolehubah global, tetapi ia tidak menyelesaikan masalah konflik pembolehubah global.

Pergantungan

Dengan perkembangan perniagaan, Xiao A telah menulis satu siri pustaka fungsi dan komponen UI, seperti komponen penukaran tab tabs.js Komponen ini perlu memanggil fungsi dalam base.js dan util.js.

Pada suatu hari, rakan sekerja baharu Xiao D dan Xiao A melaporkan bahawa mereka telah merujuk tabs.js dalam halaman, tetapi fungsinya tidak normal. Little A menemui masalah itu pada pandangan pertama Ternyata Little D tidak tahu bahawa tabs.js bergantung pada base.js dan util.js, dan dia tidak menambah rujukan kepada kedua-dua fail ini. Jadi, dia segera membuat perubahan:

Salin kod Kod adalah seperti berikut:

Bagaimanapun, fungsi itu masih tidak normal Pada masa ini, Little A mengajar Little D: "Dikatakan sebagai tanggungan, jadi pihak tanggungan mesti diletakkan sebelum pihak yang bergantung." Ternyata Xiao D meletakkan base.js dan util.js selepas tabs.js.
Little A berfikir pada dirinya sendiri bahawa sebagai pengarang, dia secara semula jadi mengetahui kebergantungan komponen, tetapi sukar untuk orang lain memberitahu, terutamanya pendatang baru.

Selepas beberapa lama, Xiao A menambahkan fungsi pada komponen penukaran tab Untuk merealisasikan fungsi ini, tabs.js juga perlu memanggil fungsi dalam ui.js. Pada masa ini, Little A menemui masalah yang serius. Dia perlu menambah rujukan pada ui.js pada semua halaman yang dipanggil tabs.js! ! !

Selepas beberapa lama, Xiao A mengoptimumkan tabs.js komponen ini tidak lagi bergantung pada util.js, jadi dia mengalih keluar rujukan kepada util.js dalam semua halaman yang menggunakan tabs.js. Pengubahsuaiannya menyebabkan masalah besar Pasukan ujian MM memberitahunya bahawa beberapa halaman tidak normal. Little A melihat dan tiba-tiba menyedari bahawa fungsi lain beberapa halaman menggunakan fungsi dalam util.js Dia mengalih keluar rujukan kepada fail ini dan ralat berlaku. Untuk memastikan kefungsian normal, dia memulihkan kod tersebut.

Little A thought again, adakah terdapat cara untuk mengubah suai kebergantungan tanpa mengubah halaman satu demi satu, tanpa menjejaskan fungsi lain?

Modular

Ketika Little A melayari Internet, dia secara tidak sengaja menemui kaedah pengekodan modular novel yang boleh menyelesaikan semua masalah yang dia hadapi sebelum ini.

Dalam pengaturcaraan modular, setiap fail adalah modul. Setiap modul dicipta oleh fungsi yang dipanggil define. Sebagai contoh, selepas menukar base.js kepada modul, kod akan menjadi seperti ini:

Salin kod Kod adalah seperti berikut:

define(fungsi(memerlukan, eksport, modul) {
eksport.$ = function(id) { return document.getElementById(id);
exports.getCookie = function(key) { ... };
exports.setCookie = fungsi(kunci, nilai) { ... };
});

Antara muka yang disediakan oleh base.js ditambahkan pada objek eksport. Eksport ialah pembolehubah tempatan, dan kod keseluruhan modul tidak menduduki separuh daripada pembolehubah global.
Bagaimana untuk memanggil antara muka yang disediakan oleh modul tertentu? Ambil tabs.js sebagai contoh, ia bergantung pada base.js dan util.js:

Salin kod Kod adalah seperti berikut:

define(fungsi(memerlukan, eksport, modul) {
var _ = memerlukan('base.js'), util = memerlukan('util.js');
var div_tabs = _.$('tabs');
// .... Kod lain
});

Modul boleh mendapatkan antara muka modul lain melalui fungsi tempatan yang diperlukan. Pada masa ini, pembolehubah _ dan util adalah kedua-dua pembolehubah tempatan, dan nama pembolehubah dikawal sepenuhnya oleh pembangun Jika anda tidak suka _, anda juga boleh menggunakan asas:

Salin kod Kod adalah seperti berikut:

define(fungsi(memerlukan, eksport, modul) {
var base = memerlukan('base.js'), util = memerlukan('util.js');
var div_tabs = base.$('tabs');
// .... Kod lain
});

Sebaik sahaja anda mahu mengalih keluar util.js dan menambah ui.js, cuma ubah suai tabs.js:

Salin kod Kod adalah seperti berikut:

define(fungsi(memerlukan, eksport, modul) {
var base = memerlukan('base.js'), ui = memerlukan('ui.js');
var div_tabs = base.$('tabs');
// .... Kod lain
});

Pemuat

Disebabkan kekurangan sokongan penyemak imbas asli, jika kita mahu kod secara modular, kita mesti menggunakan sesuatu yang dipanggil pemuat.

Pada masa ini terdapat banyak pelaksanaan pemuat, seperti require.js dan seajs. Pustaka kelas JRaiser juga mempunyai pemuatnya sendiri.