Module 为模组,当网页的程序码越来越多,越来越庞大的时候,会需要把 code 拆分为很多个部分,把每个部分变成独立的模组来使用,避免档案过大,而在每个档案中可以汇入其他模组来做使用,也可以汇出模组让其他档案使用。
<script>
中把 type 设定成 module:<script type="module">
。当只有一个 module 时
例如:汇出 index.js 中的 HELLO 这个变数,并在 app.js 汇入 HELLO 来使用
// index.js
export const HELLO = 'Hello';
// app.js
import { HELLO } from './index.js';
console.log(HELLO); // "Hello"
当有多个 module 时
例如:汇出 index.js 中的 HELLO, PEOPLE 这两个变数,也汇出 sayHi 这个函式
// index.js
export const HELLO = 'Hello';
export const PEOPLE = ['Bob', 'Jen', 'Amy'];
export function sayHi(user) {
console.log(`Hello, ${user}!`);
}
或者也可以先宣告,再一起汇出,像这样:
// index.js
const HELLO = 'Hello';
const PEOPLE = ['Bob', 'Jen', 'Amy'];
function sayHi(user){
console.log(`Hello, ${user}!`);
}
export { HELLO, PEOPLE, sayHi };
在 app.js 汇入 index.js 的 module
// app.js
import { HELLO, PEOPLE, sayHi } from './index.js';
console.log(HELLO); // "Hello"
console.log(PEOPLE); // ['Bob', 'Jen', 'Amy']
sayHi("John"); // Hello, John!
可以利用 as
来修改 module 名称
例如:将 index.js 中的 HELLO 和 sayHi 在汇出时改成 GREET 和 Hi
// index.js
const HELLO = 'Hello';
function sayHi(user){
console.log(`Hello, ${user}!`);
}
export { HELLO as GREET,sayHi as Hi }
在 app.js 中汇入 GREET 和 Hi
// app.js
import { GREET, Hi } from './index.js';
console.log(GREET); // "Hello"
Hi("Mary"); // Hello, Mary!
// index.js
const HELLO = 'Hello';
function sayHi(user){
console.log(`Hello, ${user}!`);
}
export { HELLO, sayHi }
// app.js
import { HELLO as GREET, sayHi as Hi } from './index.js';
console.log(GREET); // "Hello"
Hi("Mary"); // Hello, Mary!
如果有很多要导入的内容,可以使用 import * as <obj>
// index.js
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi, sayBye};
// app.js
import * as say from './index.js';
say.sayHi('Mary'); // Hello, Mary!
say.sayBye('John'); // Bye, John!
default export
前面介绍的都是具名汇出,接着来介绍预设汇出,这种方式不需要有名称(不用变数)就可以直接汇出,但要注意的是每个文件可能只有一个 export default,且汇入时不需要使用大括号 。{ }
例如:
// index.js
export default 'Hi';
export dafault 不需要变数名称且唯一,所以在汇入 default export 时取任意名字都能找到它
// app.js
import a from './index.js';
console.log(a); // Hi
or
// index.js
let name = "Lisa";
export default name;
// app.js
import name from './index.js';
console.log(name); // Lisa
参考资料:
https://zh.javascript.info/import-export
<<: 2.4.7 Design System - Dropdown
>>: 【Side Project】 程序码整理 -Model运用
过了这麽多天, 我们终於进入到主题了, 这一次我们使用的题目, 是输入一个正整数(西元年), 然後判...
此篇由於篇幅的关系为前文的连贯。 如没有看到前文请先去看看再来唷~ 前情提要-我们前面为了方便解释,...
上一篇介绍了 Tailwind 基本的语法,而今天要来看的是 Tailwind 的设定,之前说到的许...
Aloha!我是少女人妻 Uerica!我家狗狗每天六点都会叫我起床,但除非自己很早睡,不然六点起床...
昨天我们已经介绍 babel编译 与 concat合并成一支档案 但我们还没介绍 Source Ma...