Kerangka kerja JavaScript modern seperti Angular, Vue, dll. memiliki mekanisme bawaan untuk menyusun kode JavaScript. Saat tidak menggunakan kerangka kerja ini, kita dapat menggunakan teknik sederhana untuk menyusun JavaScript kita. Pada postingan kali ini, saya akan menunjukkan salah satunya dengan menggunakan pola Revealing Module
Pola ini sangat populer dan ada banyak sekali sumber online yang memanfaatkan desain ini dan di sini saya akan mencoba berbagi implementasi sederhana dari pola yang sama
Mengapa Menyusun Kode JavaScript
Kode JavaScript yang dienkapsulasi dan berbasis modular mempromosikan penggunaan kembali dan lebih baik untuk pemeliharaan
Untuk menghindari spageti JavaScript di seluruh basis kode, pola Modul Pengungkap harus digunakan untuk menyusun kode JavaScript
Berikut adalah beberapa manfaat menggunakan pola ini
- Kode "Modularisasi" menjadi objek yang dapat digunakan kembali
- Variabel/fungsi diambil dari namespace global
- Ekspos hanya anggota publik
- Cara 'Lebih bersih' untuk mengekspos anggota publik
Mengungkap Struktur Modul
Berikut adalah contoh jenis format dan struktur standar untuk pola Revealing Module
Pengaturan awal
Sebelum kita menyelami kode JavaScript, mari kita bicara tentang penyiapan lingkungan pengembangan awal. Saya menggunakan proyek JavaScript yang sangat mendasar untuk demo, hanya memiliki satu halaman HTML, beberapa gaya CSS, dan server dev dasar. Untuk informasi lebih lanjut, silakan periksa Basic Front-end Dev. Posting Pengaturan Lingkungan. Ini akan menjadi titik awal bagi kita untuk bergerak maju
Pada titik ini, saya memiliki beberapa HTML dan aplikasi kosong. file js
Kode JavaScript Aplikasi
Mari kita mulai dengan aplikasi itu sendiri. Mengikuti struktur yang disebutkan di atas, inilah shell untuk aplikasi kita
JavaScript
x
1
var app = function () {2
//private members _3
4
//public API5
return { _6
7
};_8
9
}();_Sekarang, mari tambahkan beberapa fungsi ke aplikasi kita
JavaScript
xxxxxxxxxx_
1
20
1
//private members _02
3
//private members _14
//private members _25
6
//private members _37
//private members _48
//private members _59
10
//private members _611
//private members _712
//private members _513
14
//private members _915
016
117
218
_319
20
}();_Di sini, saya menambahkan satu properti, _3 dan dua fungsi, 4 dan 5. Kemudian di bagian API publik, saya membuka properti 3 dan satu fungsi. Perhatikan bahwa saya tidak memaparkan fungsi _7 dan ini menggambarkan fungsi pribadi yang tidak dapat diakses dari luar blok kode ini
Selanjutnya, saya menambahkan kode berikut di dokumen. siap di index. html seperti yang ditunjukkan di bawah ini
JavaScript
xxxxxxxxxx_
1
1
62
73
_84
_95
//public API 06
7
//public API 18
//public API 2Sekarang, jika Anda menjalankan perintah _8 dan pergi ke halaman browser, Anda akan melihat bahwa dua baris pertama berfungsi dan baris ketiga 9 tidak berfungsi, yang diharapkan
Jadi, inilah gambaran umum dari pola ini. Ini membantu kami mengatur kode JavaScript kami tanpa mencemari namespace global
Selanjutnya, mari kita lihat bagaimana kita dapat menggunakan pola ini untuk menggabungkan panggilan AJAX
Mengkonsolidasikan Panggilan AJAX
Untuk menghilangkan panggilan Ajax yang tersebar di seluruh kode, kita dapat menggunakan Pola Modul Pengungkap untuk mengkonsolidasikan panggilan Ajax
Pengembang dapat membuat skrip layanan data dan menggunakan janji Ajax untuk skenario sukses dan gagal melalui panggilan balik
Biasanya sebuah proyek akan memiliki lebih dari satu layanan data dan tidak mengulangi kode Ajax boilerplate. kita dapat memfaktorkan ulang bagian pemanggilan Ajax yang sebenarnya ke dalam objek JavaScript lain yang disebut, }();0 dan, Anda dapat menebaknya dengan benar, kita juga dapat menggunakan pola Modul Pengungkap untuk layanan ini
}();0 akan menjadi detail implementasi tingkat rendah dan akan menangani semua jenis panggilan Ajax. Sementara Layanan Data akan menggunakan}();_2 untuk melakukan operasi terkait data
}();0 Implementasi
Ini adalah implementasi sederhana dari }();_0 (ajaxService. js). Itu hanya memiliki satu metode yang mengambil beberapa input dan mengembalikan janji yang kemudian dapat digunakan kode panggilan untuk membuat panggilan Ajax
JavaScript
xxxxxxxxxx_
1
28
1
//public API _42
3
//public API 54
5
//public API 66
//public API _77
8
//public API 89
//public API _910
return { _011
return { _112
return { _213
return { _314
return { _415
return { _516
return { _617
return { _718
return { _819
20
return { _921
//private members _522
23
//private members _924
025
_326
_427
28
}();_Implementasi Layanan Data
Saya membuat file JavaScript lain bernama dataService. js dengan kode berikut
JavaScript
xxxxxxxxxx_
1
21
1
_72
3
_84
_95
6
};_07
};_18
};_29
//private members _510
11
};_412
};_513
//private members _514
15
//private members _916
017
};_918
019
_420
21
}();_Itu juga menggunakan pola Modul Pengungkap dan kodenya sederhana. Layanan ini menggunakan }();_0 secara internal. Perhatikan bahwa saya menggunakan backend pengujian yang tersedia untuk umum di internet dan melakukan panggilan Ajax ke sana. Anda dapat menggunakan REST API Anda sendiri dengan mengganti titik akhir (URL)
Aplikasi. Pembaruan Kode js
Saya membuat metode baru di app. js dan metode ini menggunakan }();_6 untuk operasinya
Aplikasi Bootstrap
Saya juga mereferensikan file JavaScript ini di index. html dan memperbarui fungsi }();_7 seperti yang ditunjukkan di bawah ini
dan inilah output konsol dari operasi ini
Ringkasan
Pola Revealing Module dapat membantu menyusun kode JavaScript. Ini memiliki keterbatasan, tetapi untuk basis kode sederhana, ini bisa bekerja dengan sangat baik. Anda dapat mengunduh kode demo dari repo git ini. Beri tahu saya jika Anda memiliki komentar atau pertanyaan. Sampai lain kali, Selamat Coding