memerlukan Vs import Dalam JavaScript

Saya masih ingat apabila saya mula mengekod, saya akan melihat beberapa fail js menggunakan require() untuk mengimport modul dan fail lain menggunakan import. Ini selalu mengelirukan saya kerana saya tidak begitu faham apa perbezaannya atau mengapa terdapat ketidakkonsistenan merentas projek. Jika anda tertanya-tanya perkara yang sama, teruskan membaca!

Apakah CommonJS?

CommonJS ialah satu set piawaian yang digunakan untuk melaksanakan modul dalam JavaScript sisi pelayan, terutamanya persekitaran Node.js. Dalam sistem ini, modul dimuatkan secara serentak, yang bermaksud pelaksanaan skrip disekat sehingga modul dimuatkan. Ini menjadikan pendekatan yang mudah, tetapi kelemahannya ialah prestasi yang melanda jika anda cuba memuatkan dalam sekumpulan modul yang berbeza kerana ia perlu memuatkan satu demi satu sebelum apa-apa lagi boleh dijalankan.

Apabila menggunakan CommonJS anda akan menggunakan module.exports untuk mengeksport fungsi dan menggunakan require() untuk mengimportnya.

Berikut ialah contoh yang akan kelihatan seperti dalam kod.

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};

// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

Apakah itu ECMAScript (ES6)?

ES6, juga dikenali sebagai ECMAScript, ialah versi JavaScript yang lebih baharu yang dikeluarkan pada tahun 2015. Dengan keluaran ini terdapat keupayaan untuk mengimport modul secara tak segerak menggunakan penyata import dan eksport. Ini bermakna skrip yang anda jalankan boleh terus dilaksanakan semasa modul dimuatkan supaya tiada kesesakan. Ini juga membolehkan kecekapan yang dipanggil tree-shaking yang akan saya bincangkan dalam catatan kemudian, tetapi pada asasnya, ini bermakna anda hanya memuatkan dalam JavaScript daripada modul yang anda gunakan dan dead-code (kod tidak digunakan) tidak dimuatkan ke dalam pelayar. Ini semua mungkin kerana ES6 menyokong import statik dan dinamik.

Ini contoh yang sama sebelum ini tetapi kali ini kami menggunakan import dan eksport.

// In file multiply.js

export const multiply = (x, y) => x * y;

// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

Perbezaan Utama: memerlukan Vs import

require() ialah sebahagian daripada sistem modul CommonJS manakala import ialah sebahagian daripada sistem modul ES6. Anda akan melihat require() digunakan dalam persekitaran Node.js untuk pembangunan sisi pelayan, terutamanya pada projek warisan yang belum menerima pakai ES6 lagi. Anda akan melihat import digunakan dalam kedua-dua bahagian pelayan dan pembangunan bahagian hadapan, terutamanya projek yang lebih baharu dan dengan mana-mana rangka kerja bahagian hadapan seperti React atau Vue.

Mengapa import lebih baik daripada yang diperlukan?

Seperti yang kami nyatakan sebelum ini, import adalah tidak segerak, yang boleh membawa kepada prestasi yang lebih baik, terutamanya dalam aplikasi besar. Selain itu, memandangkan import boleh dianalisis secara statik, alatan seperti linter dan berkas boleh mengoptimumkan kod dengan lebih berkesan dan melaksanakan gegaran pokok yang membawa kepada saiz berkas yang lebih kecil dan masa muat yang lebih cepat. Sintaks juga lebih mudah dibaca kemudian memerlukan() yang menjadikan pengalaman pembangun yang lebih baik, dan kita semua mahukannya!

Bila Anda Akan Gunakan memerlukan Vs import

Anda akan menggunakan require() apabila:

• Anda sedang mengusahakan projek Node.js warisan yang telah dimulakan sebelum ES6 keluar dan belum dikemas kini.

• Anda perlu memuatkan modul secara dinamik pada masa jalan, seperti dalam fail konfigurasi atau jika anda perlu memuatkan modul secara bersyarat.

Anda akan menggunakan import apabila:

• Pada bila-bila masa lain kerana ini adalah standard sekarang dan lebih cekap.

Ringkasan

Secara amnya, adalah disyorkan untuk menggunakan import apabila boleh, kerana ia memberikan lebih banyak faedah dan merupakan sistem modul yang lebih baharu dan diterima pakai secara meluas. Walau bagaimanapun, mungkin terdapat kes di mana require() masih merupakan pilihan yang lebih baik, bergantung pada keperluan khusus anda dan persekitaran tempat anda bekerja.

Jika anda mendapati artikel ini membantu, langgan surat berita saya di mana saya akan menghantar lebih banyak kandungan seperti ini terus ke peti masuk anda setiap minggu!

Atas ialah kandungan terperinci memerlukan Vs import Dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!