Rumah >hujung hadapan web >tutorial js >Mempertingkatkan Kod JavaScript dengan Modul ES: Eksport, Import dan Seterusnya

Mempertingkatkan Kod JavaScript dengan Modul ES: Eksport, Import dan Seterusnya

WBOYasal: 2024-07-21 13:44:07800semak imbas

Enhancing JavaScript Code with ES Modules: Export, Import, and Beyond

Modul JavaScript ialah cara untuk mengatur dan menggunakan semula kod JavaScript. Menggunakan modul boleh memecahkan kod kepada bahagian yang lebih kecil dan boleh diurus, yang kemudiannya boleh diimport dan digunakan di bahagian lain aplikasi mengikut keperluan. Pendekatan modular ini membantu dalam mengekalkan pangkalan kod yang bersih, menjadikannya lebih mudah untuk nyahpepijat dan meningkatkan kebolehgunaan semula kod.

Modul ES lwn CommonJS

Terdapat sistem modul yang berbeza dalam ekosistem JavaScript. Modul ES (ESM) ialah standard dalam spesifikasi ECMAScript, digunakan terutamanya dalam penyemak imbas dan semakin disokong dalam Node.js. CommonJS ialah satu lagi sistem modul yang digunakan secara tradisional dalam Node.js.

Modul ES (ESM)

Modul ES (ESM) ialah sistem modul piawai dalam JavaScript, yang diperkenalkan dalam ECMAScript 2015 (ES6). Mereka membenarkan organisasi yang lebih baik dan kebolehgunaan semula kod dengan membolehkan import dan eksport fungsi, objek dan primitif antara fail yang berbeza. Sistem modul ini disokong secara meluas dalam persekitaran JavaScript moden, termasuk penyemak imbas dan Node.js.

Eksport dan Import

Kata kunci eksport melabelkan pembolehubah dan fungsi yang sepatutnya boleh diakses dari luar modul semasa, membolehkannya digunakan semula di bahagian lain aplikasi anda. Kata kunci import membenarkan pengimportan fungsi ini daripada modul lain, membolehkan pengaturcaraan modular dan penggunaan semula kod.

Eksport bernama membolehkan berbilang item dieksport daripada modul. Setiap item mesti diimport dengan nama yang sama yang digunakan untuk dieksport.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

Apabila mengimport eksport bernama, anda perlu menggunakan nama yang sama seperti eksport.

import { greet } from './module.js';
greet(); // Hello, World!

Eksport lalai membenarkan satu eksport lalai bagi setiap modul. Item boleh diimport dengan sebarang nama.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

Apabila mengimport eksport lalai, anda boleh menggunakan sebarang nama.

import message  from './module.js';
message(); // Hello, World!

Menggunakan Modul dalam HTML

Apabila menggunakan modul dalam penyemak imbas, anda perlu memasukkannya ke dalam fail HTML anda. Anda menggunakan atribut type="module" dalam tag.

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Js:modules</title>
</head>

<body>
   <script type="module" src="main.js"></script>
</body>

</html>

Sokongan Penyemak Imbas

Pelayar moden menyokong modul JavaScript secara asli. Ini termasuk Chrome, Firefox, Safari, Edge dan Opera. Walau bagaimanapun, pelayar lama seperti Internet Explorer tidak menyokong modul. Bagi mereka, anda mungkin perlu menggunakan pengikat seperti Webpack atau transpiler seperti Babel.

Menggunakan Modul dalam Node.js
Untuk menggunakan Modul ES dalam Node.js, anda boleh menggunakan sambungan fail .mjs atau tetapkan "type": "module" dalam fail package.json.

// package.json
{
 "type": "module"
}

Import Alias

Alias dalam modul JavaScript membolehkan anda mengimport dan mengeksport fungsi menggunakan nama yang berbeza. Ini boleh berguna untuk mengelakkan konflik penamaan atau untuk menyediakan lebih banyak nama deskriptif dalam konteks modul yang mengimportnya.

// math.js
export function add(a, b) {
   return a + b;
}
 export function subtract(a, b) {
   return a - b;
}

Anda boleh mengimport fungsi ini dengan nama yang berbeza menggunakan alias:

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

Mengimport Keseluruhan Modul sebagai Alias

