Day08-import/export

前言

以前我们可能会引入许多的JavaScript档案

而现在前端更多应用的时代,程序的庞大会让前端人员头痛欲裂?

於是模组化的出现,让很多需要抽离的程序可以透过import / export 来进行操作。

Import / Export

• 需要在script tag中添加 type="module"
• 模组化副档名为.mjs

首先我们在index.html中引入main.js档案,并且定义type="module"

於是我们的档案会有main.js和module.mjs

default

//module.js

function sum(n) {
  return n * 2  
}

export default sum

//main.js

import sum from './module.mjs'
console.log(sum(2)); //4

可以看到我们在module.mjs中使用export default 输出,在main.js中使用import变数。

multi exports

那如果要输出多个变数呢???

我们就要把default去掉使用{ }包括住变数,并且在汇入的档案中也要使用{ }包括。

// module.mjs
function sum(n) {
  return n * 2  
}

let name = 'Dennis'

export {sum, name}

//main.js
import {sum, name} from './module.mjs'
console.log(sum(2)); //4
console.log(name);// Dennis

as(alias)

import {sum, name as Dennis} from './module.mjs'
console.log(sum(2)); //4
console.log(Dennis);// Dennis

明天会开始进入JavaScript的重头戏!!!

也谢谢大家的收看