随着前端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. JavaScript：子ウィンドウから親ウィンドウを再読み込みさせる方法

    ことの起こり Webの画面では.新規入力をしようとすると.別ウィンドウ＝子ウィンドウが開いて入力し.登録ボタンを押すと.子ウィンドウが閉じる仕組みがある. 子ウィンドウが閉じるだけなら問題ないが.一覧 ...

  2. 让一个WebRole支持多个站点

    在参考Configure a Web Role for Multiple Web Sites和Tips for Publishing Multiple Sites in a Web Role两篇文章后 ...

  3. leetcode@ [22]Generate Parentheses (递归 + 卡特兰数)

    https://leetcode.com/problems/generate-parentheses/ Given n pairs of parentheses, write a function t ...

  4. [Objective-c 基础 - 2.6] @property和@synthesize

    Xcode编译器的特性,自动生成getter和setter   A.@property 自动生成某个成员变量的getter和setter的声明 变量的命名要求:以下划线开头 Student.h @in ...

  5. jquery事件函数和原生事件绑定函数中return false的区别

    一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件 ...

  6. Idea的Git使用

    在使用Git来pull和push代码的时候会发生冲突的情况,如果处理不当则会出现无法pull和push代码的情况.所以这个是十分有必要注意的. 那么我来说几句自己的总结吧: 1.先看下idea的Git ...

  7. MySQL数据库备份还原（基于binlog的增量备份）

    MySQL数据库备份还原(基于binlog的增量备份) 一.简介 1.增量备份      增量备份 是指在一次全备份或上一次增量备份后,以后每次的备份只需备份与前一次相比增加或者被修改的文件.这就意味 ...

  8. Java基础学习中一些词语和语句的使用

    在Java基础学习中,我们刚接触Java会遇到一些词和语句的使用不清的情况,不能很清楚的理解它的运行效果会是怎么样的,如:break,continue在程序中运行效果及跳转位置, 1.先来看看brea ...

  9. 认识CoreData-高级用法

    来源:伯乐在线专栏作者 - 刘小壮 链接:http://ios.jobbole.com/87293/ 点击 → 了解如何加入专栏作者 认识CoreData-初识CoreData 认识CoreData- ...

  10. OC/Swift第三方添加出错解决方法

    (未经同意,不得转载!) ------------------------华丽分割线-----------------------