随着前端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. msp时钟设置程序

    吐槽一下MSP430需要明白的东西: 在430中,一个时钟周期 ＝ MCLK晶振的倒数.如果MCLK是8M,则一个时钟周期为1/8us: 一个机器周期 ＝ 一个时钟周期,即430每个动作都能完成一个基 ...

  2. <转>LeetCode 题目总结/分类

    原链接:http://blog.csdn.net/yangliuy/article/details/44514495 注:此分类仅供大概参考,没有精雕细琢.有不同意见欢迎评论~ 利用堆栈:http:/ ...

  3. unity3d教程资源

    unity2d教程网 http://learnunity2d.com/2d-shootem-up-tutorial/ 横版射击2d游戏系列教程 http://pixelnest.io/tutorial ...

  4. HW6.4

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  5. [转]带花树,Edmonds's matching algorithm,一般图最大匹配

    看了两篇博客,觉得写得不错,便收藏之.. 首先是第一篇,转自某Final牛 带花树……其实这个算法很容易理解,但是实现起来非常奇葩(至少对我而言). 除了wiki和amber的程序我找到的资料看着都不 ...

  6. JS代码片段

    1. 对比cookie // cookie array function getCookieArrayByStr(str) { var cookies = str.split("; &quo ...

  7. 5个经典的JavaScript面试基础问题

    JavaScript程序员在IT领域中的需求量非常巨大.如果你非常精通JavaScript,你会有很多换工作.涨薪水的机会.但是在一家公司录用你之前,你必须顺利通过面试,证明你的技能.在本文中,我将向 ...

  8. C++学习笔记（三）：数组

    数组声明时必须指定该数组的长度: ]; 这个时候已经分配了内存,但没有初始化,所以具体的值是不确定的: 初始化: ] = {, , }; ] = {};//指定第一个数字为1,后面的使用0填充: ] ...

  9. 教你50招提升ASP.NET性能（十）：减少通过网络发送的数据

    (16)Reduce the data sent across the network 招数16: 减少通过网络发送的数据 Reducing the amount of data sent acros ...

  10. Java算法试题--猜字母/杀人游戏

    题目例如以下: 把abcd-s共19个字母组成的序列反复拼接106次,得到长度为2014的串. 接下来删除第1个字母(即开头的字母a).以及第3个,第5个等全部奇数位置的字母. 得到的新串再进行删除奇 ...