Rumah hujung hadapan web html tutorial Apakah ESM modular bahagian hadapan?

Apakah ESM modular bahagian hadapan?

Feb 25, 2024 am 11:48 AM
hujung hadapan kata kunci esm

Apakah ESM modular bahagian hadapan?

Apakah contoh kod bahagian hadapan diperlukan

Dalam pembangunan bahagian hadapan, ESM merujuk kepada Modul ECMAScript, iaitu kaedah pembangunan modular berdasarkan spesifikasi ECMAScript. ESM membawa banyak faedah, seperti organisasi kod yang lebih baik, pengasingan antara modul dan kebolehgunaan semula. Artikel ini akan memperkenalkan konsep asas dan penggunaan ESM dan menyediakan beberapa contoh kod khusus.

  1. Konsep asas ESM
    Dalam ESM, kita boleh membahagikan kod kepada berbilang modul, dan setiap modul mendedahkan beberapa antara muka untuk digunakan oleh modul lain. Setiap modul boleh memperkenalkan kebergantungan yang diperlukan melalui pernyataan import tanpa perlu risau tentang konflik dengan pembolehubah global. Pada masa yang sama, modul juga boleh mendedahkan antara muka mereka kepada modul lain melalui pernyataan eksport.
  2. Penggunaan ESM
    2.1 Sintaks asas
    Untuk menggunakan ESM, anda perlu menggunakan teg skrip dalam fail HTML untuk memuatkan modul dan menentukan jenis sebagai "modul". Contohnya:
<script type="module" src="main.js"></script>
Salin selepas log masuk

Dalam fail modul, kami boleh menggunakan pernyataan import untuk memperkenalkan antara muka modul lain, dan menggunakan pernyataan eksport untuk mendedahkan antara muka kami sendiri kepada modul lain. Sebagai contoh, kami mempunyai dua fail modul:

// module1.js
export function sayHello() {
  console.log("Hello, module1!");
}

// module2.js
import { sayHello } from "./module1.js";

sayHello();
Salin selepas log masuk

2.2 Antara Muka Eksport dan Import
Dalam ESM, anda boleh menggunakan pernyataan eksport untuk mengeksport pembolehubah, fungsi atau kelas dalam modul ke modul lain. Contohnya:

// module1.js
export const PI = 3.14;

export function square(x) {
  return x * x;
}
Salin selepas log masuk

Modul lain boleh menggunakan pernyataan import untuk mengimport antara muka dalam module1.js dan menggunakannya. Contohnya:

// module2.js
import { PI, square } from "./module1.js";

console.log(PI); // 输出3.14
console.log(square(2)); // 输出4
Salin selepas log masuk

2.3 Eksport lalai dan import lalai
Selain mengeksport antara muka yang dinamakan, ESM juga menyokong eksport lalai dan import lalai. Modul hanya boleh mempunyai satu eksport lalai dan eksport lalai tidak perlu dibalut dengan {}. Import lalai boleh menggunakan mana-mana nama pembolehubah untuk menerima. Contohnya:

// module1.js
export default function sayGoodbye() {
  console.log("Goodbye!");
}

// module2.js
import goodbye from "./module1.js";

goodbye(); // 输出Goodbye!
Salin selepas log masuk
  1. Perbezaan antara ESM dan CommonJS (module.exports/require)
    ESM dan CommonJS ialah dua kaedah pembangunan modular yang berbeza. ESM menggunakan import dan eksport statik, dan kebergantungan modul ditentukan pada masa penyusunan, manakala CommonJS menggunakan import dan eksport dinamik, dan kebergantungan modul hanya boleh ditentukan pada masa jalan.

Kelebihan ESM ialah kebergantungan modul lebih jelas dan tidak perlu menggunakan pembolehubah global untuk mengawal susunan pemuatan dan pelaksanaan modul. Kelebihan CommonJS ialah ia boleh mengira kebergantungan modul secara dinamik pada masa jalan, memberikannya fleksibiliti yang lebih besar.

Berikut ialah contoh mencampurkan ESM dan CommonJS:

// module1.js (ESM)
export const PI = 3.14;

// module2.js (CommonJS)
const { PI } = require("./module1.js");
console.log(PI); // 输出3.14
Salin selepas log masuk

