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

为了模块话我们的前端代码，我现在对模块化的思想大致理解如下:

1、页面模块化

我们通常没写一张页面都回有这样的布局用这样的类来作为calss，分为三个模块

top，main，footer，而常见的top模块还可以进行细分为其他小模块，例如，top里有nav，一些链接的模块

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

2、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);

myPrivateVar1、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;
}());