Anda boleh mengimport keseluruhan modul sebagai alias tunggal, yang membolehkan anda mengakses semua eksport di bawah ruang nama.

// main.js
import * as math from './math.js';


console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

Import Dinamik

Anda juga boleh mengimport modul secara dinamik menggunakan fungsi import(), yang mengembalikan janji. Ini berguna untuk pemisahan kod dan pemuatan malas.

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

Dalam contoh ini, modul math.js dimuatkan secara dinamik apabila fungsi loadModule dipanggil.

CommonJS (CJS)

CommonJS ialah sistem modul yang digunakan terutamanya dalam Node.js. Ia adalah sistem modul lalai sebelum Modul ES diseragamkan dan masih digunakan secara meluas dalam banyak projek Node.js. Ia menggunakan require() untuk mengimport modul dan module.exports atau mengeksport untuk mengeksport fungsi daripada modul.

Dalam CommonJS, kedua-dua module.exports dan exports digunakan untuk mengeksport nilai daripada modul. eksport pada asasnya adalah singkatan untuk module.exports, membenarkan sama ada digunakan. Walau bagaimanapun, biasanya dinasihatkan untuk menggunakan module.exports secara konsisten untuk mengelakkan kemungkinan kekeliruan atau tingkah laku yang tidak dijangka.

Dalam contoh ini, module.exports diberikan fungsi, jadi panggilan memerlukan dalam app.js mengembalikan fungsi tersebut.

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

Dalam contoh ini, eksport digunakan untuk menambah sifat pada module.exports. Panggilan memerlukan dalam app.js mengembalikan objek dengan fungsi tambah dan tolak.

// math.js
exports.add = function(a, b) {
   return a + b;
};
exports.subtract = function(a, b) {
   return a - b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

Modul JavaScript menawarkan banyak faedah yang meningkatkan organisasi, kebolehselenggaraan dan prestasi kod.

Kebolehgunaan semula
Modul membolehkan anda menulis cebisan kod yang boleh diguna semula yang boleh diimport dan digunakan di bahagian aplikasi anda yang berbeza atau bahkan dalam projek yang berbeza.
Kebolehselenggaraan
Dengan memecahkan kod kepada modul yang lebih kecil dan serba lengkap, anda boleh mengurus dan mengekalkan pangkalan kod anda dengan lebih berkesan. Ini memudahkan untuk mengemas kini, memfaktor semula dan menyahpepijat modul individu tanpa menjejaskan keseluruhan aplikasi.
Pembahagian Kod
Modul mendayakan pemisahan kod, yang membolehkan anda memuatkan kod yang diperlukan sahaja apabila diperlukan, meningkatkan masa pemuatan awal dan prestasi keseluruhan.
Ujian yang Diperbaiki
Kod modular lebih mudah untuk diuji kerana anda boleh menguji modul individu secara berasingan. Ini membawa kepada ujian yang lebih dipercayai dan boleh diselenggara.
Pokok Bergegar
Pengikat modul moden seperti Webpack dan Rollup boleh melakukan gegaran pokok, teknik yang mengalih keluar kod yang tidak digunakan daripada berkas terakhir, menghasilkan kod yang lebih kecil dan lebih cekap.

Kesimpulan

Dalam pembangunan JavaScript, pengenalan Modul ES telah menandakan perubahan ketara daripada sistem modul CommonJS tradisional. Modul ES menawarkan cara yang standard dan cekap untuk mengurus kebergantungan dan meningkatkan kebolehselenggaraan. Sintaks eksport dan import menyediakan cara yang jelas dan ringkas untuk mentakrif dan menggunakan modul, mempromosikan organisasi dan kebolehbacaan yang lebih baik dalam pangkalan kod.

Atas ialah kandungan terperinci Mempertingkatkan Kod JavaScript dengan Modul ES: Eksport, Import dan Seterusnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript json firefox chrome safari ecmascript html es6 edge webpack Object define for include require math break using Namespace Attribute JS function default this promise Access

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mengelakkan perangkap penilaian Boolean yang tidak tepat dalam JS/TSArtikel seterusnya：Mengelakkan perangkap penilaian Boolean yang tidak tepat dalam JS/TS

Artikel berkaitan

Lihat lagi