数据绑定迷思,暨 MVC 与 MVVM 傻傻分不清

简介: 之前的制作方式,我在《JavaScript 爱好者开发 Java Web 开发的“心路历程” 》文中有所整理。现在完成项目后,想想有这么几种数据绑定方式:一、服务器端 JSP 生成。读取接口 JSON 数据然后拼凑 HTML,这是方式安利应该是最快的,因为 JSP 和 数据库都在服务器本地。

之前的制作方式,我在《JavaScript 爱好者开发 Java Web 开发的“心路历程” 》文中有所整理。现在完成项目后,想想有这么几种数据绑定方式:一、服务器端 JSP 生成。读取接口 JSON 数据然后拼凑 HTML,这是方式安利应该是最快的,因为 JSP 和 数据库都在服务器本地。但因为 HTML 和数据的同时生成,用户体验反而较逊于“AJAX”的异步加载。而且需要在远端呈现一个 url。二、JSONP 异步调用。接口也是输出 JSON,所以只使用浏览器 JavaScript 脚本即可以调用数据,无须经过服务端或 JSP 渲染。优点是这样一种异步加载,可快速显示页面,然而通过 JSONP 异步调用数据。这样不仅显示速度较快,而且用户体验较好(先快速显示界面)。页面可不需要服务器支持,仅作为静态文件内嵌在客户端中,有接口便可,但不足就是修过静态页面必须经过客户端升级。于是可以将页面寄存在服务端中。我们的专题就是利用这个模式制作的。

以上两种的基本的数据绑定方式。由此封装的方案有 JSP Tags Files、自定义标签两种,分别是服务端和客户端(广义的客户端)生成的,有可以最终实现比较方便的调用数据。我想到的方式大概有这几种——至于哪一种最好应该没有一概而论。

……

以前总以为 MVVM 是 MVC 的派生,现在读了对岸的博文之后,才知道它们是两回事(对岸的中文解释总是更符合我胃口多些,一说就明白……目下所及,大陆人写的文章,往往不知所云呐……)

首先得強調一點,Knockout根本不是Angular的對手!! 倒不是因為Angular太強大,KO還沒上擂台就被叫去領便當;而是二者定位不同,KO只專注於MVVM,而Angular包含整套MVC。MVVM所聚焦的Data Binding只是MVC中實做View的一環,故二者不該直接相比,就像沒人會拿Office跟iPhone相比一樣道理,要比也是Windows Phone對上iPhone,定位才相近。Angular是完整的MVC架構,真要比較,對手應該是Durandal、Ember或Backbone,而Knockout隸屬Durandal陣營,所以應是Durandal vs Angular,哦哦...

http://blog.darkthread.net/post-2014-06-07-go-to-angularjs.aspx

更进一步说,就是:

兩年前初見Knockout.js後便一腳踏入MVVM世界無法回頭。學習簡單很快上手,用Knockout做出錯誤少又容易擴充維護的AJAX網頁。在此之前,為了讓欄位連動,總要寫一堆<input />、<select> onchage、onclick事件,事後常需要在一堆事件程式碼裡追查更動來源,更糟的是稍一調整就常因觸發順序改變導致錯誤,修改維護是件苦差事;改用KO後,專心把ViewModel邏輯寫好,餘下的欄位連動便能一次到位,加上邏輯都集中寫在ViewModel內,維護起來輕鬆許多。

不過,最近參與SPA專案(Single Page Application,指從頭到尾沒有任何PostBack,停在同一網頁裡完成全部工作的網頁,最經典的例子是Gmail),逐漸感受單靠Knockout(或者該說MVVM)的不足。SPA需在同一網頁切換不同操作介面,當介面複雜度提高,網頁HTML、JavaScript開始龐大交錯,管理及維護難度急速上升。面對這類情境,引用JavaScript端MVC設計模式讓架構分明,簡化維護難度,是較好的選擇,而Knockout只專注於MVVM,仍需要其他MVC架構輔助才容易建構成SPA。

博主似乎更倾向于 NG 多些。不过我受过 ExtJS 的虐之后,对大型的库只敢远观~~

目录
相关文章
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
635 12
|
设计模式 前端开发 JavaScript
浅谈MVC、MVP、MVVM框架模式
浅谈MVC、MVP、MVVM框架模式
119 0
|
前端开发
MVVM和MVC的原理以及它们的区别
MVVM和MVC的原理以及它们的区别
|
前端开发 数据安全/隐私保护
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
318 0
|
11月前
|
前端开发
MVVM是什么?和MVC有何区别呢?
【10月更文挑战第11天】MVVM 和 MVC 都是为了更好地组织和管理软件架构,提高开发效率和代码质量。理解它们的特点和区别,有助于我们在实际开发中做出更合适的选择,并构建出更加优秀的应用程序。
|
11月前
|
存储 前端开发 测试技术
MVC、MVP、MVVM 模式
MVC、MVP 和 MVVM 是三种常见的软件架构模式,用于分离用户界面和业务逻辑。MVC(Model-View-Controller)通过模型、视图和控制器分离数据、界面和控制逻辑;MVP(Model-View-Presenter)将控制逻辑移到 Presenter 中,减少视图的负担;MVVM(Model-View-ViewModel)通过数据绑定机制进一步解耦视图和模型,提高代码的可维护性和测试性。
|
前端开发 测试技术 API
探索安卓应用的架构演进:从MVC到MVVM
本篇文章将深入探讨安卓应用开发中的架构演进,特别关注从传统的MVC(Model-View-Controller)到现代流行的MVVM(Model-View-ViewModel)架构的转变。通过对比两种架构的设计理念、实现方式和实际应用案例,解析MVVM在提高代码可维护性和可测试性方面的优势。
210 26
|
前端开发 JavaScript 开发者
深入理解MVC和MVVM:构建现代Web应用的利器
深入理解MVC和MVVM:构建现代Web应用的利器
|
XML 前端开发 测试技术
安卓架构模式:MVC、MVP、MVVM及更多
【4月更文挑战第13天】本文探讨了安卓应用开发中的常见架构模式,包括MVC、MVP和MVVM,以及VIPER和Clean Architecture。MVC分离关注点,易于理解,但安卓不直接支持。MVP通过呈现器实现更清晰的分层和便于单元测试。MVVM利用数据绑定简化UI逻辑,适合声明式编程。开发者应根据项目需求、团队技能和维护周期选择合适架构,随着工具和框架的进步,未来将提供更多模块化、可测试性和敏捷性的解决方案。
523 7
|
设计模式 存储 前端开发
【设计模式】MVC与MVVM详尽解读与实战指南
【设计模式】MVC与MVVM详尽解读与实战指南
1961 0