设计模式--架构型设计模式

架构型设计模式有同步模块模式，异步模块模式，Widget模式，MVC模式，MVVM模式。
同步模块模式
模块化：将复杂的系统分解成高内聚，低耦合的模块，使系统开发变得可控，可维护，可拓展，提高模块的复用率。
同步模块模式-请求发出后，无论是模块是否存在，立即执行后续的逻辑，实现模块开发中对模块的立即引用。
要想实现模块化开发，首先要有一个模块管理器，它管理着模块的创建与调度。对于模块的调用分为两类，第一类同步模块调度的实现比较简单，不需要考虑模块间的异步加载。第二类异步模块调度的实现就比较繁琐。他可以实现对模块的加载调度。

var F=F||{};F.define=function(str,fn){    var parts=str.split('.'),old=parent=this,i=len=0;    if(parts[0]==='F'){parts=parts.slice(1);}    if(parts[0]==='define' || parts[0]==='module'){         return ;    }    for(len=parts.length ;  i < len ; i++){        if(typeof parent[parts[i]]==='undefined'){            parent[parts[i]]={}        }        old=parent;        parent=parent[parts[i]];    }    if(fn){        old[parts[--i]]=fn();    }    return this;}

模块化开发即是以分而治之的思想，实现对复杂系统的分解，使系统随着其功能的增加而变得可控，可拓展，可维护。这就要求我们对模块细化。随着系统功能的增加模块的数量也随之增加。模块开发的成本随之减少，但是模块的接口数量却随之增加，接口的使用成本和开发与维护成本也随之增加，所以合理的模块分割显得尤为重要。
模块化开发是一种对系统的分解，但使用时又像是以组合模式对模块的组合。因此这也使得系统中的问题一般出现在局部，使得开发人员处理相应模块即可，而不用顾虑整个系统。因此相对于整个复杂的系统，对于局部模块的改造，优化甚至替换所需成本要小得多。组合的灵活性也使得我们可以实现更复杂，多样化的功能。
在web前端，实现的模块化开发往往创建了大量的闭包，这会在内存中占用大量的资源得不到释放，这是一种资源的浪费，但相对于解决的问题来说，这种开销是值得的。
同步模块模式是模块化开发的一种最简单的形式，这种模式使得依赖的模块无论加载，无论是无，模块创建即执行，这就要求依赖的模块必然是创建过的。同步模块模式无法处理异步加载的模块，因此浏览器端异步加载文件的环境模式限制了同步模块模式的应用。不过对于服务器端如nodejs等，他们的文件都存储在本地，因此同步模块模式更适用。

异步模块模式
异步模块模式:请求发出后，继续其他业务逻辑，知道模块加载完成执行后续的逻辑，实现模块开发中对模块加载完成后的引用。

F.module=function(url,modDeps,modCallback){var args=[].slice.call(arguments),callback=args.pop(),deps=(args.length&&args[args.length-1] instanceof Array)?args.pop():[],url=args.length?args.pop():null,params=[],depsCount=0,i=0,len;    if(len = deps.length){        while(i<len){            (function(i){                depsCount++;                loadModule(deps[i],function(mod){                    params[i]=mod;                    depsCount--;                    if(depsCount===0){                        setModule(url,params,callback);                    }                })            })(i);            i++        }    }else{        setModule(url,[],callback);    }}

模块化开发不仅解决了系统的复杂性问题，而且减少了多人开发中变量，方法名被覆盖的问题。通过其强大的命名空间管理，使模块的结构更合理。通过对模块的引用，提高了模块代码复用率。异步模块模式在此基础上增加了模块依赖，使开发者不必担心某些方法尚未加载或者未加载完全造成的无法使用问题。异步加载部分功能也可将更多首屏不必要的功能剥离出去，减少首屏加载成本。

Widget模式
Widget模式：（Web Widget指的是一块可以在任意页面中执行的代码块）Widget模式是指借用Web Widget思想将页面分解成部件，针对部件开发，最终组合成完整的页面。

//模板引擎模块F.module('lib/template',function(){    var _TplEngine=function(){},    _getTpl=function(){},    _dealTpl=function(){},    _compileTpl=function(){};    return _TplEngine;});

Widget架构模式是页面开发模块化，不仅仅是页面功能，甚至页面的每个组件模块都可以独立地开发，这更适合团队中多人开发。并且降低相互之间因功能或者视图创建的耦合影响概率。一个组件即是一个文件，也让我们更好地管理一个页面，当然组件的多样化也会组建一个更丰富的页面，同样也会让组件的复用率提高，这是很有必要的。这也是组件开发的价值所在。

MVC模式
MVC模式：即模型（model）–视图（view）–控制器（controller）,用一种将业务逻辑，数据，视图分离的方式组织架构代码。
MVC思想是将页面分成3层部分，数据层部分，视图层部分，控制器部分。而我们知道，视图层可以调用数据层创建视图，控制器层可以调用数据层数据与视图层内的视图创建页面增添逻辑。因此我们就可以将页面简化成3个部分：

$(function(){    var MVC=MVC || {};    MVC.model=function(){}();    MVC.view=function(){}();    MVC.controller=function(){}();});

MVC架构模式很好地解决了页面中数据层，视图层，业务逻辑层（控制器）之间的耦合关系，使它们得到显性的区分，这也使得层次之间的耦合度降低。我们在开发中可以不用顾忌所有需求而专注于某一层次开发，降低了开发与维护成本，提升了开发效率。如果页面系统足够复杂，某些视图要共享同一组数据，或者某些需求的实现引用类似视图，此时MVC模式便可提高某些视图与数据的复用率。
因此对于大型页面系统的开发，三个层次各司其职。每一层次专注于自己的事情，有利于工程化，模式化开发并管理代码；便于大型页面系统的可持续开发与维护；也是降低层次耦合，提升代码复用的良好实践。
在复杂组件的开发中，运用MVC思想管理组件内部层次也是一种不错的选择。

MVVM模式
MVVM模式:模型（model）-视图（view）-视图模型（viewModel）：为视图层（view）量身定做一套视图模型（viewmodel），并在视图模型中创建属性和方法，为视图层绑定数据并实现交互。

var VM=function(){    var Method={//.....}    function getBindData(){        return function(){            var doms=document.body.getElementsByTagName('*'),            ctx=null;            for(var i=0;i<doms.length;i++){                ctx=getBindData(doms[i]);                ctx.type&&Method[ctx.type](doms[i],ctx);            }        }    }}

MVVM模式使视图层更灵活，可以独立于数据模型层，视图模型层而独立修改，自由创建。当然这也使得数据模型层可以独立变化，甚至一个视图模型层可以对应多个视图层或者数据模型层。MVVM模式是对视图模型层的高度抽象，因此当多个视图层对应同一个视图模型层时，也使得视图模型层内的代码逻辑变得高度复用。而这种开发模式最重要的一个特征恐怕就是视图层的独立开发，这样可以使那些不懂JavaScript的人，只要了解HTML内容并按照视图层规范格式创建视图即可完成一个复杂的页面开发，而让那些开发人员可专注于开发视图模型层里面的业务逻辑了。

架构型设计模式是一类框架结构，通过提供一些子系统，指定他们的职责，并将它们条理清晰地组织在一起。