指的是一類框架結構，通過提供一些子系統，指定它們的職責，並且將它們調理清晰組織在一起。主要包含了同步模組模式、非同步模組模式、widget模式、mvc模式、mvp模式、mvvm模式
模組化把複雜的系統分解為高內聚、低耦合的模組，讓系統開發變得可控、可維護、可拓展，提高模組的復用率。
同步模組模式（smd）
請求發出以後，不論模式是否存在。立即執行後續的邏輯，實現模組開發中對模組的立即引用。
模組管理與建立方法
/***
* 同步模組模式
*///定義模組管理單體物件
var f = f || {};
/** * 定義模組方法
* @param str 模組路由
* @param fn 模組方法
*/ f.define = function(str,fn)
//遮蔽對define和module模組方法的重寫
if (parts[0] === "define" || parts[0] === "module")
//遍歷路由模組並且定義每層模組
for(len=parts.length;i非同步模組模式（amd）
請求發出之後，繼續其他業務邏輯，直到模組載入完成執行後續的邏輯，實現模組開發中對模組載入完成後的引用。
/***
* 非同步模組
*///在閉包中傳入模組管理器物件f
~(function(f)
})((function();
})());
/***
* 建立或者呼叫模組方法
* @param url 引數為模組的url
* @param deps 引數為依賴模組
* @param callback 引數為模板主函式
*/f.module = function(url,moddeps,modcallback),
/*** 編譯執行
* @param str 模板資料
*/_compiletpl = function(str)\neval(template_key);\ntemplate_array.push('"+=_dealtpl(str)+"');\ntemplate_key = null;\n})(templatedata);\nfn = null;\nreturn template_array.join('');";
return new function("templatedata",fnbody);
},return _tplengine;
});
就是模型（model）——檢視(view)——控制器(controller),使用一種將 業務邏輯、資料、檢視分離的方式組織架構**。
/**
* mvc模式
*/ window.onload = function();
// 初始化mvc資料模型層
mvc.model = function();
//服務端獲取的資料
m.data = {};
//配置資料，頁面載入時立即提供
m.conf = {};
//返回資料模型層物件操作方法
return ,
//獲取配置資料
getconf:function(c),
//設定服務端資料（通常把服務端非同步獲取到的資料，更新該資料）
setdata:function(m,v),
//設定配置資料（通常在頁面中執行某些操作，為做記錄而更配置資料）
setconf:function(c,v)
}}();
//初始化mvc檢視層
mvc.view = function();
//獲取檢視介面方法
return function(v)
}();
//初始化mvc控制器層
mvc.ctrl = function();
}();
}
模型（model）——檢視（view）——管理器（presenter）;view層不能直接使用model層內的資料，通過presenter層實現對model層內的資料訪問。所有的互動都在presenter中進行。**思路如下（僅供參考）：
/**
* mvp模式
*/~(function(window);
//資料層
mvp.model = function();
m.data = {};
var data = {};
var conf = {};
return ,
/*** 設定資料
* @param m 模組名稱
* @param v 模組資料
*/setdata:function(m,v),
getconf:function(c),
/*** 設定配置
* @param c 配置項的名稱
* @param v 配置項值
*/setconf:function(c,v)
}}();
//檢視層
mvp.view = function() str 元素字串
* @param type 元素型別
*/function gethtml(str,type)中的內容
return str.replace(/^(\w+)([^\]*)?(\)?(.*?)$/,function(match,$1,$2,$3,$4,$5)引數容錯處理
$4 = $4 || ""; //元素內容引數容錯處理
$5 = $5.replace(/\/g,''); //去除元素內容後面新增的元素屬性中的{}內容
return type === "in"?
'<'+$1+$2+$5+'>'+$4+replacekey+'" :
type === "add" ?
'<'+$1+$2+$5+">"+$4+"'+replacekey :
'<'+$1+$2+$5+">"+$4+"";
}).replace(/#([@\-\w]+)/g,' id="$l"') //處理特殊標識 #--id
.replace(/#([@\-\s\w]+)/g,' class="$l"')//處理特殊標識 #--class
.replace(/\[(.+)\]/g,function(match,key));
html = formateitem(html,nodetpl);
})return html;
}}();
//管理器層
mvp.presenter = function()');
$.create("ul",).html(
a.formatestring(tpl,data)}};
return }}
}();
//mvp入口
mvp.init = function()
//暴露mvp物件。在外部可以訪問mvp
window.mvp = mvp;
})(window);
window.onload = function()
模型（model）——檢視（view） ——檢視模型（viewmodel）：給檢視層定做檢視模型，並且在檢視模型中建立屬性和方法。
/**
* mvvm模式
*/~(function()();
var vm = function() dom 進度條容器
* @param data 進度條資料模型
*/progressbar :function(dom,data),
/*** @name 滑動條組建立方法
* @param dom 滑動條容器
* @param data 滑動條資料模型
*/slider:function(dom,data)
setstyle(realwidth);
dom.classname +=" ui-slider";
function setstyle(w);
}bar.onmousedown = function()
document.onselectstart = function()
}document.onmouseup = function()}}
function getbinddata(){}
return function()
}}();
window.vm = vm;
})();
JavaScript設計模式
js類設計模式一 類建構函式 function myclass 定義公共屬性 myclass.prototype 定義公共方法 myclass.prototype.methoda function myclass.prototype.methodb function 呼叫 var objclass ...
JavaScript 設計模式
1 單例模式 singleton pattern 單例模式，是一種常用的軟體設計模式。在它的核心結構中只包含乙個被稱為單例的特殊類。通過單例模式可以保證系統中乙個類只有乙個例項。即乙個類只有乙個物件例項 單例模式會阻止其他物件例項化其自己的單例物件的副本，從而確保所有物件都訪問唯一例項。因為類控制了...
JavaScript設計模式
設計模式是什麼？設計模式就是一套被反覆使用 多數人知曉的 經過分類編目的 設計經驗的總結。為什麼要使用設計模式？設計模式可重用 讓 更容易被他人理解 保證 可靠性，設計模式使 編制真正工程化。設計模式怎麼來的？設計模式概念是由四人幫 設計模式 可復用物件導向軟體的基礎 的四位作者 提出，總共分成了三...