common.js规范和es6规范以及cmd、amd规范（js umd规范）

一 common.js规范（同步执行）

1. utils.js
// 一 如果exports或者exports defaults都是.xx的形式，那么两者是可以同时使用的
// exports.name = 'common.js'
// exports.add = function () {
// console.log('方法add~~exports')
// }
// module.exports.sex = '男'

/*
  总结：
    1. 每一个文件都相当于一个模块，同时该文件会有一个默认的module对象，modules对象中又会存在一个属性值为对象的exports
      把想要暴露的值放到exports对象中，别的文件（即模块）想要引用的时候就会引用到exports对象，从而拿到想要的变量或者函数
    2. 每个模块默认设置了 var exports = module.exports，即让变量exports 指向对象module.exports，这样只是为了使用方便
    3. 使用 exports 时，只能单个设置属性，不可以直接对它赋值，即必须exports.xx = 'yy'
    4. 使用module.exports时，既可以单个设置属性，也可以直接对它赋值
    5. 总之，用module.export就准没错
    6. common.js规范是同步执行的
*/

2. rec.vue
<template>
  <div>
    <div>common规范</div>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  mounted () {
    var moduleObj = require('@/view/rules/common/utils')
    console.log('moduleObj', moduleObj)
    console.log('moduleObj.name', moduleObj.name)
    moduleObj.add()
  }
}
</script>

二 es6规范

1. utils.js
// 一个文件中export可以有多个，但是export default只能有一个
// export单个暴露变量或者函数
export const province = '河南'
export function getAddress () {
console.log('获取到地址')
}
// export暴露多个函数或者变量
const name = '张三'
const sex = '男'
export { name, sex }
// export default 暴露函数或者变量
const city = '郑州'
function getStreet () {
console.log('获取街道地址')
}
export default { city, getStreet }
 
2. rec.vue
<template>
  <div>
    es6规范
  </div>
</template>
<script>
// 一 统一接收
// 导出模块中包含export和export default两种方式：将utils文件中所有暴露的变量或者函数放在module对象中,不管是什么方式暴露出来的
// 导出模块中只包含export default：本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字，和三->默认暴露实质上一样
// 导出的模块中只有export的导出方式，那么统一接收也可以直接输出一个自己命名的变量
// import * as module from '@/view/rules/es6/utils'
//  二 export暴露方式-->>按需接收（接收的是导出模块中export导出的部分）：按需导入的方式接收想要的函数或者变量;可以用as给导入的变量重新命名
// import { province as newPro, getAddress, name, sex } from '@/view/rules/es6/utils'
//  三  使用export default暴露方式-->>默认暴露的接收（接收的是导出模块中export default导出的部分），不能按需接收，detail就是export default中的所有的变量和函数
import detail from '@/view/rules/es6/utils'
export default {
  data () {
    return {}
  },
  mounted () {
    console.log('module', module)
    // console.log('province', province)
    // console.log('newPro', newPro)
    // console.log('name', name)
    // console.log('sex', sex)
    // getAddress()
    console.log('detail', detail)
    // console.log('city', detail.city)
    // detail.getStreet()
  }
}
</script>

三 cmd规范和amd规范

1.对于依赖的模块。AMD是提前执行，CMD是延迟执行。

2.AMD推崇依赖前置（依赖必须一开始就写好），CMD推崇依赖就近（依赖可以就近书写）

3.AMD加载慢，CMD加载较快

4.都是define定义，require引用加载