JavaScript学习日记 : Day29 - import & export

在开发中，为了避免单一档案太大，通常会使用模组管理，分拆每个档案视为独立的模组，透过import、export汇出汇入来使用。

如果要在浏览器运行模组化，需要在script标签加上type="module":

// index.html

<!doctype html>
<script type="module">
  import {sayHi} from './say.js';

  document.body.innerHTML = sayHi('John');
</script>

// say.js

export function sayHi(user) {
  return `Hello, ${user}!`;
}

// 输出结果

Hello, John!

use strict

module预设就是use strict:

// index.html
<script type="module">
  a = 123; // error, user is not defined
</script>

模组作用域

每个模组都有自己顶级作用域(top-level scope)，模组各自作用域中的变数、函数彼此是不可取得的:

// cat.js

let name = "white cat"

// jump.js

console.log(`${name} jump!`) // name is not defined

// index.html

<!doctype html>
<script type="module" src="cat.js"></script>
<script type="module" src="jump.js"></script>

如果要在jump.js中取得cat.js中的变数，可以这样做:

// cat.js

export let name = "white cat"

// jump.js
import { name } from './cat.js'
console.log(`${name} jump!`) // name is not defined

// index.html

<!doctype html>
<script type="module" src="cat.js"></script>
<script type="module" src="jump.js"></script>

export

expert可以汇出值、object、函数、class等等都可以，export分为两种类型:

named export(具名输出) : 汇出前给予特定名称，汇入也使用一样的名称，一个module可以有多个named export
default export(预设输出) : 一个module只能有一个default export，不需要给名称。

named export

方法一 :
export後面紧接着let、const

export let a = 123;

export let obj = { name : David }

使用as改名:

const obj = { name : "David" }

export {obj as newName};

方法二 :
export後面紧接着函数表达式

export function test() {
  console.log('这是一段函式')
}

方法三 :
定义好所有物件、方法後，将所有统一汇出:

let a = 123;
let obj1 = { name : 'John' };
let func1 = function() { alert('function1') }

export {a, obj1, func1}

default export

汇出时不需要赋予名称，但是可以在import时给名称。

// 纯值
export default 123

// 汇出objetc
let a = 123;
let obj1 = { name : 'John' };
let func1 = function() { alert('function1') }

export default {a, obj1, func1}

与具名函数不同，可以直接汇出匿名函数与class:

// 汇出匿名函式
export default function() {
  console.log('这是一段函式');
}

// 汇出 class
export default class {
  constructor(name) {
    this.name = name;
  }
  callName() {
    console.log(this.name);
  }
}

import

汇入的方法要视汇出的形式，是named export或default export，或是都有:

汇入default export

// demoModule.js
// export file
export default function() {
  console.log('这是一段函式');
}

//import file

import fnName from './demoModule.js'

fnName();

汇入named export

// demoModule.js
// export file
export const obj = { name: 'John'}; 
export function fn() {
  console.log(`${obj.name} is imported`)
}

// import file
import {obj, fn } from './module.js';
fn(); // John is imported

重新命名

// demoModule.js
// export file
export const obj = { name: 'John'}; 

// import file
import {obj as newNameObject } from './module.js';
fn(); // John is imported

也可以透过*一次汇入全部的具名函数，搭配as指向一个新物件名称:

// demoModule.js
// export file
export const obj = { name: 'John'}; 
export function fn() {
  console.log(`名为fn的函数`)
}

// import file
import * as demoModule from './module.js';
demoModule.fn(); // 名为fn的函数

同时汇入预设、具名

// demoModule.js
// export file
export const obj = { name : "David"}
export default function() {
    console.log('我是预设汇出函数')
}

// import file
import fnName, * as objName from './demoModule.js'

<<: Day29

>>: 【Day 26】指标介绍（下）