總結可維護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;
}());