function a(){
}
function b(){
}
let moduleA = {
a(){},
b(){}
}
let moduleB = {
a(){},
b(){}
}
let moduleA = (function () {
let state;
function getState() {
return state;
}
return { getState };
})();
let moduleB = (function () {
let state;
function getState() {
return state;
}
return { getState };
})();
console.log(moduleA.getState());
console.log(moduleB.getState());
(function (global) {
function add(a, b) {
return a + b;
}
global.addModule = { add };
})(window);
(function (global) {
function minus(a, b) {
return a - b;
}
global.minusModule = { minus };
})(window);
(function (global, addModule, minusModule) {
global.mathModule = { add: addModule.add, minus: minusModule.minus };
})(window, addModule, minusModule);
console.log(mathModule.add(2, 2));
console.log(mathModule.minus(2, 2));
define(id?, dependencies?, factory);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="http://static.js.xywy.com/common/js/require.min.js"></script>
<script src="index.js"></script>
</body>
</html>
require.config({
baseUrl: 'modules'
});
require(['addModule', 'minusModule'], (addModule, minusModule) => {
console.log(addModule.add(1, 2), minusModule.minus(3, 4));
});
modules\addModule.js
define(function () {
function add(a, b) {
return a + b;
}
return {
add
}
});
2.js\amd\modules\minusModule.js
define(function () {
function minus(a, b) {
return a - b;
}
return {
minus
}
});
amd\amd.js
let moduleFactory = {};
function define(name, factory) {
moduleFactory[name] = factory;
}
function require(dependencies, callback) {
callback(...dependencies.map(dependency => moduleFactory[dependency]()));
}
define('addModule', function () {
function add(a, b) {
return a + b;
}
return {
add
}
});
define('minusModule', function () {
function minus(a, b) {
return a - b;
}
return {
minus
}
});
require(['addModule', 'minusModule'], function (addModule, minusModule) {
console.log(addModule.add(1, 2), minusModule.minus(3, 4));
})
CMD
叫做通用模块定义规范(Common Module Defination )<body>
<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>
<script src="index.js"></script>
<script>
seajs.use('./index.js')
</script>
</body>
cmd\index.js
define(function (require, exports) {
var addModule = require('./modules/addModule')
let result1 = addModule.add(1, 2);
console.log(result1);
var minusModule = require('./modules/minusModule')
let result2 = minusModule.minus(1, 2);
console.log(result2);
})
modules\addModule.js
define(function (require, exports) {
exports.add = function (a, b) {
return a + b;
}
})
modules\minusModule.js
define(function (require, exports) {
exports.minus = function (a, b) {
return a - b;
}
})
cmd\sea.js
let factories = {}
let modules = {};
function require(name) {
if (modules[name]) {
return modules[name];
}
let factory = factories[name];
let exports = {};
factory(require, exports);
modules[name] = exports;
return exports;
}
function define(name, factory) {
factories[name] = factory;
}
function use(name) {
require(name);
}
define('addModule', function (require, exports) {
exports.add = function (a, b) {
return a + b;
}
})
define('minusModule', function (require, exports) {
exports.minus = function (a, b) {
return a - b;
}
})
define('index', function (require, exports) {
var addModule = require('addModule')
let result1 = addModule.add(1, 2);
console.log(result1);
var minusModule = require('minusModule')
let result2 = minusModule.minus(1, 2);
console.log(result2);
})
use('index');
a.js
module.exports = {
a: 1
};
b.js
var a = require('./a');
var b = a.a + 2;
module.exports ={
b
};
((root, factory) => {
if (typeof define === 'function' && define.amd) {
//AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
//CommonJS
var $ = require('jquery');
module.exports = factory($);
} else {
root.testModule = factory(root.jQuery);
}
})(this, ($) => {
//todo
});
/** 导出模块的方式 **/
var a = 0;
export { a }; //第一种
export const b = 1; //第二种
let c = 2;
export default { c }//第三种
let d = 2;
export default { d as e }//第四种,别名
/** 导入模块的方式 **/
import { a } from './a.js' //针对export导出方式,.js后缀可省略
import main from './c' //针对export default导出方式,使用时用 main.c
import 'lodash' //仅仅执行lodash模块,但是不输入任何值
// a.js
let x = 10
let y = 20
setTimeout(()=>{
x = 100
y = 200
},100)
export { x }
export default y
// b.js
import { x } from './a.js'
import y from './a.js'
setTimeout(()=>{
console.log(x,y) // 100,20
},100)