随着前端Ajax兴起、前端开发工作进一步划分：js开发和ui页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看，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代码还需要查找整个页面，导致整个页面非常混乱。

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(obj){

alert(obj.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 obj = document.getElementById("baidu");

obj.onclick = function(){

alert(this.value);

}

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

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 Get(id){

return document.getElementById(id);

}

var UI = new Object();

UI.register = function(id,even,fun,arr){

if(Get(id)){

　　　　　　Get(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模型

}

总结：

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

Control：进行页面节点事件的注册和控制，以及页面加载性能的实现。

Model：真正的逻辑处理，

简单理解前端web开发的MVC模式的更多相关文章

  1. 【转】前端Web开发MVC模式-入门示例

    前端Web开发MVC模式-入门示例 MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:cont ...

  2. PHP做Web开发的MVC框架（Smarty使用说明 ）

    PHP做Web开发的MVC框架(Smarty使用说明 ) 一.Smarty简明教程 1.安装演示 下载最新版本的Smarty-3.1.12,然后解压下载的文件.接下来演示Smarty自带的demo例子 ...

  3. Web开发中 MTV模式与MVC模式的区别 联系 概念

    MTV 与 MVC模式的区别 联系 概念: MTV: 所谓MTV指的就是: M:model (模型),指的是ORM模型. T:template (模板),一般Python都是使用模板渲染的方式来把HT ...

  4. Java Web开发中MVC设计模式简介

    一.有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet,如何编写jsp及如何更新浏览器中显示的内容.但是我们之前自己编写的应用一般存在无条 ...

  5. JavaScript大杂烩18 - Web开发的MVVM模式

    MVC VS. MVP VS. MVVM  了解MVVM模式之前,我们先来简单了解一下从MVC到MVVM的变迁.这个变迁是耦合从紧到松的变迁,是对依赖处理的进化,是应对变化技术的成熟. MVC  MV ...

  6. 前端Web开发MVC模式-入门示例

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

  7. ios开发中MVC模式的理解

    MVC是80年代出现的一种软件设计模式,是模型(model),视图(view)和控制(Controller)的缩写. 其中Model的主要功能包括业务逻辑的处理以及数据的访问,这是应用程序的主体部分. ...

  8. python web开发-flask调试模式

    使用run()方式可以启动flask应用,但是每次修改代码之后,需要重新启动,这样对于调试就很不太方便.Flask的调试模式可以让代码在每次修改之后自动载入. 有两种方法可以启用flask的调试模式 ...

  9. java web基础之mvc模式设计（一）--使用httpservlet实现mvc分层设计，DAO层使用的是dbutils实现与数据库的链接

    一:1.最终的实现效果图: 2.案例的目录结构: 3.案例中使用到的jar包: 二:案例的链接数据库的层次结构关系:数据库是:mysql ,数据库名字:dsm,表格名字:customers 数据库表格 ...

随机推荐

  1. windows下python配置

    1.下载安装 Pythonpython-2.7.5.msi  http://www.python.org/download/如下载 Python 2.7.5,安装目录为 C:\Python27 2.添 ...

  2. CUDA网格限制

    如图

  3. Umbraco中的ModelBuilder

    Umbraco中的ModelBuilder有以下几种形式 Pure Live models Dll models LiveDll models AppData models LiveAppData m ...

  4. 射频识别技术漫谈(7)——ID卡【worldsing笔记】

    ID(Identification)是识别的意思,ID卡就是识别卡.ID卡包含范围广泛,只要具有识别功能的卡片都可以叫ID卡,例如条码卡,磁卡都可以是ID卡,我们这儿说的当然是射频识别卡. 射频ID卡 ...

  5. 【Away3D代码解读】（五）：动画模块及骨骼动画

    动画模块核心存放在away3d.animators包里: Away3D支持下面几种动画格式: VertexAnimator:顶点动画 SkeletonAnimator:骨骼动画 UVAnimator: ...

  6. JavaScript 的原型对象 Prototype

    在 JavaScript 中,每当定义一个对象(或函数)时候,对象中都会包含一些预定义的属性,其中一个属性就是原型对象 prototype. var myObject = function( name ...

  7. jquery 延迟加载代码

    <!--引入以下两个js文件--> <script type="text/javascript" src="./js/jquery.min.js&quo ...

  8. 邮件Mail

    邮件开发准备: 准备工作, 环境搭建: 1. 本地搭建一个邮件服务器 -à 易邮服务器,eyoumailserversetup.exe 2. 新建邮箱账号 张三给李四发邮件. 步骤1: 新建域名: 工 ...

  9. 关于 mysql.test 数据库

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  10. Postfix 电子邮件系统精要

    来源: http://sery.blog.51cto.com/10037/45500 Postfix 电子邮件系统精要 作者:田逸(sery@163.com)  from [url]http://ww ...