JS_Module模式深刻了解一下

该文章是直接翻译国外一篇文章，关于JS的Module模式的深度解析(这也是JS设计模式中的一种模式)。
都是基于原文处理的，其余的都是直接进行翻译可能有些生硬，因此为了行文方便，就作了一些简单的本地化处理。
若是想直接根据原文学习，能够忽略此文。

同时该篇文章也算是，前端模块化的番外篇。(这篇文章也在准备当中,敬请期待)
复制代码

模块模式是一种经常使用的代码模式。它简单实用，可是也有一些“优雅”的使用方式，没有获得开发者的重视。因此，这篇文章，带你们来重温一下基层的用法，而且介绍一些比较优雅的使用方式。

译者注：

模块模式，其实就是JS实现模块化的最基础的地基。例如AMD,UMD,COMMONJS,还有ES6的module都是基于这个实现方式(构建一个IIFE,{独立做用域})来实现模块化编程

还有一点就是ES6中class是ES5构造函数的语法糖。ES5在自定义一个类，须要构造函数+构造函数.prototype来实现，可是为何ES6的class却能够将prototype中的方法放在class的代码范围中。（也就是说，class一次性将构造函数和prototype都构建了。）若是想了解Class如何优雅的进行“糖化”

基础用法

咱们来简单回顾一下什么是module pattern。若是你对基础知识比较熟悉的话，能够跳过这部分，直接翻阅"高级用法"。

匿名做用域(Anonymous Closures)

匿名做用域是实现模块化最基本的结构，也是在JS的语言范畴中，最好的实现方式。咱们简单的构建了一个匿名函数，而且立马执行该匿名函数。在该函数中的全部代码都独立的运行在指定做用域中。而且该做用域中定义的私有变量和状态值贯穿项目的全部周期。

(function () {
	//在该做用域中的全部变量和函数都挂载在了全局变量上(都是全局变量)
}());

复制代码

Notice:

在匿名函数外包还有一个()。这是必需要的。
由于在JS中若是一个语句是以function开头，JS引擎会认为这是一个函数声明。而经过()包裹以后，就变成了函数表达式。

导入全局变量

JS语法中，存在一个颇有意思的特性：隐含的全局变量。

当访问一个变量名，JS编译器就会循着做用域链（scope chain）去查找是否在指定的结点中存在与之相同的变量名。若是在整条做用域链中都没有发现该变量名，这个变量就会被自动赋给全局变量。
当编译器对一个本来不存在的变量进行赋值，该变量也会自动挂载在全局变量。

针对隐含的全局变量这个特性，在一个匿名做用域中使用/建立一个变量是很是简单的。而这偏偏让代码变的维护性降低。

幸运的是，匿名函数为咱们提供了一种解决方案。经过将全局变量做为参数传入到匿名函数中，直接对传入的全局变量赋值和查值。这样就比隐含的全局变量经过做用域链查找和赋值变量的方式更快，更简洁。

(function ($, YAHOO) {
	//在该做用域中，就能访问jQuery, YAHOO的实例了
}(jQuery, YAHOO));

复制代码

模块导出

有些应用场景中，不只仅是用到全局变量，并且还想声明一个全局变量。咱们能够经过在匿名函数中return一个对象，来实现声明全局变量。

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

	function privateMethod() {
		// ...
	}

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

	return my;
}());
复制代码

Notice:

咱们声明了一个名为MODULE的全局模块，该模块拥有两个公共(public)属性：
一个方法(MODULE.moduleMethod)、一个变量(MODULE.moduleProperty)
而且该模块经过匿名函数实现了私有的(private)变量和方法。

高级用法

尽管上面的简单用法，能知足咱们90%的模块需求，可是咱们能够基于普通用法，来构建更加高级的用法

追加属性和方法(Augmentation)

针对上述模块实现而言，存在一个弊端/限制，就是一个文件定义整个模块的实现。 针对大型项目而言，代码的布局的高内聚，低耦合很重要。因此，有些特定的实现是不须要都堆砌在一个文件中的。

而argment modules这种代码布局方式就应运而生。

1. 导入指定模块
2. 在指定模块中新增属性
3. 导出修饰以后的模块

