【JavaScript进阶之旅 模块化篇 第二十五章】插件、组件、模块化开发

插件：是一种开发的方式，实现某一功能的拓展
组件：根据UI进行视图的划分

一、模块化演变

1. 全局函数
2. 立即执行函数（宽放大模式、注入、变量私有化、代码的组织方式）
3. namespace（命名空间，简易版的require.js）
4. CommonJS - CMD（后端的，模块化方式，同步加载，Sea.js）
5. CommonJS - AMD（前端的，异步加载，require.js）
6. ES6模块化

二、namespace

小型的require.js

1、使用

namespace('math', [], function() {
	function add(a, b) { return a + b };

	function sub(a, b) { return a - b };

	return {
		add,
		sub
	}
});

namespace('calculator', ['math'], function(m) {
	var action = 'add';

	function compute(a, b) {
		m[action](a, b);
	}

	return {
		compute
	}
});

2、实现

var namespace = (function() {
	var cache = {};

	/**
	 * name：模块名称
	 * deps：模块依赖
	 * fn：模块定义
	 */ 
	return function createModule(name, deps, fn) {

		// 方法一
		// if(arguments.length === 1) {
		// 	return cache[name];
		// }

		// deps = deps.map(function(depsName) {
		// 	return namespace(deps); // 拿到当前所有的模块依赖
		// });

		// 方法二
		deps = deps.map(function(depsName) {
			return cache[depsName]; // 拿到当前所有的模块依赖
		});

		cache[name] = fn.apply(null, deps);
		return cache[name];
	}
})();

var module1 = namespace('math', [], function() {
	function add(a, b) { return a + b };

	function sub(a, b) { return a - b };

	return {
		add,
		sub
	}
});

module1.add(1, 4);

var module2 = namespace('calculator', ['math'], function(m) {
	var action = 'add';

	function compute(a, b) {
		return m[action](a, b);
	}

	return {
		compute
	}
});

console.log(module2.compute(3, 1));

三、CommonJS

• require导入
• module.exports导出 （跟exports导出有区别， 例如module.exports = function(){} 用export语法导出：exports.fn = function(）{})

同步的方式加载模块，因为是后端，访问本地文件，他快

四、AMD

• require.js
• 异步加载
• define(‘math’, [‘’], function() {})

五、CMD

• sea.js
• 同步加载

六、ES6模块化

• 整合前端模块化的规范
• 异步加载
• export 导出
• import from导入

// 方式一
export let a = 1;

import * as index from './index';

// 方式二
export {
	a,
	b
}

import { a, b } from './index';

// 方式三
export default {
	a,
	b
}

import index from './index';

// index.a index.b访问