Ringkasan:
ESM ialah kaedah pembangunan modular yang biasa digunakan dalam pembangunan bahagian hadapan Ia menguruskan hubungan rujukan antara modul melalui import dan eksport statik. Dalam ESM, modul boleh merujuk satu sama lain dan menggunakan semula kod, dan tidak perlu risau tentang pencemaran pembolehubah global. Dalam pembangunan sebenar, kita boleh memisahkan kod kompleks mengikut idea modular untuk meningkatkan kebolehselenggaraan dan kebolehbacaan kod.

Di atas adalah pengenalan kepada konsep asas dan penggunaan ESM Saya berharap melalui pengenalan artikel ini, pembaca dapat memahami ESM dan dapat mengaplikasikan teknologi ESM dalam pembangunan sebenar.

Atas ialah kandungan terperinci Apakah ESM modular bahagian hadapan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaraskan apertur pada Xiaomi Mi 14 Ultra? Bagaimana untuk melaraskan apertur pada Xiaomi Mi 14 Ultra? Mar 19, 2024 am 09:01 AM

Melaraskan saiz apertur mempunyai kesan penting pada kesan foto Xiaomi Mi 14 Ultra memberikan fleksibiliti yang tidak pernah berlaku sebelum ini dalam pelarasan apertur kamera. Untuk membolehkan semua orang melaraskan apertur dengan lancar dan merealisasikan pelarasan percuma saiz apertur, editor di sini membawakan anda tutorial terperinci tentang cara menetapkan apertur pada Xiaomi Mi 14Ultra. Bagaimana untuk melaraskan apertur pada Xiaomi Mi 14Ultra? Mulakan kamera, tukar kepada "Mod Profesional", dan pilih kamera utama - kanta W. Klik pada apertur, buka dail apertur, A adalah automatik, pilih f/1.9 atau f/4.0 mengikut keperluan.

Bagaimana untuk menetapkan bahasa Cina dalam Cheat Engine? Bagaimana untuk menetapkan bahasa Cina dalam Cheat Engine? Mar 18, 2024 pm 01:20 PM

Ce Modifier (CheatEngine) ialah alat pengubahsuaian permainan yang didedikasikan untuk mengubah suai dan menyunting memori permainan Jadi bagaimana untuk menetapkan bahasa Cina dalam CheatEngine Seterusnya, editor akan memberitahu anda bagaimana untuk menetapkan bahasa Cina dalam Ce Modifier. Dalam perisian baharu yang kami muat turun, ia boleh mengelirukan untuk mendapati bahawa antara muka itu bukan dalam bahasa Cina. Walaupun perisian ini tidak dibangunkan di China, terdapat cara untuk menukarnya kepada versi Cina. Masalah ini boleh diselesaikan dengan hanya menggunakan patch Cina. Selepas memuat turun dan memasang perisian CheatEngine (ce modifier), buka lokasi pemasangan dan cari folder bernama bahasa, seperti yang ditunjukkan dalam rajah di bawah

DaVinci Resolve Studio kini menyokong pengekodan perkakasan AV1 untuk kad grafik AMD DaVinci Resolve Studio kini menyokong pengekodan perkakasan AV1 untuk kad grafik AMD Mar 06, 2024 pm 10:04 PM

Berita terkini, lackMagic telah melancarkan kemas kini beta awam 18.5PublicBeta2 bagi perisian penyuntingan video DaVinci Resolve Studio, membawakan sokongan pengekodan AV1 kepada kad grafik AMD Radeon. Selepas mengemas kini kepada versi terkini, pengguna kad grafik AMD akan dapat memanfaatkan pecutan perkakasan untuk pengekodan AV1 dalam DaVinci Resolve Studio. Walaupun pegawai tidak menyatakan seni bina atau model yang disokong, diharapkan semua pengguna kad grafik AMD boleh mencuba ciri ini. Pada 2018, AOMedia mengeluarkan standard pengekodan video baharu AV1 (AOMediaVideoCodec1.0). AV1 dihasilkan oleh beberapa

Bagaimana untuk mengemas kini Honor MagicOS 8.0 pada Honor 90 GT? Bagaimana untuk mengemas kini Honor MagicOS 8.0 pada Honor 90 GT? Mar 18, 2024 pm 06:46 PM

