说实话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. 基于Grunt&Mocha 搭建Nodejs自动化单元测试框架(含代码覆盖率统计)

    Introduction Grunt 是一个基于任务的JavaScript 世界的构建工具 Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异 ...

  2. day9-协程

    生产者和消费者模型: #!/usr/bin/env python #coding:utf8 import threading,Queue import time import random def p ...

  3. Solr导入MySql中的数据

    1.参照 http://www.cnblogs.com/luxh/p/5016894.html 部署好solr的环境 2.在solr_home下建立一个core_item目录 [root@iZ23ex ...

  4. Android Studio in OSX 提高工作效率的快捷键

    前言 本篇文章参考了<倍数提高工作效率的Android Studio>一文,快捷键基于OS X系统. OS X Yosemite 10.10.5 Android Studio 1.3.1 ...

  5. 解决window2012 IIS8 配置的网站无法下载exe文件的问题

    window2012 IIS8 配置网站下载exe文件.解决window2012 IIS8 配置的网站无法下载exe文件的问题 配置好网站后,无法下载网站上的exe文件,zip文件确可以下载的.右键点 ...

  6. C#泛型代理、泛型接口、泛型类型、泛型方法

    //http://www.cnblogs.com/JeffreySun/archive/2012/11/14/2770211.html //http://www.baqima.com/a/2628.h ...

  7. qt 环境下mapx组件的鼠标跟踪

    经过两天的研究mapx组件人坐标转换还是没有转换成功,因为不管怎么变,定点转换的经纬度坐标始终与期望的值有较大的偏差.最后还是想老大请教了一下,划了半天功夫就研究出来了(不愧是老大,仰慕之情犹如滔滔江 ...

  8. java.lang.OutOfMemoryError: Java heap space

    java.lang.OutOfMemoryError: Java heap space 原因:内存溢出,内存一直申请一直占用,无法回收 解决方法:定时重启下服务,

  9. HsqlDB Demo

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  10. oracle重装系统后恢复

    前提:各种文件都存在 1.将原oracle文件夹app更名为app_old 2.重新安装oracle(路径,实例等最好都一样),配置监听,服务能正常启动,连接进入数据库 3.关掉oracle服务,将新 ...