Day 30 - Module

Module 为模组,当网页的程序码越来越多,越来越庞大的时候,会需要把 code 拆分为很多个部分,把每个部分变成独立的模组来使用,避免档案过大,而在每个档案中可以汇入其他模组来做使用,也可以汇出模组让其他档案使用。

  • 汇出的方式为 export,且分为 named export(具名汇出)和 default export(预设汇出)。
  • named export 在 module 中可以有很多个,但 default export 只能有一个。
  • 汇入的方式为 import
  • 要在 <script> 中把 type 设定成 module:<script type="module">
  • module 可以是 function, array, object, variable...等等。

当只有一个 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 名称

  • export 中的用法

例如:将 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!
  • import 中的用法
    例如:汇出 index.js 中的内容,并在 app.js 将其汇入时修改
// 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运用

[Day 06] 一个单元测试的题目-闰年的判断

过了这麽多天, 我们终於进入到主题了, 这一次我们使用的题目, 是输入一个正整数(西元年), 然後判...

B+树索引实战篇-Part2(联合索引的扫描区间与边界条件)

此篇由於篇幅的关系为前文的连贯。 如没有看到前文请先去看看再来唷~ 前情提要-我们前面为了方便解释,...

CSS - Tailwind CSS 阿哩阿杂的设定

上一篇介绍了 Tailwind 基本的语法,而今天要来看的是 Tailwind 的设定,之前说到的许...

【在厨房想30天的演算法】Day 22 演算法 : 最短路径 Shortest Path Bellman–Ford 演算法

Aloha!我是少女人妻 Uerica!我家狗狗每天六点都会叫我起床,但除非自己很早睡,不然六点起床...

Gulp Babel ES6 编译(2) DAY84

昨天我们已经介绍 babel编译 与 concat合并成一支档案 但我们还没介绍 Source Ma...