js模块(module)和导入，导出（import，export）

什么是模块（module）

一个模块（module）就是一个文件。一个脚本就是一个模块。就这么简单。

模块可以相互加载，并可以使用特殊的指令 export 和 import 来交换功能，从另一个模块调用一个模块的函数或者变量，常量...，即可以引入并调用其他模块的方法，也可以导出自身的方法给其他模块使用，

import和export 关键字

• export 关键字标记了可以从当前模块外部访问的变量和函数。
• import 关键字允许从其他模块导入功能。

// a.js:
export function a(){
    console.log("a");
}

// index.html:

 <script type="module">
import {a} from "./a.js"

a();
</script>

在这样index文件就通过导入使用了a文件的a（）方法，这里的 "./a.js" 是a文件所在的相对路径

模块脚本 总是 被延迟的

• 下载外部模块脚本 <script type="module" src="..."> 不会阻塞 HTML 的处理，它们会与其他资源并行加载。
• 模块脚本会等到 HTML 文档完全准备就绪（即使它们很小并且比 HTML 加载速度更快），然后才会运行。
• 保持脚本的相对顺序：在文档中排在前面的脚本先执行。

<script type="module">
  alert(typeof button); // object：脚本可以“看见”下面的 button
  // 因为模块是被延迟的（deferred，所以模块脚本会在整个页面加载完成后才运行
</script>

相较于下面这个常规脚本：

<script>
  alert(typeof button); // button 为 undefined，脚本看不到下面的元素
  // 常规脚本会立即运行，常规脚本的运行是在在处理页面的其余部分之前进行的
</script>

<button id="button">Button</button>

<scprit>的async属性 可以让module直接执行而不用等待html文档就绪

<script async type="module"></script>

对于模块的使用，大部分时候是在框架的构建工具中，比如,webpack工具。

import 和 export

export可以和要导出的部分分开写

// 导出数组
let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];


// 导出类
class User {
  constructor(name) {
    this.name = name;
  }
}

// 导出 const 声明的变量
const YEAR = 2024;

export  {YEAR，User,months} ；

as和default

使用as可以通过指定的名称使用导入的模块,或者导出模块

// say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi as Hi, sayBye as Bye};


-------------------------------


// main.js
import {Hi as hi, Bye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

default只能与export一起使用，表示默认导出，一个文件只能有一个默认导出

命名的导出	默认的导出
export class User {...}	export default class User {...}
import {User} from ...	import User from ...

 有default的导出模块，引用时不能带括号，同时引用的名称可以自定义，（比如上面的默认导出可以写成 import one from ... 这样one就表示User类)

没有default的导出模块，引用时必须带括号，引用的名称不可以自定义

import() 表达式

import(module) 表达式加载模块并返回一个 promise，该 promise resolve 为一个包含其所有导出的模块对象，我们可以在代码中的任意位置调用这个表达式。

尽管 import() 看起来像一个函数调用，但它只是一种特殊语法，只是恰好使用了括号，它不是一个函数。

// index.html
<script>
  async function load() {
    let say = await import('./say.js');
    say.hi(); // Hello
    let bye = say.default;
    bye();// bye
  }
</script>
<button onclick="load()">Click me</button>

// say.js
export function hi() {
  alert(`Hello`);
}
export default function bye() {
  alert("bye");
}

在HTML中使用import() 不需要使用module类型script标签,可以通过default属性访问到默认导出。