Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Cara menggunakan lalai eksport dalam es6

Cara menggunakan lalai eksport dalam es6

WBOY
WBOYasal
2022-08-30 17:01:311249semak imbas

Dalam ES6, "eksport lalai" digunakan untuk mengeksport fungsi terikat masa nyata, objek atau nilai primitif daripada modul Sesuatu fail hanya boleh menulis "eksport lalai" pada penghujungnya untuk menentukan lalai output untuk modul ialah "fungsi lalai eksport () {...}".

Cara menggunakan lalai eksport dalam es6

Persekitaran pengendalian tutorial ini: sistem Windows 10, ECMAScript versi 6.0, komputer Dell G3.

Cara menggunakan lalai eksport dalam es6

Pernyataan eksport digunakan untuk mengeksport fungsi terikat masa nyata, objek atau nilai primitif ​​dari modul supaya program lain boleh mengimport {foo, bar} daripada ' ./util/index' merujuk kepada

Terdapat dua cara untuk mengeksport eksport:

Fungsi eksport eksport bernama FunctionName(){...} (setiap modul mengandungi sebarang nombor )

Ungkapan lalai eksport eksport lalai; (setiap modul mengandungi satu)

eksport

Anda boleh menulis berbilang eksport dalam satu fail

Eksport dalam fail a.js

export let name1 = '张三'; // 或者使用 var, const
export function FunctionName(){...}
export class ClassName {...}

Import dalam fail b.js

import {name1,FunctionName,ClassName} from '../a.js';

Perhatikan bahawa penulisan berikut akan mengakibatkan ralat:

// 报错
export 1;
// 报错
var m = 1;
export m;
// 报错
function f() {}
export f;

eksport lalai

Sesuatu fail hanya boleh menulis satu eksport lalai

pada penghujung dan mengeksportnya dalam fail a.js

const str = "export default的内容";
function FunctionName(){...}
class ClassName {...}
export default {str,FunctionName,ClassName}

Import dalam fail b.js

import name from '../a.js';
// 使用
console.log(name.str)
name.FunctionName();

Perbezaan antara eksport dan eksport lalai

1. eksport dan eksport lalai Boleh digunakan untuk mengeksport pemalar, fungsi, fail, modul, dsb.

2. Dalam fail atau modul, boleh terdapat berbilang eksport dan eksport lalai sahaja satu di hujung fail

3 Eksport melalui eksport, tambah { } apabila mengimport, eksport lalai tidak diperlukan dan boleh diberi sebarang nama

Pengenalan terperinci

Kami tahu bahawa apabila mempelajari VUE Export lalai{} amat diperlukan, tetapi kami mesti memahami maksudnya.

eksport lalai{} Ini digunakan apabila menggunakan semula komponen. Katakan kita menulis fail komponen halaman tunggal A dan perlu menggunakannya dalam fail B yang lain, maka kita perlu menggunakan sintaks import/eksport ES6 untuk menentukan eksport antara muka output dalam fail A dan memperkenalkan import dalam fail B. Gunakan komponen yang diimport supaya anda boleh menggunakan semula komponen A untuk memadankan fail B untuk menjana halaman html.

Apabila menggunakan arahan import, pengguna perlu mengetahui nama pembolehubah atau fungsi yang hendak dimuatkan, jika tidak, ia tidak boleh dimuatkan. Walau bagaimanapun, pengguna pasti mahu bermula dengan cepat, dan mungkin tidak bersedia untuk membaca dokumentasi untuk memahami sifat dan kaedah yang dimiliki oleh modul tersebut. Untuk memberikan kemudahan kepada pengguna dan membenarkan mereka memuatkan modul tanpa membaca dokumentasi, perintah lalai eksport digunakan untuk menentukan output lalai untuk modul.

1. Penggunaan asas

//export-default.js 这是一个模块文件export-default.js,它的默认输出是一个函数
export default function () {
  console.log('foo');
}
//import-default.js
import customName from './export-default';
customName();  //'foo'
//这是的import命令,可以用任意名称指向export-default.js输出的方法,这时就不需要知道原模块输出的函数名。
// 需要注意的是,这时import命令后面,不使用大括号。

Apabila modul lain memuatkan modul tanpa nama, arahan import boleh menentukan sebarang nama untuk fungsi tanpa nama.

2. Perintah lalai eksport digunakan sebelum fungsi bukan tanpa nama

// export-default.js
export default function foo() {
  console.log('foo');
}
 
// 或者写成
 
function foo() {
  console.log('foo');
}
 
export default foo;
//上面代码中,foo函数的函数名foo,在模块外部是无效的。加载的时候,视同匿名函数加载。

[Cadangan berkaitan: tutorial video javascript, depan web -tamat

Atas ialah kandungan terperinci Cara menggunakan lalai eksport dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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:Adakah jquery miniui percuma?Artikel seterusnya:Adakah jquery miniui percuma?