说实话MV*架构中,Model与View分离已经听人谈了好久,但是以前始终没太弄懂什么意思,最近终于稍微懂了一些,虽然不一定很对,暂且先记录下来。

  谈Model与View分离,首先要弄懂页面在前端渲染还是在后端渲染这两个概念。

  前端渲染指的是从后端拿到Model(比如一段json数据),在前端中用javascript生成View(dom)插入数据并最终生成在页面中。而后端渲染指的是在后端生成一片包含数据的代码段(其实就是html字符串)然后发回给前端,最终生成在页面中。

  通过理解这两种方式可以很容易的弄懂为什么前端渲染相比后端渲染是Model与View分离的,因为他的Model与View是解耦的。

  现在大行其道的MV*框架比如react与vue都是组价化的方式用js在前端生成dom,从后端拿到json然后插入到js生成的dom中最后把dom渲染在页面上。

  其实理解了概念才发现自己做的很多情况下也是这种思想,比如用模板在脚本中写好一个一个类似组件的代码段,然后把从后端的数据灌入到模板中,这依然属于View与Model分离,这样内容采编只需要关注内容数据,而我只需要专注于视图层。

理解View与Model分离的更多相关文章

  1. 【web前端面试题整理07】我不理解表现与数据分离。。。

    拜师传说 今天老夫拜师了,老夫有幸认识一个JS高手,在此推荐其博客,悄悄告诉你,我拜他为师了,他承诺我只收我一个男弟子..... 师尊刚注册的账号,现在博客数量还不多,但是后面点会有干货哦,值得期待. ...

  2. ym——Android开发MVP模式(攻克了View和Model的耦合)

    转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持! 什么是MVP呢?它又和我们经常听到的MVC有什么关系了以及差别呢? MVP 是从经典的 ...

  3. 使用AxisHelper帮助理解View and Data API中的坐标系统

    大家使用View and Data API做三维模型开发,必然首先要理解View and Data API的坐标系统,即XYZ三个轴向分别是怎么定义的.Three.js里面提供了一个AxisHelpe ...

  4. js 实现angylar.js view层和model层双绑定(改变view刷新 model,改变model自动刷新view)

    近段时间研究了下angular.js 觉得它内部实现的view和model层之间存在很微妙的关系,如下图 如上图说的,view的改变会update 数据层model, 数据层会update视图层vie ...

  5. MVVM模式下,ViewModel和View,Model有什么区别

    摘自正美的5群 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model. View:也很简单,就是展现出来的用户界面. 基本上,绝大多数软件所做的工 ...

  6. 【单页应用】view与model相关梳理(转载)

    [单页应用]view与model相关梳理 前情回顾 根据之前的学习,我们形成了一个view与一个messageCenterview这块来说又内建了一套mvc的东西,我们这里来理一下首先View一层由三 ...

  7. 理解Spring MVC Model Attribute和Session Attribute

    作为一名 Java Web 应用开发者,你已经快速学习了 request(HttpServletRequest)和 session(HttpSession)作用域.在设计和构建 Java Web 应用 ...

  8. C# MVC分页,razor,view传送model

    IMVCPages interface IMVCPages { int GetItemsCount(); int GetPageSize(); int GetPagesCount(); /// < ...

  9. js架构设计模式——MVVM模式下,ViewModel和View,Model有什么区别

    MVVM模式下,ViewModel和View,Model有什么区别 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model. View:也很简单,就 ...

随机推荐

  1. problem during schema create,statement create sequence act_evt_log_seq

    今天在调试程序的时候出现"problem during schema create,statement create sequence act_evt_log_seq"这个错误,跟 ...

  2. 【HOW】用PowerShell脚本修改用户配置文件属性显示次序

    首先将如下脚本保存为PowerShell文件,如:ReorderUserProfileProperty.ps1. 在执行此脚本时,如果不输入任何参数,将列出所有用户配置文件属性的名称和显示次序:如果只 ...

  3. ubuntu 14.04 compiz的ALT + TAB切换程序

    安装完ubuntu,发现不能使用ALT + TAB切换应用程序,翻遍所有百度结果,没有可行,都是拷这个拷那个...真实无语...FQgoogle,看的第一个就完美解决.记录下来,方便国人少走弯路. 首 ...

  4. IE10中session失效取不到值的问题

    在eworkflow工作流,ebiao报表,eform自定义表单产品升级到IE10的时候,系统登录后,总是会取不到session中的值. for j2ee版本和for dotnet版本都一样取不到值. ...

  5. 【转】Python资源 转自 dylanninin.com

    http://dylanninin.com/blog/2013/11/23/python_resource.html Python是在工作期间零零碎碎学习起来的.当时正值部门申购图书,鉴于Python ...

  6. 好用的一个从SharePoint导出小工具

      1. 输入 Site Url(Site Collection), 然后点"load"按钮 2.选择Web后,点选需导出的文档库,然后点"Next"按钮   ...

  7. 2.3 ARM寄存器详解

    一共有37个寄存器 1. 31个通用寄存器 2. 6个状态寄存器 R13作为堆栈指针 R14链接寄存器 1.保存函数返回地址 2. 异常返回地址 R15程序计数器(PC指针) 程序状态寄存器 只有在异 ...

  8. clientWidth、offsetWidth和scrollWidth的区分

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  9. JS不支持正则中的负向零宽断言

    今天在项目中用到了正则表达式,并且需要用负向零宽断言 (?<=exp) 进行筛选,结果运行时报 Invalid group 错,一开始以为是自己很久没用表达式写错了,查阅了一下正则语法后发现并没 ...

  10. 解决NetBeans编辑器中文乱码问题

    在JDK→JRE→lib目录下找到fontconfig.properties.src文件,打开,找到# Component Font Mappings,表示字体映射,可以看到下面列出了几种字体映射集合 ...