说实话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. mvc action controller area

    获取控制器名称: ViewContext.RouteData.Values["controller"].ToString(); 获取Action名称: ViewContext.Ro ...

  2. Google Authenticator

    Google Authenticator 现在越来越多的网站采用两步验证,实现方式可能有所区别,一般来说是 1+? (1 即 普通的用户名和密码, ?可能是实物如U盾.手机短信验证码或其他).?的重点 ...

  3. 十五、polygon API

    How polygons are handled internally The five basic polygonal API classes Construction History and Tw ...

  4. WIN7无法记住远程登录密码

    1.单点win7系统开始菜单——“运行”,然后输入“gpedit.msc”确定: 2.打开本地组策略后,依次展开:计算机配置 > 管理模板 > 系统 > 凭据分配: 3.双击右侧列表 ...

  5. jQuery检测滚动条(scroll)是否到达底部

    一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height()    获取整个页面的高度 $(window).height()   ...

  6. form中的GET与POST

     form标签是强大的:如果没有form标签,Internet将变成一个枯燥文档的只读存储库.Web Forms没有完全利用form标签的强大功能(也可以说是Web Forms为实现自己的目标才管理和 ...

  7. CACTI表结构和数据被动获取

    cacti我们也用了很久了,但是它的表结构一直都没有去关心过,得空抽了半个晚上的时间,把它的库表结构大概看了下,某些字段的含义跟大家分享下:cacti的数据都是存放在rrdtool中的,数据库存放的其 ...

  8. js监听浏览器,关闭,刷新

    //浏览器关闭或刷新事件 function bindCloseBrowser() { var a = "注意!!\n您即将离开页面!离开后可能会导致数据丢失\n\n您确定要离开吗?" ...

  9. 如何将ASP.NET MVC所有参数均自动设置为默认

    今天看到CSDN上有个问题觉得有点意思:"可不可以ASP.NET MVC所有参数均自动设置为默认" public class HomeController : Controller ...

  10. for..in遍历,枚举器

    #pragma mark ------------for循环遍历集合中的元素------ //创建一个数组,包含5个字符串对象,倒序取出数组中的所有元素,并存储到另一可变数组中 NSArray *ar ...