使用过 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. WPF特效-实现弧形旋转轮播图

    原文:WPF特效-实现弧形旋转轮播图 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/77004 ...

  2. 嵌入式OS入门注意事项-同RTX案件:九.关于优先-翻转,继承和天花板

    嵌入式OS入门注意事项-同RTX案件:九.关于优先-翻转,继承和天花板 涉及当调度优先级,会有很多问题,本文中,优先调度和一些战略的主要问题,以应付. 有几个概念如下:(priority invers ...

  3. explanatory variable(independent vs dependent)、design matrix

    design matrix(设计矩阵) 是统计学上的概念,一般标记为 X,是由一组对象的解释变量(explanatory variables)构成的矩阵. 1. explanatory variabl ...

  4. HDU - 4734 F(x) (2013成都网络游戏,数字DP)

    意甲冠军:求0-B见面<=F[A]所有可能的 思维:数字DP,内存搜索 #include <iostream> #include <cstring> #include & ...

  5. React学习(2)——action,reducer

    action creator 是一个函数,格式如下: var actionCreator = function() { // 构建一个 action 并返回它 return { type: 'AN_A ...

  6. crawler_正则表达式零宽断言

    在使用正则表达式时,有时我们需要捕获的内容前后必须是特定内容,但又不捕获这些特定内容的时候,零宽断言就起到作用了. (?=exp):零宽度正预测先行断言,它断言自身出现的位置的后面能匹配表达式exp. ...

  7. WPF 过滤集合

    <Window x:Class="ViewExam.MainWindow"        xmlns="http://schemas.microsoft.com/w ...

  8. C#并口热敏小票打印机打印位图

    原文:C#并口热敏小票打印机打印位图 最近一直在研究并口小票打印机打印图片问题,这也是第一次和硬件打交道,不过还好,最终成功了.   这是DEMO的窗体:   下面是打印所需要调用的代码: class ...

  9. Win8Metro(C#)数字图像处理--2.17图像木刻效果

    原文:Win8Metro(C#)数字图像处理--2.17图像木刻效果  [函数名称] 图像木刻效果函数WoodCutProcess(WriteableBitmap src) [函数代码] ///& ...

  10. 零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下)

    原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字 ...