响应式网页设计

响应式网页设计(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的架构模式我们基本上可以做成任何东西。但是它却存在一个致命的问题。这个缺点就是项目越大,逻辑关系越来越复杂。混乱的数据流动方式。
1555676091242-320f3c65-2efc-45a3-989e-0640f287d14d.jpg

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。

1555676418341-75c85a6a-16ad-43c6-a653-e8d6c9f489d8.png

Last modification:October 19th, 2019 at 04:39 pm
如果觉得我的文章对你有用,请随意赞赏