使用过 JavaScript框架(如 AngularJS, Backbone)的人都很熟悉在UI(用户界面,前端)中mvc的工作机理。这些框架实现了MVC,使得在一个单页面中实现根据需要变化视图时更加轻松,而数据-视图-控制器(mvc)的核心概念就是:处理传入请求的控制器、显示信息的视图、表示业务规则和数据访问的模型。

因此,当需要创建这样一个需要在单个页面中实现切换出不同内容的应用时,我们通常选择使用上述框架之一。但是,如果我们仅仅需要一个在一个url中实现视图切换的框架,而不需要额外捆绑的功能的话,就不必使用象Angular和backbone等复杂的框架。本文就是尝试使用简单、有效方法来解决同样的问题。

这种mvc的开发模式对于数据和表现分离来说,显得更加稳定和可靠。

传统的代码

但是通过这种mvc的框架我们可以修改为

大家可以发现传统的书写方式,我们是没法去动态修改div中的内容,这里我估计认为它是混入式写法,

但是mvc的写法,我们如果需要去修改{{hello}}这个数据,把它改成“你们真的好帅”,是不是只许要在js中将hello的属性值改掉就ok了。

那么这种分离式开发,我们暂时叫表现和数据分离。

mvc中的表现和数据分离怎么理解?的更多相关文章

  1. 表现与数据分离;前台MVC

    无意间看到一个web前端招聘要求:表现与数据分离 这名词对我非常陌生,我就去百度了下 由于有各种莫名其妙的需求,所以才会出现我们前端MVC这样的莫名其妙的东西... 我们的html就是model,我们 ...

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

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

  3. mvc中的几个数据传递

    1.ViewData对象 ViewBagData是一种字典集合数据同时属于视图基类和控制器基类的属性. 实例: //控制器 public class HomeController:Controller ...

  4. Spring MVC中Controller如何将数据返回给页面

    要实现Controller返回数据给页面,Spring MVC 提供了以下几种途径: ModelAndView:将视图和数据封装成ModelAndView对象,作为方法的返回值,数据最终会存到Http ...

  5. ASP.NET MVC 中实现View与Controller分离

    一.开篇题外话 我经常会在博客园逛来逛去,看过很多大牛们的Blog,我很少在这块技术天地活动,之前有发表过几篇日志,好像大部分是和电商有关,作为一个多年的开发人员,很少在这里分享,之前一直在CSDN上 ...

  6. 在MVC中动态读取JSON数据创建表格

    //使用getJSON // ("@Url.Action("GetAllUsers","User")" ,json文件的路径.也可以是 /M ...

  7. .NET Core2.0 MVC中使用EF访问数据

    使用环境:Win7+VS2017 一.新建一个.NET Core2.0的MVC项目 二.使用Nuget添加EF的依赖 输入命令:Install-Package Microsoft.EntityFram ...

  8. MVC中使用Ajax提交数据 Jquery Ajax方法传值到action

    Jquery Ajax方法传值到action <script type="text/javascript"> $(document).ready(function(){ ...

  9. 使用JavaScript实现表现和数据分离

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Viewport3D中的摄像机(二、摄像机动作)

    原文:Viewport3D中的摄像机(二.摄像机动作) 前文介绍了Viewport3D中的两种摄像机:OrthographicCamera和PerspectiveCamera.在3D场景里漫游,最主要 ...

  2. uwp - 解决“Microsoft.EntityFrameworkCore.Tools –Pre因为在此系统上禁止运行脚本”

    在uwp使用ef时,需要安装“Microsoft.EntityFrameworkCore.Tools –Pre” ,如果安装失败提示:“无法加载文件 \.nuget\packages\Microsof ...

  3. ubuntu12.04单卡server(mentohust认证)再加上交换机做路由软件共享上网

    最近成立了实验室的网络环境中,通过交换机连接的所有主机实验室.想要一个通过该server(单卡)做网关,使用mentohust认证外网,然后内网中的其它主机通过此网关来连接外网. 1.首先在serve ...

  4. 基于Android开发的天气预报app(源码下载)

    原文:基于Android开发的天气预报app(源码下载) 基于AndroidStudio环境开发的天气app -系统总体介绍:本天气app使用AndroidStudio这个IDE工具在Windows1 ...

  5. NSURLSession 网络库 - 原生系统送给我们的礼物

    大家在进行iOS开发的时候一定会用到网络操作.但由于早期原生的 NSURLConnection 操作起来有很多不便,使得大家更愿意使用第三方库的解决方案,比如鼎鼎大名的 AFNetworking.正是 ...

  6. abp框架(aspnetboilerplate)扩展系统表

    以OrganizationUnit为例,进行扩展,加入IsUse属性 1.创建一个新类,比如ExtendedOrganizationUnit,继承OrganizationUnit public cla ...

  7. 微信小程序把玩(二十六)navigator组件

    原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指定. 主要属性: wxml <naviga ...

  8. NAudio的使用说明

    官方网站:http://naudio.codeplex.com/ 源码:https://github.com/naudio/NAudio NuGet安装: Install-Package NAudio ...

  9. MongoDB.Driver 管道 Aggregate

    目前mongodb for C#这个驱动,在进行Aggregate时,只支持BsonDocument类型,也就是说,你的集合collection也必须返回的是BsonDocument,而实体类型是不可 ...

  10. jquery模拟按下回车实现代码

    简单地记下jquery实现回车事件,代码如下: 全局: 代码如下: $(function(){ document.onkeydown = function(e){ var ev = document. ...