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

perintah eksport

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
};

arahan import

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

Pemuatan keseluruhan modul

Selain menentukan nilai output tertentu untuk dimuatkan, anda juga boleh menggunakan Muatkan secara keseluruhan, iaitu, gunakan asterisk (*) untuk menentukan objek, dan semua nilai output akan dimuatkan pada objek ini.

Di bawah ialah fail

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()函数

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!