MVC开发模式(backbone)培训文档

MVC开发模式设计理念每个部分都因其存在于更大整体的背景中而被赋予了特定的形式。这是一个分化的过程。它把设计看成是一系列复杂化的活动；结构是通过对整体操作、使其起皱而注入其中的，而不是通过一小部分一小部分添加而成。在分化的过程中，整体孕育了部分：整体的形式及其各个部分是同时产生的。分化过程就好像是胚胎的成长过程。通常我们在设计软件时都习惯于自底向上设计：先把最底层的工具类实现好，再使用这些工具类实现一些略微高层的类，再通过这些高层的类去组合成更上层的类。这似乎是理所当然的：没有下面的东西，上面的抽象怎么可能正常工作？Alexander却认为，无论是设计什么，都应该从整体入手，在对整体的不断细化中再考虑具体的部分。------------摘自《建筑的永恒之道》为什么要使用MVC-1.简单化Mvc是一种分治思想，把代码分层，每层又划分更小的view,复杂度下降为原有的1/Nmodelcontroler1controler2View1..view2…view3controler3MVC是一套通用的设计理论体系，有非常丰富的理论和实践体系支持。使用它能够统一思想，降低沟通成本，也能使自我的设计能力提升一个台阶。为什么要使用MVC-2.实现统一前人修好了桥，没有必要再摸石头过河了。MVC类关系图Model层最为独立，只能由controller单向调用View层一般是指UI组件，不涉及任何业务逻辑，如果没有UI组件，View只是一段html代码Controller层是一个桥梁，负责View与model之间的联系。把model层运算的结果推给view来展示。IOS的MVC（仅供参考）传送门：/niitlcj/article/details/7276026MVC中的设计模式观察者模式----这是最重要的组合模式----几个小的view由更上层的一个view控制，组成树状结构。分治思想的体现。（可选）命令模式-----将交互操作封装为命令，可以提高重用性（可选）MVC世界交通规则Model只能由controller调用不同的Controller之间不能直接通讯，要采用观察者消息通知。观察者模式类图观察者模式实际上就是我们每天在用的事件绑定。把一个（或多个）回调函数与一个字符串建立关联。只要广播这个字符串，与之关联的回调函数就会执行。backbone1.Backbone.js是一种重量级javascript

MVC应用框架,通过Models进行key-value绑定及custom事件处理2.我们主要使用了backbone的命名和声明规范，trigger,on事件机制。Backbone.ModelModel.get(在defaults列表里取一个值)Model.set(在defaults列表里存一个值，会触发on(“change:xxxxxx”))Model.defaults(存取属性变量的容器)Model.trigger(触发事件。由Backbone.Events提供)Model.on（监听事件。由Backbone.Events提供）Backbone.ViewView.initialize(初始化)View.render（入口函数）View.el(html容器元素声明)View.events（可以用声明的方式绑定事件）View.template（html模板字符串声明）控制反转的实现（由数据驱动界面改变）View层this.model.on(“change:dataSource”,this.render)Model层this.set(“dataSource”,[...])当数据改变时，由model层的数据改变，来触发View层的界面重绘。不同View之间的通讯（解除耦合）ViewAthis.model.trigger(“deleteCommand”,{id:1})ViewBthis.model.on(“deleteCommand”,function(args){this.deleleteRefresh(args.id)})观察者模式的纯js实现（完整代码）MyModel={callbackList:{},on:function(key,func){varcallbackList=this.callbackList;if(callbackList[key]){callbackList[key].push(func);}else{callbackList[key]=[func];}callbackList=null;},trigger:function(key,args){varcallbackList=this.callbackList,currFuns=callbackList[key]||null;if(currFuns){for(vari=0;i<currFuns.length;i++){varfunc=currFuns[i];try{