前端web开发的MVC模式 - 从一个简单实例讲起

转载 2015年11月18日 16:31:08

前端web开发的MVC模式 - 从一个简单实例讲起

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给客服端的内容;control为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:只管页面的显示和样式展示

         Control:进行页面节点事件的注册和控制,以及页面加载性能的实现(例如方荣的硬盘缓存)。

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

前端web开发的MVC模式 - 从一个简单实例讲起

前端web开发的MVC模式 - 从一个简单实例讲起 MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给...
  • guoyankun
  • guoyankun
  • 2014年02月17日 14:28
  • 32860

一个简单实例——快速理解前端web开发的MVC模式

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给客服端的内容;control为servlet程序控制跳转和...
  • ifanyic
  • ifanyic
  • 2014年05月25日 18:07
  • 478

前端web开发的MVC模式-从一个简单的实例讲起

原文链接:http://blog.csdn.net/guoyankun/article/details/19335065 前端web开发的MVC模式 - 从一个简单实例讲起 ...
  • u010874036
  • u010874036
  • 2016年03月27日 10:56
  • 363

前端web开发的MVC模式

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给客服端的内容;Controller为servlet程序控制...
  • u011100687
  • u011100687
  • 2015年09月30日 17:11
  • 1009

web项目中的mvc模式理解

MVC的理解概念: MVC是一种软件工程中的一种软件架构模式,把软件系统划分为三个基本结构部分,分别是模型(model)、试图(view)、控制器(controller),简称为MVC; MVC是...
  • sinat_28789467
  • sinat_28789467
  • 2017年05月30日 09:10
  • 442

前端框架模式MVC、MVVM和MVP的讲解

复杂的软件必须有清晰合理的架构,否则无法开发和维护。   MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用。   除了MCV模式还有MVVM和MVP模式...
  • jason_renyu
  • jason_renyu
  • 2017年02月07日 18:53
  • 763

---简单的mvc模式理解案例

数据库有一张数据表。将他查询出来显示在网页上 页面: 点击后: index.jsp接收请求后,将请求交给listAllStudents对应的servlet ,servlet创建StudentsD...
  • qq_25201665
  • qq_25201665
  • 2016年07月23日 23:56
  • 437

与LSGO一起学“第2章 做一个简短的C++程序(2.1简单的屏幕输出小程序)”

2.1 简单的屏幕输出小程序 程序演示: #include int main() {     std::cout"我喜欢C++\n";     in...
  • AlgorithmCharm
  • AlgorithmCharm
  • 2016年03月25日 19:13
  • 653

三菱FX系列PLC教学课程---一个从基础讲起的电梯控制实例

原地址: http://www.gkong8.net/GKONG8PLC/index.htm
  • kuailedaren123
  • kuailedaren123
  • 2011年05月05日 11:11
  • 7392

深入学习前端MVC和MVVM(一)

MVC是一种开发模式,就是一种模型—视图—控制器(MVC)模式。 在php项目中,nodejs项目中,很容易实现MVC。比如一个nodeJS的MVC:先说后台的MVC一、model层模型层:模型中的...
  • sinat_25127047
  • sinat_25127047
  • 2017年05月08日 20:44
  • 914
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端web开发的MVC模式 - 从一个简单实例讲起
举报原因:
原因补充:

(最多只允许输入30个字)