Skrip Modul ES type=module
Muatkan JavaScript sebagai modul ES dengan type=module
Skrip Modul ES type=module ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah Modul ES?
Modul ES ialah fail JavaScript yang menggunakan pengisytiharan import dan export. Modul mempunyai skop sendiri (tiada pencemaran global), mod ketat secara lalai dan kebergantungan yang dinyatakan secara jelas — menyelesaikan masalah susunan tag skrip selama berdekad-dekad.
Tag Skrip Modul
<script type="module" src="app.js"> memberitahu pelayar bahawa fail itu ialah modul. Pelayar menghuraikan import, mengambil kebergantungan secara selari dan hanya melaksanakan titik masuk selepas keseluruhan graf kebergantungan dimuat turun serta dikompilasi.
<script type="module" src="app.js"></script>Modul Ditangguhkan
Skrip modul bertindak seolah-olah mempunyai defer: skrip dimuat turun secara selari dengan penghuraian HTML dan dilaksanakan selepas penghuraian, mengikut urutan pengisytiharan. Anda boleh meletakkan <script type="module"> di mana-mana sahaja (malah dalam <head>) tanpa menyekat halaman.
Import Menggunakan Penentu
Pernyataan import menggunakan penentu — sama ada URL relatif (./utils.js), URL mutlak (https://cdn.example.com/lib.js) atau nama tanpa awalan (lodash). Nama tanpa awalan memerlukan peta import (yang akan dibincangkan seterusnya) kerana pelayar tidak tahu fail yang dipetakan kepadanya.
// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));Sambungan Fail Diperlukan
Pelayar tidak menambah .js secara automatik pada penentu import. import "./utils" gagal; import "./utils.js" berjaya. Penggabung dan Node mungkin lebih bertolak ansur; pelayar bersifat ketat, jadi tulis sambungan fail secara jelas.
CORS Diperlukan
Modul sentiasa diambil menggunakan CORS, walaupun daripada asal yang sama. Fail modul merentas asal mesti menyediakan pengepala Access-Control-Allow-Origin yang sesuai, atau import akan gagal. Kebanyakan CDN (esm.sh, jsdelivr, unpkg) mengkonfigurasikannya dengan betul secara lalai.
Await Peringkat Atas
Modul menyokong await pada peringkat atas — tiada pembalut fungsi tak segerak diperlukan: const data = await fetch("/api").then(r => r.json()). Pengguna modul tersebut menunggu sehingga await peringkat atas selesai sebelum mereka dilaksanakan.
// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);Modul ialah Instans Tunggal
Modul dinilai tepat sekali bagi setiap sesi, tanpa mengira bilangan modul lain yang mengimportnya. Objek eksport dikongsi — setiap pengguna melihat instans yang sama, menjadikan modul cara yang kemas untuk berkongsi instans tunggal seperti objek konfigurasi atau stor keadaan.
Modul Sebaris
Anda juga boleh menulis modul secara sebaris: <script type="module">import x from "./y.js"; ...</script>. Ini berguna untuk kod permulaan atau eksperimen, walaupun fail luaran lebih mudah dinyahpepijat dan dicache.
nomodule untuk Sandaran Lama
Padankan <script type="module"> dengan <script nomodule src="legacy.js">. Pelayar moden menjalankan modul dan mengabaikan skrip nomodule; pelayar lama menjalankan skrip nomodule dan mengabaikan modul. Pendekatan ini digunakan semasa peralihan kepada aplikasi ESM sepenuhnya.
Ralat dan Kegagalan Import
Import yang gagal (404, CORS, ralat sintaks) akan menimbulkan ralat dan menghalang keseluruhan graf modul daripada dilaksanakan. Gunakan panel Rangkaian untuk mengesan permintaan modul yang gagal dan Konsol untuk membaca mesej ralat import sebenar.
Semakan Pengetahuan
Mengapakah skrip modul bertindak seolah-olah defer ditetapkan tanpa anda menentukannya?
Ringkasan
<script type="module"> memuatkan modul ES — fail mod ketat dengan pengisytiharan import/export yang menyelesaikan graf kebergantungan. Modul ditangguhkan secara lalai, memerlukan sambungan fail yang jelas, diambil menggunakan CORS, dinilai sebagai instans tunggal dan menyokong await peringkat atas. Gunakan nomodule sebagai sandaran untuk pelayar lama dan perhatikan sambungan fail yang tiada apabila import gagal secara senyap.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Skrip Modul ES type=module” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Skrip Modul ES type=module”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Skrip Modul ES type=module”?
Muatkan JavaScript sebagai modul ES dengan type=module Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Skrip Modul ES type=module” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Skrip Modul ES type=module
- Peta Import importmap
- Import Dinamik dalam Modul
- Asas Persekutuan Modul