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”