前端web开发的MVC模式

最新推荐文章于 2022-07-11 21:30:47 发布

HiTheWorld

最新推荐文章于 2022-07-11 21:30:47 发布

阅读量1.4k

点赞数 1

分类专栏： AngularJS 前端开发文章标签： web开发前端MVC模式 web设计 mvc 前端开发

前端开发同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

AngularJS

3 篇文章 0 订阅

订阅专栏

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架：model模型是理解成服务器端的模块程序；view为发送给客服端的内容；Controller为servlet程序控制跳转和工作流。

随着前端Ajax兴起、前端开发工作进一步划分：js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看，MVC的应用也越来越必要，特别是对大的项目。

例如需要给一个页面上的button注册一个onclick事件。

     1、我们可以有如下最简洁的写法：（view和model control完全混合）

<HTML>
    <HEAD>
    <TITLE> example </TITLE>
    </HEAD>
    <BODY>
        <input type="button" value="baidu" onclick="alert(this.value);"/>
    </BODY>
</HTML>

     说明：如上写法的好处：简单、直接；严重的弊端：如果都是这样写法，页面代码很大的时候，修改js代码还需要查找整个页面，导致整个页面非常混乱。

批注：类似与 jsp中直接嵌入java片段语句。

     2、将html和js代码进行适当分离：（view和model control在同一页面适当分离）

     修改以上的写法：

<HTML>
    <HEAD>
    <TITLE> example </TITLE>
    </HEAD>
    <BODY>
        <input type="button" value="baidu" onclick="tipInfo(this);"/>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        function tipInfo(o){
               alert(o.value);
        }
    //-->
    </SCRIPT>
    </BODY>
</HTML>

     这是将页面上所有的js代码操作放到<script></script>标签中进行。使得js逻辑代码相对集中，易于后期修改。

     但是我们还是需要在html标签中写tipInfo(this)的js调用代码。即html和js仍然有混合。

     3、将html和js代码彻底分离：（view和model control完全分离）

     修改写法：

     视图view的html代码：

<HTML>
    <HEAD>
    <TITLE> example </TITLE>
    </HEAD>
    <BODY>
        <input type="button" value="baidu" id="baidu"/>
    </BODY>
    <script src="example.js"></script>
</HTML>

     分离出来的模型model和控制control的综合example.js代码：

  var o = document.getElementById("baidu");
  o.onclick = function(){
         alert(this.value);
  }

     说明：button节点的操作和事件注册等工作完全与html页面分离。但是仔细想想，这还不是一个基于MVC的模式，control和model完全混合在一起。

     批注：与jsp中的javabean实现类似。

     4、符合MVC框架的实现：（view、mode和control完全分离）

     View视图的view.html代码：

<HTML>
    <HEAD>
    <TITLE> example </TITLE>
    </HEAD>
    <BODY>
        <input type="button" value="baidu" id="baidu"/>
    </BODY>
    <script src="model.js"></script>
    <script src="control.js"></script>
</HTML>

     实现control控制功能的control.js代码：

    function G(id){
          return document.getElementById(id);
    }
    var UI = new Object();
    UI.register = function(id,even,fun,arr){
           if(G(id)) G(id)["on"+even] = function(){ fun(arr);};
    }
    UI.register("baidu","click",tipInfo,[1,2]);
    /*
           第一参数：为button节点id
           第二参数：为需要注册的触发事件
           第三参数：事件触发函数
           第四参数：需要传递的参数。
    */

     说明：control.js的代码就是实现html页面节点事件的注册。使得节点的各种事件知道会触发什么函数去执行。

     具体的函数操作，可以放到model模块中执行，在model中，才是真正处理逻辑操作。看model.js代码：

    function tipInfo(arr){
    alert(arr[1]);
    //实现其他组件功能，例如popup、form等。都属于model模型
    }

     批注：类似jsp中的struts框架、struts标签实现方式。

总结：

     View：只管页面的显示和样式展示

     Controller：进行页面节点事件的注册和控制，以及页面加载性能的实现（例如方荣的硬盘缓存）。

     Model：真正的逻辑处理，例如jslib库中的form、popup、drag等功能组件都属于model模块。

一句话概要就是：Models用来处理数据，View将处理结果呈现给用户，Controller用来连接这两者。

前端MVC流程：
1、用户在View上进行操作——比如在文本框输入数值或是点击按钮
2、Controller处理这个动作
3、Controller通过Model对数据进行增删改查，将其传递到View
4、View将数据展示给用户

HiTheWorld

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端web开发的MVC模式

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架：model模型是理解成服务器端的模块程序；view为发送给客服端的内容；Controller为servlet程序控制跳转和工作流。随着前端Ajax兴起、前端开发工作进一步划分：js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看，MVC的应用也越来越必要，特别是对大的项目。例如需要给一个页面上的
复制链接

扫一扫