CommonJS规范与AMD、UMD、ES6

读前两个疑问：一动态编译与静态编译对规范的影响，二是模块值的引用与值的拷贝的区别。

• 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())