Honor 90GT ialah telefon pintar kos efektif dengan prestasi cemerlang dan pengalaman pengguna yang cemerlang. Walau bagaimanapun, kadangkala kita mungkin menghadapi beberapa masalah, seperti bagaimana untuk mengemas kini Honor MagicOS8.0 pada Honor 90GT? Langkah ini mungkin berbeza untuk telefon mudah alih yang berbeza dan model yang berbeza Jadi, mari kita bincangkan cara meningkatkan sistem dengan betul. Bagaimana untuk mengemas kini Honor MagicOS 8.0 pada Honor 90GT Menurut berita pada 28 Februari, Honor hari ini menolak kemas kini beta awam MagicOS8.0 untuk tiga telefon mudah alihnya 90GT/100/100Pro Nombor versi pakej ialah 8.0.0.106 (C00E106R3P1) 1. . Pastikan Kehormatan anda Bateri 90GT dicas sepenuhnya;

Planet Mojo: Membina metaverse permainan Web3 daripada permainan catur auto Mojo Melee Planet Mojo: Membina metaverse permainan Web3 daripada permainan catur auto Mojo Melee Mar 14, 2024 pm 05:55 PM

Projek permainan Metaverse popular yang diasaskan dalam kitaran crypto terakhir sedang mempercepatkan pengembangannya. Pada 4 Mac, PlanetMojo, platform metaverse permainan Web3, mengumumkan beberapa perkembangan penting dalam ekologi permainannya, termasuk pengumuman permainan parkour yang akan datang GoGoMojo, pelancaran musim baharu "Way of War" dalam auto-catur perdana. permainan MojoMelee, dan sambutan siri ETH pertama "WarBannerNFT" yang baharu dilancarkan musim ini dengan kerjasama MagicEden. Selain itu, PlanetMojo juga mendedahkan bahawa mereka merancang untuk melancarkan versi mudah alih Android dan iOS MojoMelee pada akhir tahun ini. Projek ini akan dilancarkan pada penghujung tahun 2021. Selepas hampir dua tahun bekerja keras dalam pasaran beruang, ia akan siap tidak lama lagi.

PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan Mar 16, 2024 pm 12:09 PM

PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan Dalam era perkembangan pesat Internet hari ini, pembangunan bahagian hadapan telah menjadi semakin penting. Memandangkan pengguna mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk pengalaman tapak web dan aplikasi, pembangun bahagian hadapan perlu menggunakan alat yang lebih cekap dan fleksibel untuk mencipta antara muka yang responsif dan interaktif. Sebagai dua teknologi penting dalam bidang pembangunan bahagian hadapan, PHP dan Vue.js boleh dianggap sebagai alat yang sempurna apabila digandingkan bersama. Artikel ini akan meneroka gabungan PHP dan Vue, serta contoh kod terperinci untuk membantu pembaca memahami dan menggunakan kedua-dua ini dengan lebih baik.

Soalan yang sering ditanya oleh penemuduga front-end Soalan yang sering ditanya oleh penemuduga front-end Mar 19, 2024 pm 02:24 PM

Dalam temu bual pembangunan bahagian hadapan, soalan lazim merangkumi pelbagai topik, termasuk asas HTML/CSS, asas JavaScript, rangka kerja dan perpustakaan, pengalaman projek, algoritma dan struktur data, pengoptimuman prestasi, permintaan merentas domain, kejuruteraan bahagian hadapan, corak reka bentuk, dan teknologi dan trend baharu. Soalan penemuduga direka bentuk untuk menilai kemahiran teknikal calon, pengalaman projek dan pemahaman tentang trend industri. Oleh itu, calon harus bersedia sepenuhnya dalam bidang ini untuk menunjukkan kebolehan dan kepakaran mereka.

Permudahkan pemprosesan muat naik fail dengan fungsi Golang Permudahkan pemprosesan muat naik fail dengan fungsi Golang May 02, 2024 pm 06:45 PM

Jawapan: Ya, Golang menyediakan fungsi yang memudahkan pemprosesan muat naik fail. Butiran: Jenis MultipartFile menyediakan akses kepada metadata dan kandungan fail. Fungsi FormFile mendapat fail tertentu daripada permintaan borang. Fungsi ParseForm dan ParseMultipartForm digunakan untuk menghuraikan data borang dan data borang berbilang bahagian. Menggunakan fungsi ini memudahkan proses pemprosesan fail dan membolehkan pembangun menumpukan pada logik perniagaan.

See all articles