个人总结-模块化规范

CommonJs规范

特点

• 每个文件为一个模块，内部定义的变量、函数为私有，对外不可见
• module变量代表当前模块，module为对象
• exports属性是对外接口，加载模块相当于加载module.exports属性
• require关键字加载对应模块；即返回该模块的exports对象
• 属于服务器端的模块化方案，浏览器不支持，需要构建工具编译

AMD规范

特点

• 一次性加载所有模块（require.js）

语法

define(id,dependencies,factory)
//id:可选参数，用于标识模块,
//dependencies:当前模块所依赖的模块名称数组
//factory:模块初始化要执行的函数或对象
require([dependencies],function(dependencies[0],dependencies[1],...){})
//第一个参数为需要依赖的模块数组，第二个参数为一个回调函数

CMD规范

特点

• 需要的时候才加载模块(sea.js)

语法

define(function(require, exports, module){
    exports.属性=?
})
seajs.use('文件名',function(){})

ES6模块化

特点

• 需要babel编译

语法

// utils.js
const show = () => {
  document.getElementById(id).setAttribute('style', 'display: block');
}
const hide = () => {
  document.getElementById(id).setAttribute('style', 'display: none');
}
export {
    show,
  hide
}
// 或者直接抛出方法
export const show = (id) => {
  document.getElementById(id).setAttribute('style', 'display: block');
}
export const hide = (id) => {
  document.getElementById(id).setAttribute('style', 'display: none');
}
// 外部引入模块
import { show, hide } from './utils'