CommonJS 基于node (服务器端)
1 暴露一个对象
module.exports = {
msg:'module1,
foo(){
console.log(this.msg);
}
};
2 暴露一个函数
module.exports = {
console.log('module2');
}
3 暴露一个对象
exports.foo = function(){
console.log('foo() module3');
};
exports.bar = function(){
console.log('bar() module3');
};
exports.arr = [2,4,5,2,3,5,1];
4 汇集到主模块
let uniq = require('uniq');
let module1 = require('./modules/module1');
let module2 = require('./modules/module2');
let module3 = require('./modules/module3');
module1.foo();
module2();
module3.foo();
module3.bar();
let result = uniq(module3.arr);
console.log(result);
没有规范化的模块
1 没有规范化的无依赖模块
(function(window){
let name = 'dataService.js';
function getName(){
return name;
}
window.dataService = {getName};
})(window)
2 没有规范化的有依赖模块
(function(window){
let msg = 'alerter.js';
function showMsg(){
console.log(msg,dataService.getName());
}
window.alerter= {showMsg};
})(window,dataService)
3 没有规范化的主模块
(function(alerter){
alerter.showMsg();
})(alerter)
4 没有规范化的HTML
<script src="./js/dataService.js"></script>
<script src="./js/alerter.js"></script>
<script src="./app.js"></script>
CommonJS 基于AMD Require.js (浏览器端)
1 无依赖模块
define(function(){
let name = 'dataService.js';
function getName(){
return name;
}
return {getName};
});
2 有依赖模块
define(['dataService','jquery'], function(dataService){
let msg = 'alerter.js';
function showMsg(){
console.log(msg,dataService.getName());
}
$('body').css('background','deeppink');
return {showMsg};
});
3 主模块
(function(){
requirejs.config({
baseUrl:'js/',
paths:{
dataService:'./modules/dataService',
alerter:'./modules/alerter',
jquery:'./libs/jquery-1.10.1'
}
});
requirejs(['alerter'],function(alerter){
alerter.showMsg();
})
})()
4 HTML
<script data-main='js/app.js' src="js/libs/require.js"></script>
CMD 基于 Sea.js (浏览器端)
1 无依赖模块
define(function(require,exports,module){
let msg= 'module1';
function bar(){
return msg;
}
module.exports = {foo};
});
2 无依赖模块
define(function(require,exports,module){
let msg= 'module2';
function bar(){
console.log(msg);
}
module.exports = bar;
});
3 无依赖模块
define(function(require,exports,module){
let data= 'module3';
function fun(){
console.log(data);
}
exports.module3 = {fun};
});
4 有依赖模块
define(function(require,exports,module){
let msg = 'module4';
let module2 = require('./module2');
module2();
require.async('./module3',function(module3){
module3.module3.fun();
});
function fun2(){
console.log(msg);
}
exports.fun2 = fun2;
});
5 主模块
define(function(require){
let module1 = require('./module1');
console.log(module1.foo());
let module4 = require('./module4');
module4.fun2();
});
6 HTML
<script src="js/libs/sea.js"></script>
<script>
seajs.use('./js/modules/main.js');
</script>
ES6基于bable (浏览器端)
1 暴露模块 分别暴露
export function foo() {
console.log('foo() module1');
}
export function bar() {
console.log('bar() module1');
}
export let arr = [1,2,3,4,5];
2 统一暴露
function fun() {
console.log('fun() module1');
}
function fun2() {
console.log('fun2() module1');
}
export {fun,fun2};
3 默认暴露 可以暴露任意数据类型,暴露什么数据就接收什么数据
export default () => {
console.log('默认暴露');
}
4 引入
import {foo,bar} from './module1';
import {fun,fun2} from './module2';
import module3 from './module3'