模块化

1，common.js；规范

1．CommonJS是服务器端模块的规范.为同步模块规范。
2.根据CommonJS规范，一个单独的文件就是一个模块。
3．每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取。
//用法：
①　书写一个模块 ----module.exports = A 或者module.exports.A = A
②　引入一个模块 ----- 通过require引入 const A = require(’./A’)

2.AMD规范-【重点】

(1)AMD（Asynchronous Module Definition）为"异步模块定义"。
(2)它采用异步方式加载模块，模块的加载不影响它后面语句的运行。
(3).所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行
//。
AMD规范—require.js库
定义一个AMD模块 AMD模块必须采用特定的define()函数来定义。
如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
define(function(){
function m2(x,y){
return x + y
}
return {
m2:m2
}
})
引入一个AMD模块
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求必须给两个参数。
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；
第二个参数callback，则是加载成功之后的回调函数。
如：require([module], callback);
require([‘m2’], function (m2obj) {
var tot2 = m2obj.m2(3, 6)
console.log(tot2)
})
引入多个AMD模块
我们可以在一个文件中同时引入多个模块，只需要在require的 两个参数处同时加上多个模块就可以了
require([‘m2’, ‘m3’], function (m2obj, m3obj) {
var tot2 = m2obj.m2(3, 6)
var tot3 = m3obj.m3(3, 6)
console.log(tot2, tot3)
})
一个AMD模块依赖其他AMD模块—依赖
定义模块m1,然后m1依赖m2,m3
m1.js
define([‘m2’, ‘m3’], function (m2obj, m3obj) {
‘use strict’
return{
m2:m2obj.m2,
m3:m3obj.m3,
}
})
main.js
require([‘m1’], function (m1obj) {
var tot2 = m1obj.m2(3, 6)
var tot3 = m1obj.m3(3, 6)
console.log(“m1:”,tot2, tot3)
})

3.ES6模块化规范 【重点使用】

ES6模块主要有两个功能：export和import
Es6多个对象的导出和引入
A.js导出：export {m1,m2,m3}
B.js引入：import {m1,m2,m3} from “A.js”
单个默认对象的导出和引入
A.js导出：export default m1
B.js引入：import 任意接收的变量名 from “A.js”