济南哪家公司可以做网站网络营销的概念和特征
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、数据引用问题
思考一：
思考二：相当于复制了一份
思考三：
