Rumah > Artikel > hujung hadapan web > Perkara yang perlu digunakan untuk mengimport sumber dalam es6
Dalam es6, anda boleh menggunakan pernyataan import atau import() untuk mengimport sumber. Perintah import digunakan untuk mengimport modul tertentu (fail sumber), dengan sintaks "import {member} dari 'module identifier'" digunakan untuk mengimport fail atau modul, dengan sintaks "import (lokasi sumber) ".
Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.
Pembangunan modular boleh dilakukan dalam es6, yang ditakrifkan dalam spesifikasi modular ES6:
Setiap fail js ialah modul bebas
Gunakan kata kunci import untuk mengimport ahli modul lain
Gunakan kata kunci eksport untuk berkongsi ahli modul secara luaran
eksport
Fungsi modul terutamanya terdiri daripada dua arahan: export
dan import
. Perintah export
digunakan untuk menentukan antara muka luaran modul, dan perintah import
digunakan untuk mengimport fungsi yang disediakan oleh modul lain.
Modul ialah fail bebas. Semua pembolehubah di dalam fail ini tidak boleh diperolehi dari luar. Jika anda mahu dunia luar dapat membaca pembolehubah di dalam modul, anda mesti menggunakan kata kunci export
untuk mengeluarkan pembolehubah.
Contohnya:
//test1.js export var firstName = 'mike' export var lastName = 'Jack'
Kod di atas ialah fail test1.js
yang menyimpan maklumat pengguna. ES6 menganggapnya sebagai modul, yang menggunakan perintah export
untuk mengeluarkan tiga pembolehubah ke luar. Sebagai tambahan kepada perkara di atas, terdapat cara lain untuk menulis export
:
//test1.js var firstName = 'mike' var lastName = 'Jack' export {firstName, lastName}
export
Selain mengeluarkan pembolehubah, arahan juga boleh mengeluarkan fungsi atau kelas
export function add(x, y){ return x + y }Perintah
export
boleh muncul di mana-mana dalam modul, selagi ia berada di peringkat atas modul. Jika ia berada dalam skop peringkat blok, ralat akan dilaporkan, dan perkara yang sama berlaku untuk perintah import
sebagai
Biasanya, keluaran export
Pembolehubah ialah nama asalnya, tetapi boleh dinamakan semula menggunakan kata kunci as
function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion };
Gunakan Perintah export
untuk menentukan luaran modul Selepas antara muka, fail js lain boleh memuatkan modul ini melalui perintah import
import {firstName, lastName} from './test1.js' console.log(firstName,lastName)
Jika anda ingin menamakan semula pembolehubah input, gunakan perintah import
untuk menukar pembolehubah input Namakan semula. as
import {lastName as suName} from './test1.js'
Pembolehubah yang dimasukkan oleh arahan semuanya baca sahaja, kerana intipatinya ialah antara muka input. Dalam erti kata lain, antara muka tidak dibenarkan untuk ditulis semula dalam skrip yang memuatkan modul. import
selepas
import {a} from './xxx' a = {} //报错
import
menentukan lokasi fail modul, yang boleh menjadi laluan relatif atau laluan mutlak Akhiran from
boleh diabaikan. Jika ia hanya nama modul tanpa laluan, maka mesti ada fail konfigurasi untuk memberitahu enjin JavaScript lokasi modul .js
yang mengeluarkan dua kaedah circle.js
dan area
. circumference
// circle.js export function area(radius) { return Math.PI * radius * radius; } export function circumference(radius) { return 2 * Math.PI * radius; }Sekarang, muatkan modul ini.
// main.js import { area, circumference } from './circle'; console.log('圆面积:' + area(4)); console.log('圆周长:' + circumference(14));Kaedah di atas adalah untuk menentukan kaedah yang akan dimuatkan satu persatu Kaedah pemuatan keseluruhan adalah seperti berikut.
import * as circle from './circle'; console.log('圆面积:' + circle.area(4)); console.log('圆周长:' + circle.circumference(14));Perhatikan bahawa objek di mana modul dimuatkan secara keseluruhan (
dalam contoh di atas) harus boleh dianalisis secara statik, jadi perubahan masa jalan tidak dibenarkan. Kaedah penulisan berikut tidak dibenarkan. circle
import * as circle from './circle'; // 下面两行都是不允许的 circle.foo = 'hello'; circle.area = function () {};arahan lalai eksport
digunakan untuk menentukan output lalai untuk modul export default
//export-default.js export default function(){ console.log('foo') }Apabila modul lain memuatkan modul,
perintah boleh Fungsi tanpa nama boleh diberikan sebarang nama Perintah import
import cus from './export-default.js'
juga boleh digunakan sebelum fungsi bukan tanpa nama, tetapi nama fungsi tidak sah di luar modul , ia dianggap sebagai fungsi tanpa nama , pada asasnya, export default
adalah untuk mengeluarkan pembolehubah atau kaedah yang dipanggil export default
, dan kemudian sistem membenarkan anda memberikannya sebarang nama default
export default function test(){ console.log('test') }Bandingkan yang biasa. output dan output lalai
//第一组 export function arc(){ //... } //输出 import {arc} from 'arc' //输入 //第二组 export default arc2(){ //... } //输出 import arc2 from 'arc2' //输入
Ringkasan: Pernyataan sepadan dengan export
perlu menggunakan pendakap dan pernyataan import
sepadan dengan export default
tidak perlu menggunakan pendakap gigi. Perintah import
digunakan untuk menentukan output lalai modul Jelas sekali, modul hanya boleh mempunyai satu output lalai, jadi export default
hanya dibenarkan digunakan sekali dalam modul yang sama. Oleh itu, tidak perlu menambah pendakap selepas arahan import yang sepadan dengannya modul yang sama, pernyataan export default
boleh Ditulis bersama dengan pernyataan
export {foo, bar} from 'my_module' //可以简单理解为 import {foo, bar} from 'my_module' export {foo, bar}
上面代码中,export
和import
语句可以结合在一起,写成一行。但需要注意的是,写成一行以后,foo
和bar
实际上并没有导入当前模块,只是相当于对外转发了这两个接口,导致当前模块不能直接使用foo
和bar
.
import(specifier)
上面的代码中,import
函数的参数specifier
,指定所要加载的模块的位置。。import
命令能够接受什么参数,import()
函数就能接受什么参数,两者区别主要是后者为动态加载。
import()
返回一个 Promise 对象。下面是一个例子。
const main = document.querySelector('main'); import(`./section-modules/${someVariable}.js`) .then(module => { module.loadPageInto(main); }) .catch(err => { main.textContent = err.message; });
import()
函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。另外,import()
函数与所加载的模块没有静态连接关系,这点也是与import
语句不相同。import()
类似于 Node 的require
方法,区别主要是前者是异步加载,后者是同步加载。
【相关推荐:javascript视频教程、web前端】
Atas ialah kandungan terperinci Perkara yang perlu digunakan untuk mengimport sumber dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!