var MODULE = (function (my) {
    //基于MODULE的基础上，新增指定方法/属性
	my.anotherMethod = function () {
		
	};

	return my;
}(MODULE));
复制代码

在该匿名函数被执行以后，原先的module就会新增了一个新的公共方法(MODULE.anotherMethod)。该文件也能够存在本身的私有方法等。

宽松的扩展(Loose Augmentation)

咱们上述的例子中，要求咱们先构建一个初始模块，而后进行追加操做。其实这种处理方式不是必要的。由于，<script>标签能够实现异步加载，这样的话，就不存在模块初始化的问题，可能追加的模块先加载。这样就不会存在初始模块这个概念。

因此，咱们须要一种定义模块的方式，而这种方式是不关心各个模块的加载顺序。

Talk is cheap ,show you the code:

var MODULE = (function (my) {
	// 随意新增属性

	return my;
}(MODULE || {}));
复制代码

Notice:

1.在该中模式下，var的声明是必要的。
2. 导入的模块是不须要考虑先前是否存在。也就意味着，使用Loose Augmentation构建的模块，在调用的时候，能够利用相似于LABjs的工具库，实现平行加载。

严谨的扩展(Tight Augmentation)

虽然利用loose augmentation构建的模块很好，可是也对模块新增了一些约束。其中比较重要的就是，1.你没法安全的对模块中的属性和方法进行重写。2.在初始化的时候，是没法使用在另一个文件中定义的模块的属性。

而Tight augmentation隐藏了加载顺序。可是容许进行方法和属性的重载(override) 咱们将原先实现过的MODULE做为参数传入到函数中

var MODULE = (function (my) {
	var old_moduleMethod = my.moduleMethod;
    //进行方法的从新，可是能够经过old_moduleMethod访问原来的方法
	my.moduleMethod = function () {
		// ...
	};

	return my;
}(MODULE));
复制代码

上述代码中，咱们即对MODULE.moduleMethod进行重写，同时保持了对原始方法的引用(若是有必要的话)。

复制和继承(Cloning and Inheritance)

var MODULE_TWO = (function (old) {
	var my = {},
		key;

	for (key in old) {
		if (old.hasOwnProperty(key)) {
			my[key] = old[key];
		}
	}

	var super_moduleMethod = old.moduleMethod;
	my.moduleMethod = function () {
		//从新复制以后的方法，经过super_moduleMethod来访问原始方法
	};

	return my;
}(MODULE));

复制代码

该实现方式，多是最灵活的选择。

跨文件的私有变量(Cross-File Private State)

将一个模块分红不少文件组成最大的限制就是：每一个文件拥有本身的私有变量，同时这些私有变量没法跨文件访问。这样就没法进行单一模块的拆分处理。

可是，利用loosely augmented module能够很好的解决这个问题：

var MODULE = (function (my) {
	var _private = my._private = my._private || {},
		_seal = my._seal = my._seal || function () {
			delete my._private;
			delete my._seal;
			delete my._unseal;
		},
		_unseal = my._unseal = my._unseal || function () {
			my._private = _private;
			my._seal = _seal;
			my._unseal = _unseal;
		};

	// permanent access to _private, _seal, and _unseal

	return my;
}(MODULE || {}));
复制代码

任何文件均可以在局部变量(_private)上设置属性，而且在其余文件中能够立马范围到。

一旦该模块加载完成，程序调用MODULE._seal()，用于阻止外部文件访问该模块的内部属性(internal _private)。

若是须要对该模块进行扩展，则在应用程序的生命周期中任何文件下的内部方法中在新模块加载以前调用_unseal()。在扩展以后，继续调用_seal()用于私有属性的加密处理。

子模块（Sub-modules）

咱们上述介绍的高级模块都很简单。同时也有不少构建一个子模块的方式。

MODULE.sub = (function () {
	var my = {};
	// ...

	return my;
}());
复制代码

总结

大多数的高级模式均可以互相组合用于构建一个更加方便的模式。若是想要构建一个比较复杂的程序。能够尝试loose augmentation、private state、 和 sub-modules的组合。