总结可维护javascript代码一文的心得

为了模块话咱们的前端代码，我如今对模块化的思想大体理解以下:

一、页面模块化

咱们一般没写一张页面都回有这样的布局用这样的类来做为calss，分为三个模块

top，main，footer，而常见的top模块还能够进行细分为其余小模块，例如，top里有nav，一些连接的模块

main里就比较多了，footer也是同样，咱们将页面进行模块话分割，用不一样的模板代写这些模块，而后用mustache将本身的模板嵌入到咱们的index.html页面里，在咱们的index,html页面里，只有body，里面没有多余的标签，最后的index,html里的数据是模板来加载进去的，这样就把view层分割出来了，这样的好处还有就是咱们能够很好地调用这些模块。

二、js模块进行严格封装

Revealing Module Pattern

这个思想是在http://my.oschina.net/feichexia/blog/122217一文中看到的我的以为很好，这种模块模式的主要做用是区分出私有变量/函数和公共变量/函数，达到将私有变量/函数隐藏在函数内部，而将公有变量/函数暴露给外部的目的。

代码以下：

var myModule = (function(window, $, undefined) {
   var _myPrivateVar1 = "";
   var _myPrivateVar2 = "";
   var _myPrivateFunc = function() {
      return _myPrivateVar1 + _myPrivateVar2;
   };

   return {
      getMyVar1: function() { return _myPrivateVar1; },
      setMyVar1: function(val) { _myPrivateVar1 = val; },
      someFunc: _myPrivateFunc 
   };
}) (window, jQuery);

myPrivateVar一、myPrivateVar2是私有变量，myPrivateFunc是私有函数。而getMyVar1（public getter）、getMyVar1（public setter）、someFunc是公共函数。是否是有点相似普通的Java Bean？

模块扩展（Module Augmentation）

有时候咱们想为某个已有模块添加额外功能，能够像下面这样：

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

	return my;
}(MODULE  || {}));

Tight Augmentation

上面的例子传入的MODULE多是undefined，也就是说它以前能够不存在。与之对应Tight Augmentation模式要求传入的MODULE必定存在而且已经被加载进来。

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

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

	return my;
}(MODULE));

   代码意图很明显：实现了重写原模块的moduleMethod函数，而且能够在重写的函数中调用od_moduleMethod。但这种写法不够灵活，由于它假定了一个先决条件：MODULE模块必定存在而且被加载进来了，且它包含moduleMethod函数。

子模块模式

    这个模式很是简单，好比咱们为现有模块MODULE建立一个子模块以下：

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

	return my;
}());