AMD----- 依赖前置 (require.js)
引入模块-----require([ ],callback)
定义模块----- define([],callback)
CMD ----- 依赖就近引入原则(seaJs)
引入模块 (遵循就近原则)
定义模块----- define([],callback)
CommonJS
引入模块-------require('模块路径')
定义模块 ------ exports.模块名= function(){ //some code ... }
ES6
引入模块 ----- import
定义模块 ----- export、export default
使用方式和示例
AMD
步骤如下：
1、引入require.js，并用data-main指定入口的js文件。
2、在入口的js文件内用require.config配制各个模块的路径。
3、define定义js模块文件
4、require引入js模块文件
注意: require([ ],callback)首先异步加载数组内的模块，随后才会去执行callback;
示例:
index.html
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.js" defer async="true" data-main="js/main"></script>js/main.js （使用require引入模块）
require.config({
baseUrl: "./",
paths: {
"jquery": "jquery.min",
"math":"math",
"getStyle":"getStyle"
}
});
require(['jquery','math','getStyle'], function ($,math,getStyle){
let total = math.add(109,23);
console.log(total);
getStyle.setRedBg('body','#dddddd');
// some code ......
});js/math.js 自定义的不依赖其它模块的模块 （使用define定义模块）
//不依赖其它模块的，自定义的模块
define(function(){
var add = function (x,y){
return x+y;
};
return {
add: add
};
})
js/getStyle.js 自定义的依赖其它模块的模块 （使用define定义模块）
define(['jquery'],function($){
var setRedBg = function(tag,color){
$(tag).css('background',color);
}
return {
setRedBg:setRedBg
}
})
2.2 CMD
CMD与AMD的区别：
-
对于依赖的模块，AMD是提前执行，CMD是延迟执行。
（不过RequireJS从2.0开始，也改成可以延迟执行） -
AMD推崇依赖前置，CMD推崇依赖就近。
define(function (requie, exports, module) {
//依赖可以就近书写
var a = require('./a');
a.test();
...
//软依赖
if (status) {
var b = requie('./b');
b.test();
}
});2.3 CommonJs规范
在模块中，通过require()方法来引入外部的模块。
上下文提供了exports 对象导出当前模块的方法和变量， 并且它是唯一导出的出口。
在模块中还存在一个module对象，它代表模块自身，而exports是module的属性。
导出模块
exports.math = function(){
//some code ...
}
引入模块
var math = require('math')
2.4 ES6 Module
ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。
/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass = class myClass {
static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!
