读前两个疑问：一动态编译与静态编译对规范的影响，二是模块值的引用与值的拷贝的区别。
- CommonJS规范：该规范主要应用用服务器端，一个文件就是一个模块，Nodejs就是采用的CommonJS规范(动态编译)；
- AMD规范： 全称为Asynchronous Module Definition，中文为异步模块定义，采用异步方式加载模块，适合在浏览器中使用，RequireJS采用的AMD规范；
- UMD规范：全称为Universal Module Definition，中文为通用模块定义，主要是为了解决CommonJS与AMD不能通用的问题；
- ES Module：是JavaScript官方提供的标准化模块系统(静态编译)；
CommonJS模式
- module.exports用于规范模块对外接口，exports是module.exports的一个引用；
- require用于加载外部模块，加载的是值的拷贝并且在加载后不能改变，同时缓存起来；
- CommonJS采用同步加载模块，所以适合加载本地服务器资源，而在浏览器端受网络影响不适合采用；
const moment = require('moment')
module.exports = {
now: () => {
return moment.format('YYYY MM DD')
}
}
AMD规范
- define是一个全局函数，用来定义模块，define.amd属性是一个对象标明遵循AMD规范；
- 模块定义：define(?, dependencies, factory)
- require用于加载外部模块；
- return用于规范模块的对外接口；
// 定义dog.js
define(function () {
console.log("狗狗")
return {
say: () => "我是一条狗"
}
})
// 定义main.js
define(function(require) {
var dog = require('./dog')
console.log(dog.say())
})
// index.html引用
<script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
<script>
// main.js在当前目录
requirejs(["main"])
</script>
UMD规范
- 通过define.amd对象来判断是否是AMD规范；
- 通过exports或者module.exports来判断是否是CommonJS规范；
- 如果不是以上两者则被认为是原始的JavaScript规范；
- UMD支持老式的全局变量规范；
// bundle.js
(function(global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory):
(global = global || self, global.run = factory())
}) (this, (function() {
return () => "hello world"
}))
// index.html
<script src="bundle.js"></script>
<script>
console.log(run());
</script>
ES Module规范
- 同时兼容在浏览器和node环境中运行；
- 导入导出通过import和export来实现；
- ES Module输出的是值的引用，而CommonJS输出的是值的拷贝；
- ES Module是在编译时执行，而CommonJS总是在运行时加载；
// demo.js
export default {
run: () => "hello world"
}
// index.js
import demo from "./demo.js"
console.log(demo.run())
网友评论