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 Show
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 JavaScriptKode 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
Mengungkap Struktur ModulBerikut adalah contoh jenis format dan struktur standar untuk pola Revealing Module  Pengaturan awalSebelum 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 AplikasiMari 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 API 5 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 iniSelanjutnya, 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 diharapkanJadi, 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 AJAXUntuk 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 ImplementasiIni 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 AjaxJavaScript 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 DataSaya 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 jsSaya membuat metode baru di app. js dan metode ini menggunakan }();_6 untuk operasinyaAplikasi BootstrapSaya juga mereferensikan file JavaScript ini di index. html dan memperbarui fungsi }();_7 seperti yang ditunjukkan di bawah inidan inilah output konsol dari operasi ini RingkasanPola 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 Apa dasar-dasar JavaScript?Dasar-Dasar JavaScript . Halo Dunia Struktur kode Mode modern, "gunakan ketat" Variabel Tipe data Interaksi. waspada, prompt, konfirmasi Ketik Konversi Operator dasar, matematika Bagaimana menyusun proyek JavaScript?5 aturan dasar Node. . Aturan 1 – Atur File Anda di Sekitar Fitur, Bukan Peran. . Aturan 2 – Jangan Menempatkan Logika di index. File js. . Aturan 3 – Tempatkan File Uji Anda Di Samping Implementasi. . Aturan 4 – Gunakan Direktori konfigurasi. . Aturan 5 – Masukkan npm Panjang Anda Apa struktur kodenya?Apa itu pengkodean struktural? . Ini memungkinkan Anda untuk mengambil sekumpulan besar data semi-terstruktur, dan menyusunnya menjadi bagian-bagian yang lebih kecil untuk analisis lebih lanjut. a first round coding method where you code your data according to research questions or topics. It enables you to take a large set of semi-structured data, and structure it into smaller pieces for further analysis.
Apa bagian terpenting dari JavaScript?10 Konsep JavaScript di 2021 yang Membantu Mendapatkan Pekerjaan . 8) Putaran, Putaran, Putaran, Putaran. . 7) Debugging Alat Pengembang. . 6) Lingkup. . 5) Fungsi dan Panggilan Fungsi. . 4) Pernyataan bersyarat. . 3) Acara dan Penanganan Acara. . 2) Referensi versus variabel Nilai dan Tipe Data. . 1) Melintasi DOM – Mengapa Javascript? |
Apa struktur dasar javascript?
Pos Terkait
Copyright © 2024 idkuu.com Inc.
