JavaScript 学习笔记【Modules模块化编程】

阳光穿透心脏的1/2处 2023-03-01 13:38 29阅读 0赞

### JavaScript 学习笔记【Modules模块化编程】 ###

*  模块特性
 *  使用模块
 *   *  1. HTML
     *  2. xxx.js
 *  export 模块导出
 *  import 模块导入
 *   *  默认导入
     *  具名导入
     *  混合导入
     *  全部导入
 *  动态导入
 *  参考资料

# 模块特性 #

1.  模块会自动延迟加载。总是会在所有html解析后才执行。
2.  模块都有独立的顶级作用域， 各模块不能互相访问。
3.  预解析：模块只在导入时执行一次解析。
4.  模块自动使用`严格模式`。

# 使用模块 #

## 1. HTML ##

`HTML`中使用 `type="module"` 来声明此脚本是一个`模块`

## 2. xxx.js ##

一个`js`文件就可以当成一个模块

# export 模块导出 #

1.  export要放在最外层

测试用模块：`test.js`

# import 模块导入 #

1.  `html`与`js`在同一目录下，浏览器中地址需要加`./`

## 默认导入 ##

默认导入不需要花括号。（`default`导出的）

import foo from "./test.js";
    foo.send("喂！！！有人吗？");

## 具名导入 ##

导入时也可以使用`as`定义别名。

import {  name, hi as hello } from "./test.js";
    hello();
    console.log('你好：' + name);

## 混合导入 ##

import foo from "./test.js";
    import {  name, hi as hello } from "./test.js";
    
    foo.send("喂！！！有人吗？");
    hello();
    foo.send('你好：' + name);

## 全部导入 ##

import * as api from './test.js';
    
    api.default.send("喂！！！有人吗？");
    api.hi();
    api.default.send('你好：' + api.name);

# 动态导入 #

这种是静态导入 ：`import foo from "./test.js";`  
可用`import()`函数实现动态导入模块，返回一个 promise 对象。

import('./test.js')
    .then(module => { 
       console.log(module.name);
    });

# 参考资料 #

[MDN JavaScript modules 模块][MDN JavaScript modules]  
[MDN import 模块导入][MDN import]  
[MDN export 模块导出][MDN export]  
[后盾人视频教程 —— 第十三章 来来来！掌握JS模块化开发，编写高可用代码][_ _ _JS]  
[后盾人文档 —— JavaScript 模块化][_ JavaScript]

[MDN JavaScript modules]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules
[MDN import]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
[MDN export]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export
[_ _ _JS]: https://www.bilibili.com/video/BV1jJ411r7nb
[_ JavaScript]: https://houdunren.gitee.io/note/js/13%20%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1.html#%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1