MVC,MVP,MVVM,MVFM 的比較和架構

今天因為在想一些架構上的問題 !

所以就找了一些東西看!

先講一下我看完一些資料後我自己的了解!

Model-View-Controller

的整個流程是

View <-> Controller -> Model -> View

View 被使用者操作 和 cotroller 互相作用 !

如果有 Cotroller 會通知 Model 作一些處理

Model 會通知 View 作一些改變!

為了將 循環 切斷 將切分得更乾淨!

產生了 Model - View - Presenter

Model <-> Presenter <-> View

View 和 Model 完全的切開了 !

但是更新資料卻要透過 Presenter  傳遞 !

基於 MVP 的架構 又多了一種拆分方式!

Model-View-ViewModel

這是一種特化的 MVP 拆分方式!

針對 View 去拆分 Presenter

讓 View 的流程更順 ~~

Model -> ViewModel <-> View

因為針對 View 去拆分 所以 ViewModel 重用的可能性變得很低

所以出現了

Model - View- FunctionModel 的拆分方法

把 針對 View 拆分的方式 改成對一個 Function 去拆分!

這樣會拆分得更細! 重用的機會也就更多!

以上大概就是我讀了下面那樣多篇的一些粗淺心得!

//==================================================

Riot.js — 1Kb 大小的 JavaScript 的 MVP 框架
http://www.oschina.net/translate/riotjs-the-1kb-mvp-framework

MVC和MVP的一些思考
http://www.cnblogs.com/janyou/archive/2008/12/05/1348244.html

Scaling Isomorphic Javascript Code
http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/

[PureMVC]初學者入門教學Part.1 Application與Facde
http://www.ria.tw/2010/08/puremvcpart1-applicationfacde.html

Understanding MVC And MVP (For JavaScript And Backbone Developers)
http://addyosmani.com/blog/understanding-mvc-and-mvp-for-javascript-and-backbone-developers/

MVFM vs MVVM 的分析 比較
http://www.devdiv.com/mvfm_-blog-55433-50285.html

框架設計! 使用分析過程!
http://my.eoe.cn/961719/articles

Python里没有接口，如何写设计模式？
http://www.zhihu.com/question/20685467

充血模型与贫血模型分别适用于何种情况？
http://www.zhihu.com/question/20360521

如何区分javascript设计模式中的中介者模式(Mediator Pattern)与观察者模式(Observer Pattern)?
http://www.zhihu.com/question/21092827

MVC MVP MVVM MVFM 等的分析比較!
http://www.cnblogs.com/indream/p/3602348.html


http://seldo.com/weblog/2011/06/15/orm_is_an_antipattern

http://www.xuebuyuan.com/1230694.html

再抽象一点
http://techsingular.net/?p=1125

[架構屍] 我的第一個 軟體系統架構規劃 !

這是我邁向 "系統架構師" 的 "一步"

某個因緣際會之下 直接從 "企業主" 取得 "需求" !

我想更專業的人去談 可以談出更多的細節 !

更明白的需求 !

如果我有更多的

"專業領域知識" 和 "輸出表格" "輸入畫面" "輸出畫面" 等等的東西!

我可以設計的部分 會更符合需求!

但這一切 靠我自己就差不多是下面的部分

就我自己訪談後 取得的需求如下:

1. 可以簡單的畫出 需要的簡圖.

2. 輸入寬高 和 中間的支架 就可以生出一張簡圖.

3. 可以自動按比例輸出一張圖 !

4. 可以列印!

根據這些需求我所產出的 圖如下!

下面是我的 "使用案例圖"

下面是我的 "功能架構圖"


下面是我的 "流程圖"



後面 我覺得比較 底層的 類別圖 等等的我就不放上來了 !

基本上 是每個單元都一張 !

因為流程簡單 所以我就不另外建立一個 控制單元

直接就 按照流程圖 把全部的單元串在一起 !


///================== 下面就是閒聊的部份拉

最後~來講一些我覺得有趣的東西!

因為我接洽的企業主! 本身也有相關的程式底子! (所以我才認識 XD)

所以我一開始是打算做成 HTML 5 的網頁給他!

這樣他可以按照 "企業主的需求" 讓他自己去修改!

也可以驗證我分的模組 類別 等等的東西

是不是 便於交接 應用 修改 就算沒有太多我使用的 程式語言 的知識
(條約外 我給自己的隱性需求)


上面講的都是目標

結果我大概花了 8 個小時(工作時數)左右~

產出有 上面的那些圖 和 底層單元的類別圖 的手繪稿

我是學 UML 2.0 的 但是我的工具出圖 是 1.4 這就是學用落差了 orz

而且我是畫好圖才發現.. (難怪我找不到 我要出圖的一些東西)

重點是 基本上 談完的那天 使用者案例圖 和 功能架構圖

已經 大概在腦海中產生了 只是沒畫出來 !

說真的這八小時 大概只有 1個小時多在出圖 和 規畫底層類別

其實卡最久的是 JavaScript 的部分 (最後也證明 我八個小時生不出來)

因為我 不想使用 dart 所以我只能靠 純JS 去做設計 和 製作~

規劃了模組! 但是沒有介面 讓我很多東西 能想

但是我沒辦法做! 當然我自己對 js 的熟悉度也不夠!

像 setTimeout 的一些問題 我到最後還是要去查規範 才知道錯在哪

也許我應該做更多的 JS 練習!

最後我使用我最熟悉的語言 action script 大概只花了兩小時

就將 我規劃的東西做出來!

雖然沒正式的分類別拉 簡單的講就是類別圖畫了

但是我自己實作 還是以 function 的方式 (一個功能一個 function) 實作了出來

因為我自己八個小時生不出來 我自己也急了 orz

來講講我 不選擇使用 dart 的思路!  (其實一開始我就想選 dart 了)

1. dart 我自己得熟悉度 還是比不上 as, 所以在快速產生原型的部分 我只能選 as

2. dart 出來的是 dart 專用的
   雖然可以轉成 JS 但是實際的 JS code
   是非常難以 維護 和 明瞭的
   我想 我交給企業主後 他應該也無法按照自己的需求去修改 orz
   除非讓他學習 dart 後 我交接 dart code 給他就會很明瞭 ! (不要花額外的時間 去教育使用者)

3. 在 企業主 自己修改 維護的 這個癥結上, 加上上面第二點的分析!
   使用 dart 和 as 沒區別 企業主都無法自行修改 !
   所以我就果斷的使用 AS.
   以求讓企業主 可以快速的看到 原型!

然後就果斷放棄 使用 AS 將東西做出來~時間 大概是兩小時 不到 !

這算是我第一個 正式的有真正 從取的需求 到出圖 規畫底層類別

到去實作 從第一步到最後一步的 SA案子 XD

雖然很糟糕! 但是總算是邁下一步了 !