JS模块化概述

CommonJS 基于node （服务器端）

1 暴露一个对象

//module1.js
module.exports = {
	msg:'module1,
	foo(){
		console.log(this.msg);
	}
};

2 暴露一个函数

//module2.js
module.exports = {
	console.log('module2');
}

3 暴露一个对象

//module3.js
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 没有规范化的无依赖模块

//dataService.js
(function(window){
	let name = 'dataService.js';
	function getName(){
		return name;
	}
	window.dataService = {getName};
})(window)

2 没有规范化的有依赖模块

//alerter.js
(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 无依赖模块

//dataService.js
define(function(){
	let name = 'dataService.js';
	function getName(){
		return name;
	}
	//暴露模块
	return {getName};
});

2 有依赖模块

//alerter.js
define(['dataService','jquery'], function(dataService){
	let msg = 'alerter.js';
	function showMsg(){
		console.log(msg,dataService.getName());
	}
	$('body').css('background','deeppink');
	//暴露模块
	return {showMsg};
});

3 主模块

//main.js
(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 无依赖模块

//module1.js
define(function(require,exports,module){
	let msg= 'module1';
	function bar(){
		return msg;
	}
	//暴露模块
	module.exports = {foo};
});

2 无依赖模块

//module2.js
define(function(require,exports,module){
	let msg= 'module2';
	function bar(){
		console.log(msg);
	}
	//暴露模块
	module.exports = bar;
});

3 无依赖模块

//module3.js
define(function(require,exports,module){
	let data= 'module3';
	function fun(){
		console.log(data);
	}
	//暴露模块
	exports.module3 = {fun};
});

4 有依赖模块

//module4.js
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 主模块

//main.js
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 暴露模块 分别暴露

//module1.js
export function foo() {
	console.log('foo() module1');
}

export function bar() {
	console.log('bar() module1');
}

export let arr = [1,2,3,4,5];

2 统一暴露

//module2.js
function fun() {
	console.log('fun() module1');
}

function fun2() {
	console.log('fun2() module1');
}

export {fun,fun2};

3 默认暴露 可以暴露任意数据类型，暴露什么数据就接收什么数据

//module3.js
export default () => {
	console.log('默认暴露');
}

4 引入

import {foo,bar} from './module1';
import {fun,fun2} from './module2';
import module3 from './module3'