Home-theater-designers
Sekiranya anda ingin membuat kod JavaScript yang boleh digunakan semula atau bekerjasama dengan pasukan pembangun, maka anda perlu mengetahui cara menggunakan dan mengenal pasti corak reka bentuk yang berbeza dalam bahasa tersebut.
Dalam JavaScript, istilah pola reka bentuk merujuk kepada cara menulis kod tertentu dan sering dianggap sebagai templat pengaturcaraan. Perkara yang menarik ialah corak reka bentuk label boleh digunakan untuk apa sahaja dari keseluruhan aplikasi hingga sekumpulan kod sederhana.
Corak reka bentuk adalah topik yang luas, tetapi dengan memahami corak modul dan kaedah kilang anda harus memahami dengannya.
Corak Modul
Modul JavaScript diperkenalkan pada tahun 2009, dengan versi bahasa pengaturcaraan ES5. Dengan menggunakan modul, pembangun kini dapat membuat potongan kod tersuai dan mengeksportnya untuk digunakan di bahagian lain aplikasi JavaScript.
Struktur Asas Pola Modul
(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})(); Dalam contoh di atas, corak modul selalu dilampirkan dalam ekspresi fungsi yang segera dipanggil (IIFE). Ini bermaksud bahawa corak modul dilaksanakan sebaik sahaja ditentukan. Perkara penting yang perlu diberi perhatian ialah corak modul terdiri daripada dua bahagian yang berbeza.
Bahagian pertama digunakan untuk menyatakan pemboleh ubah dan fungsi peribadi, yang hanya dapat diakses dalam ruang lingkup pola modul.
Bahagian kedua terdiri daripada nilai kembali yang merangkumi pemboleh ubah dan fungsi awam yang dapat diakses di luar ruang lingkup pola modul.
Menggunakan Corak Modul untuk Membuat Aplikasi
Pertimbangkan aplikasi mudah seperti pengurus tugas. Dengan menggunakan corak modul, anda perlu membuat modul khusus untuk setiap bahagian. Ini mungkin termasuk:
- Pengawal tugas
- Pengawal UI
- Pengawal simpanan
- Pengawal aplikasi
Berkaitan: Pengaturcaraan Projek untuk Pemula
Pengawal tugas akan digunakan untuk membuat setiap tugas baru. Pengawal UI akan digunakan untuk mengendalikan fungsi yang berkaitan dengan UI, seperti mendengar klik butang atau mengubah apa yang sedang ditampilkan. Pengawal storan akan digunakan untuk menyimpan setiap tugas baru ke pangkalan data. Modul aplikasi akan digunakan untuk melaksanakan aplikasi.
Menggunakan Corak Modul untuk Membuat Contoh Pengawal UI
const UIController = ( function() {
//the private section of the module
let component = 'Replacement Text';
const changeComponent = function() {
//change all the h1 text to what is in the component variable above
const element = document.querySelector('h1');
element.textContent = component;
}
//the public section of the module
return{
callChangeComponent: function() {
changeComponent();
}
}
})();
Contoh di atas dengan jelas menunjukkan dua bahagian yang terdapat dalam corak modul — swasta dan awam.
Di bahagian peribadi fungsi, pemboleh ubah komponen dan fungsi changeComponent keduanya bersifat peribadi. Oleh itu, jika anda ingin mengubah semua teks h1 di laman web, anda akan mendapat ralat sekiranya anda menulis kod berikut.
Cara yang Tidak Betul untuk Memohon perubahan Contoh Komponen
UIController.changeComponent();
Mesej ralat akan menyatakan secara jelas bahawa changeComponent () bukan fungsi fungsi UIController. Inilah keindahan corak modul; pemboleh ubah dan fungsi yang dibuat di bahagian peribadi tidak akan dapat diakses secara langsung di luar ruang lingkup fungsi tersebut.
Walaupun pemboleh ubah peribadi tidak dapat diakses secara langsung, namun pemboleh ubah swasta dapat diakses secara tidak langsung (dari bahagian umum). Pengambilalihan dari contoh pengawal UI di atas ialah bahagian awam dalam corak modul selalu ditandai dengan harta pengembalian.
Dalam parameter harta kembali, kita sekarang dapat memperoleh akses tidak langsung ke fungsi changeComponent. Kita sekarang dapat menggunakan baris kod berikut (dengan pola modul di atas) untuk mengubah semua teks h1 secara efektif pada halaman web yang disasarkan kepada Teks Penggantian.
Cara Betul untuk Memohon Contoh perubahan
UIController.callChangeComponent();
Corak Kilang
Corak kilang (juga dikenali sebagai kaedah kilang) adalah satu lagi corak reka bentuk JavaScript yang popular. Pola modul bersinar ketika enkapsulasi data diperlukan, dan corak kilang paling berguna dalam keadaan ketika kita berurusan dengan koleksi objek yang berbeda yang serupa dalam beberapa aspek.
Kembali kepada pengurus tugas kami di atas; jika kita membiarkan pengguna menetapkan jenis untuk setiap tugas yang dibuat, maka kita dapat membuat aspek aplikasi (cukup efisien) menggunakan corak kilang
Menggunakan Corak Kilang untuk Menetapkan Contoh Jenis Tugas
//Factory pattern function
const TaskFactory = function(){
this.createTask = function(name, type){
let task;
//check the type the user selected
if(type === 'urgent'){
task = new UrgentTask(name);
}else if(type === 'trivial'){
task = new TrivialTask(name);
}
//set the type selected in the if statement to the one received as a property
task.type = type;
//used to print the task and its type to the console
task.define = function(){
console.log(`${this.name} (${this.type}): ${this.priority}`)
}
return task
}
}Kod di atas menggunakan kaedah kilang untuk membuat tugas baru, periksa jenisnya (mendesak atau sepele), dan berikan harta yang sesuai sebelum mencetak tugas baru ke konsol.
Fungsi dalaman createTask, menetapkan tahap untuk banyak tugas dibuat secara serentak, tetapi sebelum kita berusaha membuat tugas baru ada beberapa kod tambahan yang perlu kita sertakan dalam bahagian projek ini.
Dalam kod di atas, kami membuat UrgentTask atau Trivialtask baru jika syarat tertentu dipenuhi. Walau bagaimanapun, tidak ada fungsi atau kelas dengan nama-nama ini dalam projek kami - masalah ini dapat diselesaikan dengan mudah dengan memperkenalkan kod berikut ke projek kami.
Buat Jenis Tugas Mendesak dan Trivial
//Create the urgent task type
const UrgentTask = function(name){
this.name = name;
this.priority = 'as soon as possible'
}
//create the trivial task type
const TrivialTask = function(name){
this.name = name;
this.priority = 'when you can'
}
Kerana kod di atas, kita sekarang dapat menetapkan harta UrgentTask atau TrivialTask untuk setiap tugas baru yang dibuat. Langkah seterusnya adalah sekarang membuat tugas baru, tetapi sebelum itu, kita perlu membuat pangkalan data untuk menyimpan setiap tugas baru ketika dibuat.
Memandangkan membuat pangkalan data adalah keseluruhan artikel itu sendiri, kami akan mengganti pangkalan data dengan struktur data (array).
Membuat Contoh Array
//create an array to host the different task
const task = [];
Sekarang kita akhirnya dapat membuat tugas baru.
Membuat Contoh Tugas Baru
//create two new tasks
const factory = new TaskFactory();
task.push(factory.createTask('Clean the house', 'urgent'));
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));
Dengan kod di atas anda kini dapat membuat dua tugas baru menggunakan fungsi TaskFactory yang kami buat pada awalnya. Semasa kita membuat setiap tugas baru sifat (nama dan jenis) melewati fungsi createTask, yang terletak di fungsi TaskFactory yang kita buat menggunakan corak kilang.
Setelah setiap tugas berjaya melalui TaskFactory dan sifat jenis yang sesuai diberikan kepadanya. Ia kemudian dimasukkan ke dalam array tugas yang kita buat sebelumnya.
Satu-satunya dilema kita sekarang adalah bagaimana kita tahu bahawa kedua-dua tugas itu dibuat atau corak kilang kita berfungsi? Sekiranya kita menggunakan pangkalan data maka kita hanya dapat memeriksa pangkalan data untuk melihat apakah dua tugas baru dibuat.
Kembali ke Pola Menggunakan Pabrik untuk Menetapkan Contoh Jenis Tugas di atas, betul-betul di bawah yang digunakan untuk mencetak tugas dan jenisnya ke komen konsol, ada tugas kecil. Fungsi tentukan yang dibuat untuk mencetak setiap tugas dalam array ke konsol menggunakan perkara berikut kaedah larik .
//print each task to the console
task.forEach(function(task){
task.define();
});
Anda akan melihat output berikut dipaparkan di konsol anda.
Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can
Sekarang Anda Boleh Menggunakan Corak Reka Bentuk dalam Projek JavaScript Anda
Pada tahap ini anda harus memahami corak reka bentuk dalam JavaScript dan memahami bagaimana corak reka bentuk dapat digunakan untuk membuat kod yang dapat digunakan kembali dan menjadikan kehidupan lebih mudah bagi semua pembangun yang terlibat dalam sebuah projek.
Sekarang anda tahu bagaimana dua corak reka bentuk JavaScript yang popular berfungsi, anda seharusnya dapat menggunakannya dengan berkesan untuk mengembangkan aplikasi.
Kredit Imej: Alltechbuzz / Pixabay
apa yang volte pada telefon sayaBerkongsi Berkongsi Tweet E-mel Cara Menyatakan Pemboleh ubah dalam JavaScript
Untuk memulakan dengan JavaScript, anda perlu memahami pemboleh ubah. Berikut adalah tiga cara untuk menyatakan pemboleh ubah dalam JavaScript.
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- JavaScript
Kadeisha Kean adalah Pembangun Perisian Penuh dan Penulis Teknikal / Teknologi. Dia mempunyai kemampuan berbeza untuk mempermudah beberapa konsep teknologi yang paling kompleks; menghasilkan bahan yang dapat difahami dengan mudah oleh mana-mana pemula teknologi. Dia minat menulis, mengembangkan perisian yang menarik, dan menjelajah dunia (melalui dokumentari).
Lagi Dari Kadeisha KeanLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan