cara menggunakan javascript

Laksanakan pengaturcaraan modular dalam

?

Memandangkan aplikasi JavaScript terus meningkat dalam kerumitan, pengaturcaraan modular menjadi bahagian penting dalam kerja harian pembangun. Pengaturcaraan modular Javascript membantu menjadikan pengekodan lebih jelas, lebih mudah diselenggara, boleh digunakan semula dan mengurangkan pencemaran ruang nama, jadi ia menjadi semakin popular di kalangan pembangun. Artikel ini akan memperkenalkan cara melaksanakan pengaturcaraan modular dalam JavaScript.

Konsep modulariti

Dalam JavaScript, modularisasi merujuk kepada membahagikan kod kepada modul berasingan yang mudah diselenggara, diuji dan digunakan semula. Setiap modul mempunyai ruang nama sendiri, dan pembolehubah dan fungsi dalam modul yang sama tidak akan mengganggu satu sama lain. Kelebihan membahagikan modul ialah anda boleh mengelakkan penggunaan pembolehubah global dengan berkesan, yang boleh mengurangkan konflik antara pembolehubah dan nama fungsi, menjadikan kod lebih modular dan boleh dibaca.

Spesifikasi Modulariti ES6

Sebelum ES6, JavaScript tidak mempunyai spesifikasi modulariti standard. Dalam ES6, penyelesaian asli disediakan yang menyokong pembahagian kod ke dalam modul berasingan. Spesifikasi modulariti ES6 menyediakan dua kata kunci yang paling penting: export dan import.

• export: Dedahkan objek, fungsi atau pembolehubah tertentu kepada modul lain.
• import: Memperkenalkan objek, fungsi atau pembolehubah tertentu yang didedahkan oleh modul lain.

Contoh sintaks:

fungsi eksport sum(a, b){

return a + b;

}

import { sum } daripada './math .js';
console.log(sum(1, 2)); // output: 3

Dalam coretan kod di atas, kami mendedahkan fungsi export melalui fungsi sum. Dalam modul lain, gunakan pernyataan import untuk mengimport fungsi sum dan gunakannya untuk mengira hasil tambah dua nombor.

Melaksanakan modul mudah

Andaikan kita membuat tapak web e-dagang dalam talian, dan kita perlu melaksanakan modul troli beli-belah. Troli beli-belah akan mengandungi satu atau lebih item bersama-sama dengan kuantiti dan jumlah harganya.

Buat fail cart.js mudah untuk melaksanakan modul ini. Ubah suai kod cart.js seperti berikut:

const cart = [];

// Fungsi untuk menambah item pada troli beli-belah
fungsi eksport addItem(item, kuantiti) {

for (let i = 0; i < cart.length; i++) {
    let current = cart[i];
    if (current.item === item) {
        current.quantity += quantity;
        return;
    }
}
cart.push({ item: item, quantity: quantity });

}

// Fungsi untuk membatalkan item dalam troli beli-belah
fungsi eksport removeItem(item) {

for (let i = 0; i < cart.length; i++) {
    let current = cart[i];
    if (current.item === item) {
        cart.splice(i, 1);
        break;
    }
}

}

// Dapatkan troli beli-belah Jumlah harga semua item dalam
fungsi eksport getTotal() {

let total = 0;
for (let i = 0; i < cart.length; i++) {
    let current = cart[i];
    total += current.item.price * current.quantity;
}
return total;

}

Dalam kod di atas, kami mula-mula menentukan troli tatasusunan kosong, yang akan mengandungi semua barang pembelian. Tiga fungsi seterusnya ditakrifkan. Fungsi addItme digunakan untuk menambah item dan kuantiti baharu pada troli beli-belah, fungsi removeItem digunakan untuk mengalih keluar item daripada troli beli-belah, dan fungsi getTotal digunakan untuk mengembalikan jumlah nilai item yang terkandung dalam troli beli-belah dengan menggelung melalui susunan troli beli-belah.

Import modul troli beli-belah

Kini, kami memerlukan modul lain untuk menggunakan modul troli beli-belah. Mari buat fail main.js dan tambahkan kod berikut di dalamnya:

import { addItem, getTotal } daripada './cart.js';

baju const = {

name: 'T-Shirt',
price: 10.99,

};

seluar const = {

name: 'Jeans',
price: 24.99,

};

addItem(baju, 3);
addItem(seluar, 2);

console.log(getTotal());

Di sini, kami menambah dua item menggunakan fungsi addItem yang disediakan oleh modul troli beli-belah, dan kemudian menggunakan fungsi getTotal modul troli beli-belah Kira jumlah nilai semua item dalam troli beli-belah. Dalam contoh lain, kami memperkenalkan jumlah kalkulator harga untuk modul yang berbeza.

Kesimpulan

Dalam JavaScript, pengaturcaraan modular boleh dicapai dengan menggunakan spesifikasi modular ES6 asli. Menggunakan pengaturcaraan modular mengelakkan pencemaran ruang nama dan menjadikan kod lebih jelas dan lebih mudah untuk diselenggara. Apabila mengenal pasti modul semasa menulis, kita mesti berhati-hati tentang tahap penyahgandingan yang mesti ada antara unit. Untuk menjadikan sistem sebagai modular yang mungkin, kita perlu mengikuti peraturan am kohesi tinggi dan gandingan rendah, yang merupakan teras reka bentuk yang baik.

Atas ialah kandungan terperinci cara menggunakan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!