前端模块化

教程：http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

1，匿名闭包(Anonymous Closures)

(function () {
	// ... all vars and functions are in this scope only
	// still maintains access to all globals
}());
括号里的匿名方法，直接被执行，这让js有了无限可能。

2，全局导入(Global Import)

(function ($, YAHOO) {
	// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));
通过闭包的方法，将内容限制在一个作用域内。

3，模块导出(Module Export)

如果想生命全局变量，可以通过方法的返回值。

var MODULE = (function () {
	var my = {},
		privateVariable = 1;

	function privateMethod() {
		// ...
	}

	my.moduleProperty = 1;
	my.moduleMethod = function () {
		// ...
	};

	return my;
}());

高级模式

1，展开(Augmentation)

var MODULE = (function (my) {
	my.anotherMethod = function () {
		// added method...
	};

	return my;
}(MODULE));
通过var关键字的一致性，我们可以给MODULE增加公开方法anotherMethod.

2，解耦展开(Loose Augmentation)
利用javascript的异步加载。我们可以创建可扩展的，任意顺序的自加载多功能模块，每个文件需要包含这样的结构：

var MODULE = (function (my) {
	// add capabilities...

	return my;
}(MODULE || {}));
使用这种模式，var语句是必须的。

3，紧耦合扩展(Tight Augmentation)

var MODULE = (function (my) {
	var old_moduleMethod = my.moduleMethod;

	my.moduleMethod = function () {
		// method override, has access to old through old_moduleMethod...
	};

	return my;
}(MODULE));

4,复制和继承(Cloning and Inheritance)


教程2： https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc

JavaScript Modules: A Beginner’s Guide

CommonJS vs AMD

CommonJS: load modules synchoronously ,for server side. 

AMD: Asynchronous Module Defination. 
like this:

define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
console.log(myModule.hello());
});

UMD: Universal Module Defination(UMD), UMD Modules are capable of working on both client and server.

UMD Example:

(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['myModule', 'myOtherModule'], factory);
} else if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('myModule'), require('myOtherModule'));
} else {
// Browser globals (Note: root is window)
root.returnExports = factory(root.myModule, root.myOtherModule);
}
}(this, function (myModule, myOtherModule) {
// Methods
function notHelloOrGoodbye(){}; // A private method
function hello(){}; // A public method because it's returned (see below)
function goodbye(){}; // A public method because it's returned (see below)

// Exposed public methods
return {
hello: hello,
goodbye: goodbye
}
}));