MVC開發(fā)模式(backbone)培訓文檔

MVC開發(fā)模式設(shè)計理念每個部分都因其存在于更大整體的背景中而被賦予了特定的形式。這是一個分化的過程。它把設(shè)計看成是一系列復雜化的活動；結(jié)構(gòu)是通過對整體操作、使其起皺而注入其中的，而不是通過一小部分一小部分添加而成。在分化的過程中，整體孕育了部分：整體的形式及其各個部分是同時產(chǎn)生的。分化過程就好像是胚胎的成長過程。通常我們在設(shè)計軟件時都習慣于自底向上設(shè)計：先把最底層的工具類實現(xiàn)好，再使用這些工具類實現(xiàn)一些略微高層的類，再通過這些高層的類去組合成更上層的類。這似乎是理所當然的：沒有下面的東西，上面的抽象怎么可能正常工作？Alexander卻認為，無論是設(shè)計什么，都應該從整體入手，在對整體的不斷細化中再考慮具體的部分。------------摘自《建筑的永恒之道》為什么要使用MVC-1.簡單化Mvc是一種分治思想，把代碼分層，每層又劃分更小的view,復雜度下降為原有的1/Nmodelcontroler1controler2View1..view2…view3controler3MVC是一套通用的設(shè)計理論體系，有非常豐富的理論和實踐體系支持。使用它能夠統(tǒng)一思想，降低溝通成本，也能使自我的設(shè)計能力提升一個臺階。為什么要使用MVC-2.實現(xiàn)統(tǒng)一前人修好了橋，沒有必要再摸石頭過河了。MVC類關(guān)系圖Model層最為獨立，只能由controller單向調(diào)用View層一般是指UI組件，不涉及任何業(yè)務邏輯，如果沒有UI組件，View只是一段html代碼Controller層是一個橋梁，負責View與model之間的聯(lián)系。把model層運算的結(jié)果推給view來展示。IOS的MVC（僅供參考）傳送門：/niitlcj/article/details/7276026MVC中的設(shè)計模式觀察者模式----這是最重要的組合模式----幾個小的view由更上層的一個view控制，組成樹狀結(jié)構(gòu)。分治思想的體現(xiàn)。（可選）命令模式-----將交互操作封裝為命令，可以提高重用性（可選）MVC世界交通規(guī)則Model只能由controller調(diào)用不同的Controller之間不能直接通訊，要采用觀察者消息通知。觀察者模式類圖觀察者模式實際上就是我們每天在用的事件綁定。把一個（或多個）回調(diào)函數(shù)與一個字符串建立關(guān)聯(lián)。只要廣播這個字符串，與之關(guān)聯(lián)的回調(diào)函數(shù)就會執(zhí)行。backbone1.Backbone.js是一種重量級javascript

MVC應用框架,通過Models進行key-value綁定及custom事件處理2.我們主要使用了backbone的命名和聲明規(guī)范，trigger,on事件機制。Backbone.ModelModel.get(在defaults列表里取一個值)Model.set(在defaults列表里存一個值，會觸發(fā)on(“change:xxxxxx”))Model.defaults(存取屬性變量的容器)Model.trigger(觸發(fā)事件。由Backbone.Events提供)Model.on（監(jiān)聽事件。由Backbone.Events提供）Backbone.ViewView.initialize(初始化)View.render（入口函數(shù)）View.el(html容器元素聲明)View.events（可以用聲明的方式綁定事件）View.template（html模板字符串聲明）控制反轉(zhuǎn)的實現(xiàn)（由數(shù)據(jù)驅(qū)動界面改變）View層this.model.on(“change:dataSource”,this.render)Model層this.set(“dataSource”,[...])當數(shù)據(jù)改變時，由model層的數(shù)據(jù)改變，來觸發(fā)View層的界面重繪。不同View之間的通訊（解除耦合）ViewAthis.model.trigger(“deleteCommand”,{id:1})ViewBthis.model.on(“deleteCommand”,function(args){this.deleleteRefresh(args.id)})觀察者模式的純js實現(xiàn)（完整代碼）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{