说实话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. APP UI设计及切图规范

    APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 ...

  2. 【解决】putty使用从AWS下载的private key登录失败

    在AWS启动一个实例时如果创建并下载了一个KeyPair的私钥(*.pem),则可以此私钥作为Credentials通过putty远程登录到这个实例系统.但在实际操作中,用putty登录时会提示如下错 ...

  3. 用c++写一个简单的计算器程序

    // 050305.cpp : 定义控制台应用程序的入口点.// // 050304.cpp : 定义控制台应用程序的入口点.////四则运算#include "stdafx.h" ...

  4. MySQL 基础语句

    MySQL 基础语句 多个知识点 ----------------------------------------------------------------------------------- ...

  5. leetcode-【hard】4. Median of Two Sorted Arrays

    题目 There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...

  6. Openstack Basic

    html,body { } .CodeMirror { height: auto } .CodeMirror-scroll { } .CodeMirror-lines { padding: 4px 0 ...

  7. NHibernate系列文章二十八:NHibernate Mapping之Auto Mapping(附程序下载)

    摘要 上一篇文章介绍了Fluent NHibernate基础知识.但是,Fluent NHibernate提供了一种更方便的Mapping方法称为Auto Mapping.只需在代码中定义一些Conv ...

  8. Mysql存储过程调用

    mysql存储过程实例教程 发布时间:2014-04-09编辑:JB01 这篇文章主要介绍了mysql存储过程的使用方法,mysql存储过程实例教程,有需要的朋友参考下.   1.1create  p ...

  9. C语言运算符优先级和口诀(转)

    一共有十五个优先级: 1   ()  []  .  -> 2   !  ~   -(负号) ++  --   &(取变量地址)*   (type)(强制类型)    sizeof 3   ...

  10. JVM配置

    1.堆设置 JVM中最大堆大小有三方面限制:操作系统位数(32-bt还是64-bit)限制:可用虚拟内存限制:系统的可用物理内存限制. java -Xmx3550m -Xms3550m -Xmn2g  ...