响应式网页设计
响应式网页设计(RWD)是2011年提出的。它已成为主流,可以是网站在多种浏览设备上获得体验类似的阅读与导航功能。这就要求网站需要设计成为SPA(单页面应用)。
响应式网页设计核心理念是从交互以及样式体现的,但对于整个跨平台的兼容性,拥有良好的分层解耦以及响应速度成为了关键。
MVC
MVC是一种架构模式,它通过数据界面分离,来改进应用程序结构。该模式是上个世纪八十年代被研究设计出来的。
MVC强制将业务数据(model)与用户界面(view)隔离,用控制器(control)管理和用户输入。
- model
model负责保存应用数据,和后端进行交互与同步应用数据。 - view
view是model的可视化表示,表示当前状态的视图。view负责构建和维护DOM元素。用户通过与view交互,在model中获取或设置属性值。负责展现model中的内容。通常一个model对应一个view。 - control
负责连接view和model,model的任何改变都会通过control应用到view中,同时view的操作会通过control应用到model中。
总的来说,contrul管理了应用程序中的model和view之间的逻辑和协调。
mvc的问题:我们总觉得应用mvc的架构模式我们基本上可以做成任何东西。但是它却存在一个致命的问题。这个缺点就是项目越大,逻辑关系越来越复杂。混乱的数据流动方式。
MVVM
MVVM出现在2005年。最大的变化是VM(viewModel)代替了C(control)。MVVM 的全称是 Model-View-ViewModel,它是一种架构模式,最初是由微软定义,用于 WPF(微软的图形系统)和 Silverlight(WPF 的互联网应用派生品),它们的架构设计师之一 John Grossman 于 2005 年在他的一篇博客上发表了 MVVM。
特点
Model 层是数据层,它只关心数据本身,不关心数据如何操作和展示;View 是视图层,负责将数据模型转化为 UI 展现给用户;ViewModel 为视图提供引擎,用来处理业务逻辑。
在 MVVM 模式中,View 层和 Model 层没有直接关联,ViewModel 层通过双向数据绑定将 View 层和 Model 层连接了起来。在 View 层中触发绑定事件后,ViewModel 会处理事件,改变 Model 层;Model 层和 ViewModel 之间的交互是双向的,Model 层的改变也会反应到 ViewModel 层,ViewModel 会通知 View 层更新视图。
可用性
MVVM 完全将View 层解耦,对于 ViewModel 分离了许多逻辑,使得 Web 前端的单元测试用例编写变得更加容易。正因为 ViewModel 主要承担业务逻辑层,所以添加测试更加方便。
MVVM 模型也便于代码移植,比如 iOS 里面有 iPhone 版本和 iPad 版本,除了交互展示不一样外,业务逻辑的Model 是一致的,这样我们就可以以很小的代价去开发另一个 App。