Home  >  Q&A  >  body text

html css js是遵循的mvc思想吗

html比作model层,js比作control层,css看做view层合理么?

高洛峰高洛峰2913 days ago1009

reply all(3)I'll reply

  • PHP中文网

    PHP中文网2016-12-17 14:17:14

    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步的点击事件从存放数据的模型中把数据放到文本框中,形成一种数据由不可编辑到可编辑的一种效果

    举个例子:

    <select id="drinkSelect">
       <option value="coffee">coffee</option>
       <option value="milk">milk</option>
       <option value="juice">juice</option></select><p id="theColorOfDrink"></p><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,就是这个样子:

    <select id="drinkSelect">
       <option value="coffee">coffee</option>
       <option value="milk">milk</option>
       <option value="juice">juice</option></select><p id="theColorOfDrink"></p><script type="text/javascript">//showDrinkColor is Controllervar showDrinkColor = {
       start:function(){        this.view.start();
       },
       set:function(drinkName){        this.model.setDrink(drinkName);
       }
    };//ModelshowDrinkColor.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";
       }
    };//ViewshowDrinkColor.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,但是,代码变复杂了。的确,层次越多,需要做的工作也越多,这里需要处理各层的通信。所以,具体怎么设计,还是要分析场景,因地制宜。


    reply
    1
  • 欧阳克

    欧阳克2016-11-12 10:45:19

    初一看好像有点道理,但是细致想想还是有很多问题的,比如mvc中的modal,我们通常是指代数据模型,那么真的是这里的html吗?html不是表现视图层面的吗?css最多可以认为是渲染视图。

    reply
    0
  • 三叔

    三叔2016-11-12 10:45:00

    硬要说的话可以扯上一些关系,但实际还是有区别的:

    Model 就是一堆纯粹的数据,可以根据需要来被 Controller 调用。

    HTMl 表示文档的结构,我们常说要做到样式与结构的分离,但很多时候我们依然不得不修改 HTML 结构来达到一些样式效果;并且 HTML 的内容会直接被浏览器显示出来,而不是被调用才显示。

    View 表示视图,可以把 Model 的数据转换成各种结构和样式来输出

    CSS 更多是样式的调整,对 HTML 结构的调整,变换几乎无能为力

    Controller 控制根据参数从 Model 提取数据返回特定的 View,处理业务逻辑

    js 处理交互效果和业务逻辑,不是从 HTML 提取数据来更改 CSS,而是与后台接口交互来获得数据来更改 HTML


    reply
    0
  • Cancelreply