常见的模块化规范：CommonJS、AMD、CMD、ES6的Modules
模块化的两个核心：导出和导入
CommonJS的模块化：（需要底层进行解析:node.js）
- CommonJS的导出：module.exports = { }
- CommonJS的导入：let { test，flag，sum} = require('moduleA')
ES6中的模块化：
- 导出：export
- 导入：import
index.html
<!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>
<body>
//引入js文件的type必须为module，才能支持export/import
<script src="xiaoming.js" type="module"></script>
<script src="xiaohong.js" type="module"></script>
</body>
</html>xiaoming.js
var name = '小明'
var age = 26
var flag = true
function sum(num1,num2){
return num1 + num2
}
if(flag){
console.log(sum(10,20))
}
//1.导出变量和函数
export {
flag, sum
};
//2.直接导出变量
export var lover = 'xiaoyuer'
export var height = 1.75
//3.直接导出函数
export function mul(num1,num2){
return num1*num2
}
//4.导出类
export class Person{
run(){
console.log('奔跑吧，少年');
}
}
//5.export default:有且只有一个
const address = '成都'
// export default address
export default function(a){
console.log(a)
}xiaohong.js
//1.导入export中的变量以及函数
import { flag , sum , lover, height} from "./xiaoming.js";
if(flag){
console.log('小红')
console.log(sum(30,40))
}
console.log(lover)
console.log(height)
//2.直接导入export的function
import {mul} from './xiaoming.js'
console.log(mul(30,50))
//3.直接导入export的类
import { Person } from "./xiaoming.js";
const nPerson = new Person();
nPerson.run();
//4.export default:addr为自定义名称，不需要放入大括号，且默认导入的为export default的内容
import addr from './xiaoming.js'
console.log(addr)
addr('Marry')
//5.统一全部导入
import * as xiaoming from './xiaoming.js'
console.log(xiaoming.height)
直接引入带import关键字的js脚本会报错：
解决办法：在vscode中下载并安装Live Server插，右键html文档选择"Open with Live Server"，解决跨域问题，且能够动态监控数据的变化。
运行结果如下：
export可以导入变量、函数、类等。export default 方法允许用户对模块中的功能进行自主命名，当export default 导出一个函数时，不需要对函数进行命名，且一个模板中只允许出现一次export default。
655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
