文档章节

前端中的MVC

西米粟
 西米粟
发布于 2017/08/13 11:23
字数 1045
阅读 4
收藏 0

MVC是一种设计模式,它将应用划分为3个部分:数据(模型)、展现层(视图)和用户交互(控制器)。其中:

  • M - MODEL(模型)

  • V - VIEW(视图)

  • C - CONTROLLER(控制器)

一个事件的发生是这样的过程:

  1. 用户和应用产生交互。
  2. 控制器的事件处理器被触发。
  3. 控制器从模型中请求数据,并将其交给视图。
  4. 视图将数据呈现给用户。

不用类库或框架就可以实现这种MVC架构模式。关键是要将MVC的每部分按照职责进行划分,将代码清晰地分割为若干部分,并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。

M-模型

模型用来存放应用的所有数据对象。比如,可能有一个User模型,用以存放用户列表、他们的属性及所有与模型有关的逻辑。模型不必知道视图和控制器的逻辑。任何事件处理代码、视图模板,以及那些和模型无关的逻辑都应当隔离在模型之外。将模型的代码和视图的代码混在一起,是违反MVC架构原则的。模型是最应该从应用中解耦出来的部分。 当控制器从服务器抓取数据或创建新的记录时,它就将数据包装成模型实例。也就是说,我们的数据是面向对象的,任何定义在这个数据模型上的函数或逻辑都可以直接被调用。

V-视图

视图层是呈现给用户的,用户与之产生交互。在JavaScript应用中,视图大都是由HTML、CSS、JavaScript模板组成的。除了模板中简单的条件语句之外,视图不应当包含任何其他逻辑。将逻辑混入视图之中是编程的大忌,这并不是说MVC不允许包含视觉呈现相关的逻辑,只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“视图助手”(helper):和视图相关的独立的小工具函数。

C-控制器

控制器是模型和视图之间的纽带。控制器从视图获取事件和输入,对它们(很可能包含模型)进行处理,并相应地更新视图。当页面加载时,控制器会给视图添加事件监听,比如监听表单提交或按钮点击。然后,当用户和你的应用产生交互时,控制器中的事件触发器就开始工作了。

在网页交互中,可以这样理解:

  1. 用户点击了表格中的数据
  2. 触发了点击事件,数据变成可编辑的状态(这个时候会出现一个文本框,但是里面还没有数据)
  3. 第2步的点击事件从存放数据的模型中把数据放到文本框中,形成一种数据由不可编辑到可编辑的一种效果

举个例子: html部分

<select id="drinkSelect">

    <option value="coffee">coffee</option>

    <option value="milk">milk</option>

    <option value="juice">juice</option>

</select>

<p id="theColorOfDrink"></p>

js部分

script type="text/javascript">
    document.getElementById("drinkSelect").onchange = function () {
        var color;
        var colorOfDrink = {
            "coffee": "brown",
            "milk": "white",
            "juice": "orange"
        };
        color = colorOfDrink[this.value];
        document.getElementById("theColorOfDrink").innerHTML = color;
    }
</script>

上面程序会把选中的饮料的颜色显示出来,如果用MVC,就是这个样子:

script type="text/javascript">
//showDrinkColor is Controller
var showDrinkColor = {
    start:function(){
        this.view.start();
    },
    set:function(drinkName){
        this.model.setDrink(drinkName);
    }
};
//Model
showDrinkColor.model = {
    colorOfDrink:{
        "coffee":"brown",
        "milk":"white",
        "juice":"orange"
    },
    selectedDrink:null,
    setDrink:function(drinkName){
        this.selectedDrink = this.colorOfDrink[this.selectedDrink]?drinkName:null;
        this.onchange();
    },
    onchange:function(){
        showDrinkColor.view.update();
    },
    getDrinkColor:function(){
        return this.selectedDrink?this.colorOfDrink[this.selectedDrink]:"white";
    }
};
//View
showDrinkColor.view = {
    start:function(){
        document.getElementById("drinkSelect").onchange = this.onchange;
    },
    onchange:function(){
        showDrinkColor.set(document.getElementById("drinkSelect").value);
    },
    update:function(){
        document.getElementById("theColorOfDrink").innerHTML = showDrinkColor.model.getDrinkColor();
    }
};
showDrinkColor.start();
</script>

进行分层之后,各个层次的功能清晰:V层控制界面显示,将界面与数据连接;M层存放数据,处理逻辑,C层用于连接M和V,但是,代码变复杂了。的确,层次越多,需要做的工作也越多,这里需要处理各层的通信。所以,具体怎么设计,还是要分析场景,因地制宜。

本文转载自:

西米粟
粉丝 1
博文 34
码字总数 10760
作品 0
南京
程序员
私信 提问
前端框架模式的变迁

前言 前端框架的变迁,体系架构的完善,使得我们只知道框架,却不明白它背后的道理。我们应该抱着一颗好奇心,在探索框架模式的变迁过程中,体会前人的一些理解和思考 本篇将讲述的是前端框架...

zimo
2017/09/19
0
0
Spring MVC温故而知新 – 从零开始

Spring MVC简介 Spring MVC是一款基于MVC架构模式的轻量级Web框架,目的是将Web开发模块化,对整体架构进行解耦。 Spring MVC有一下优点: 作为Spring框架的一部分,拥有Spring的优点(IOC,A...

Java工程师-Distance
2018/05/18
0
0
深入理解 MVC 在实际开发中和thinkPhp、angular、vue框架关系,理解什么是 MVP MVVM

MVC 简介 MVC(Model View Controller),是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一...

执杖天涯
02/27
0
0
MVC架构探究及其源码实现(1)-理论基础

MVC本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器。使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。比如一批统计数据你可以分别...

justjavac
2013/07/18
513
1
Spring MVC介绍

我们知道MVC是一种经典的模式,把视图、控制器以及数据分开,解耦了各模块之间的关系。Spring Web MVC是基于Java实现的Web MVC设计模式,是一个请求驱动类型的轻量级Web框架,也就是借助MVC...

博为峰教研组
2016/11/23
18
0

没有更多内容

加载失败,请刷新页面

加载更多

0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0
mysql PL(procedure language)流程控制语句

在MySQL中,常见的过程式SQL语句可以用在存储体中。其中包括IF语句、CASE语句、LOOP语句、WHILE语句、ITERATE语句和LEAVE语句,它们可以进行流程控制。 IF语句相当于Java中的if()...else if(...

edison_kwok
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部