CommonJS规范与 ES Module规范小结

87 阅读 0 评论 58 点赞

我是靠谱客的博主冷酷蜻蜓，这篇文章主要介绍CommonJS规范与 ES Module规范小结，现在分享给大家，希望可以做个参考。

CommonJS

exports = module.exports 用于导出

require 用于导入

具体用法如下

复制代码

1
2
3
/**demo.js**/
let demo = "demo"
exports.demo = demo

复制代码

1
2
3
4
/**main.js**/
let demoRe = require("./demo.js");
//或者
let {demo} = require('./demo.js')

导出是引用赋值关系，浅拷贝。

模块在第一次被引入的时候，模块中的js代码会被运行一次

模块被多次引入时，会缓存，最终只加载（运行）一次

---------------------------------------------分割线-----------------------------------------------

ES Module

export负责将模块内的内容导出
import负责从其他模块导入内容

html文件中引入需要加type="module"

复制代码

1
<script src="./index.js" type="module"></script>

复制代码

1
2
3
4
5
6
7
8
9
10
11
// import导入方式
// 方式一： import {} from '路径'
// 注意此处的{}不是对象,导入时后边必须要加.js
import { demo } from './demo.js'
// 方式二：导出的变量可以起别名
import { demo as Fdemo } from './demo.js'
// 方式三：import * as foo from '路径'
import * as demo from './demo.js'
// 方法四：default导出方式
import demo from './demo.js'

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// export 导出方式
// 方式一：
export const demo= "demo"
export const hiDemo= function (name) {
console.log('hiDemo' + hiDemo);
}
// 方式二：
export {
demo,
hiDemo
}
// 方式三：{} 导出时，可以给变量起别名
export {
demo as demo,
hiDemo as FhiDemo
}
// 方式四：默认导出
export default function hiHemo() {
console.log('demodemodemo！');
}