JavaScript模块化

一、CommonJS规范
- 1、在node环境下的模块化
- - 导入、导出
- 2、浏览器环境下使用模块化
- - browserify编译js
二、ES6模块化规范
- 1、在浏览器端的定义和使用
- 2、在node环境下简单使用
- - 方式一：
  - 方式二：
- 3、导出数据
- 4、导入数据
- 5、数据引用问题

一、CommonJS规范

1、在node环境下的模块化

导入、导出

导入：require，例如：const axios = require('axios'); 或者解构导入const {axios,postgres:pg}=require('./_axios_postgres.js')

导出：exports，例如：exports.axios = {"axios":axios,"pg":pg}或者对象整体导出：module.exports = { axios,pg }

在这里插入图片描述

2、浏览器环境下使用模块化

默认是不支持require的，所以需要编译一下才能在html中引入模块化js

browserify编译js

在这里插入图片描述

二、ES6模块化规范

1、在浏览器端的定义和使用

导出代码

export const my_axios = { "a": 1, b: "2" }
export function getAxios() {
  return my_axios
}

导入代码

import * as es6 from "./27、es6模块化-导出.js"
console.log("xxx", es6.getAxios());

html测试代码，type="module"一定要加上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script type="module" src="./27、es6模块化-导入.js"></script>
<body>
  
</body>
</html>

控制台打印结果
在这里插入图片描述

2、在node环境下简单使用

方式一：

（1）修改上面导入导出文件为mjs文件

在这里插入图片描述

（2）执行结果

在这里插入图片描述

方式二：

在上面导入导出的js文件下新建package.json，加上内容type如下

{
  "type": "module"
}

运行结果
在这里插入图片描述

3、导出数据

（1）、分别导出。将导出的对象前面分别加上export

export const my_axios = { "a": 1, b: "2" }
export function getAxios() {
  return my_axios
}

（2）、统一导出。使用export {}

const postgres1 = "pg1"
const postgres2 = "pg2"
export {postgres1,postgres2}

（3）、默认导出。export default {}

const postgres3 = "pg3"
export default { postgres3}
或者
export default postgres3

4、导入数据

（1）、导入全部。

import * as es6 from "./27、es6模块化-导出.js"

（2）、命名导入。只针对分别导出和统一导出

import { my_axios as axios, getAxios } from "./28、es6模块化-导出.js"

（3）、默认导入。只针对默认导出

import xxx(随便起，获取到的是默认导出的所有对象) from "./28、es6模块化-导出.mjs"

（4）、通用导入。混合使用

import xxx(随便起，获取到的是默认导出的所有对象), { my_axios, getAxios } from "./28、es6模块化-导出.mjs"

（5）、动态导入。点击按钮后导入某个js

<body>
  <button id="btn">导入</button>
</body>
<script>
  const btn = document.getElementById("btn")
  btn.onclick = async () => {
    const result = await import("./27、es6模块化-导出.js")
    console.log("result", result);
  }
</script>

在这里插入图片描述
（6）、import可以不接收任何数据。
比如每次启动项目都要在控制台打印一次当前版本号，
先创建version.js，内容写上console.log("v_1.1.2")，然后在访问开始页面直接使用import "./version.js"即可。

5、数据引用问题

思考一：
在这里插入图片描述
思考二：相当于复制了一份

思考三：