随着前端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. 房租管理小软件（四）：对linq的使用

    1.对LInq的封装如下: private static System.Data.Linq.Mapping.MappingSource mappingSource = new AttributeMap ...

  2. 【暑假】[深入动态规划]UVa 1628 Pizza Delivery

    UVa 1628 Pizza Delivery 题目: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=51189 思路:    ...

  3. uvalive 4728 Squares

    题意:求所有正方形中两点距离最大值的平方值. 思路:旋转卡壳法. 分别用数组和vector存凸包时,旋转卡壳代码有所不同. #include<cstdio> #include<cma ...

  4. 请求码（requestCode）与结果码（resultCode）解析

    Android apk开发中经常需要在活动(Activity)之间穿梭,并实现活动之间的数据传递.为了启动一个新的活动并得到该活动的返回数据,需调用方法startActivityForResult() ...

  5. 自编译安装nginx

    1. 下载nginx,并解压 http://nginx.org/ 2. 下载health check模块 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 1 ...

  6. 析构函数释放内存时出现_BLOCK_TYPE_IS_VALID错误

    错误信息截图: 原因: 1.内存泄漏:所以当程序退出时,系统会收回分配的内存,于是调析构函数,由于内存已被错误地释放,于是就会出现"Debug Assertion Failed"的 ...

  7. HDU-4608 I-number 枚举

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4608 直接暴力枚举,没什么好说的.... //STATUS:C++_AC_765MS_740KB #i ...

  8. POJ2723-Get Luffy Out（2-SAT）

    题意:有m扇门,每个门上有两把锁,打开任意一个锁都可以打开这扇门.门要按顺序一个一个打开. 现在有n对不同的钥匙,每对钥匙只能用其中一个,问最多能打开多少门. 题解:对钥匙建图,门是限制条件来建边.每 ...

  9. mlock家族：锁定物理内存

    Start Page Index History Last Change mlock家族:锁定物理内存 系统调用 mlock 家族允许程序在物理内存上锁住它的部分或全部地址空间.这将阻止Linux 将 ...

  10. A Tour of Go Function values

    Functions are values too. 在函数式语言中中函数都是变量,比如在javascript中 package main import ( "fmt" " ...