随着前端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. 《Python基础教程（第二版）》学习笔记 -> 第四章 字典

    字典是Python中唯一内建的映射类型. 字典中的值并没有特殊的顺序,但是都存储在一个特定的键(Key)里.键可以是数字.字符串甚至是元组. 字典的使用 某些情况下,字典比列表更加适用: 表征游戏棋盘 ...

  2. C++模拟键盘鼠标消息

    #include <Windows.h> /* * === FUNCTION ======================================================= ...

  3. umask设置导致程序权限不足的问题

    这几天邮件告警总是发不了邮件,查看了下zext_msmtp.sh的日志,发现总是提示权限不足…… 于是切换为zabbix的账户,发现在msmtp的目录下连ls都无法执行. 之后发现是umask的问题, ...

  4. 用Python操作Excel2007 及以上的版本读写，来自官方的Demo

    大牛请略过,新手可以参考,具体见下面的代码注释, 另外一个问题,想学习这个语言,最好还是英语牛一些,可以去官网多看看有用的类库,汉语的资料不是很全 #运行环境 3.4,下面这个操作Excel的包是针对 ...

  5. ROW_NUMBER 使用

    WITH t_pageAS( SELECT ROW_NUMBER() OVER ( ORDER BY table_name ) AS row_index,column_name FROM table_ ...

  6. HW7.3

    public class Solution { public static void main(String[] args) { char[][] answers = { {'A', 'B', 'A' ...

  7. HDU-4418 Time travel 概率DP,高斯消元

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4418 题意:简单来说就是给你1个环(n - 1 , n - 2 …… 0 ,1 , 2 , 3 …… ...

  8. 数据文件 和日志文件 收缩 Sql Server

    A. 将数据文件收缩到指定的目标大小 以下示例将 UserDB 用户数据库中名为 DataFile1 的数据文件的大小收缩到 7 MB. 复制 USE UserDB; GO DBCC SHRINKFI ...

  9. 【转】可执行程序包括BSS段、数据段、代码段

    可执行程序包括BSS段.数据段.代码段(也称文本段). 一.BSS BSS(Block Started by Symbol)通常是指用来存放程序中未初始化的全局变量和静态变量的一块内存区域.特点是:可 ...

  10. [Objective-c 基础 - 3.2] ARC

    A.ARC的基本原理 1.ARC的判断原则:只有没有强指针指向对象,就会立即释放对象 注意,在以下情况,会立即回收内存: (1)指针超出作用域 { Person *p1 = [[Personalloc ...