简单理解前端web开发的MVC模式
随着前端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模式的更多相关文章
- 【转】前端Web开发MVC模式-入门示例
前端Web开发MVC模式-入门示例 MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:cont ...
- PHP做Web开发的MVC框架（Smarty使用说明 ）
PHP做Web开发的MVC框架(Smarty使用说明 ) 一.Smarty简明教程 1.安装演示 下载最新版本的Smarty-3.1.12,然后解压下载的文件.接下来演示Smarty自带的demo例子 ...
- Web开发中 MTV模式与MVC模式的区别 联系 概念
MTV 与 MVC模式的区别 联系 概念: MTV: 所谓MTV指的就是: M:model (模型),指的是ORM模型. T:template (模板),一般Python都是使用模板渲染的方式来把HT ...
- Java Web开发中MVC设计模式简介
一.有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet,如何编写jsp及如何更新浏览器中显示的内容.但是我们之前自己编写的应用一般存在无条 ...
- JavaScript大杂烩18 - Web开发的MVVM模式
MVC VS. MVP VS. MVVM 了解MVVM模式之前,我们先来简单了解一下从MVC到MVVM的变迁.这个变迁是耦合从紧到松的变迁,是对依赖处理的进化,是应对变化技术的成熟. MVC MV ...
- 前端Web开发MVC模式-入门示例
MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:control为servlet程序控制跳转和 ...
- ios开发中MVC模式的理解
MVC是80年代出现的一种软件设计模式,是模型(model),视图(view)和控制(Controller)的缩写. 其中Model的主要功能包括业务逻辑的处理以及数据的访问,这是应用程序的主体部分. ...
- python web开发-flask调试模式
使用run()方式可以启动flask应用,但是每次修改代码之后,需要重新启动,这样对于调试就很不太方便.Flask的调试模式可以让代码在每次修改之后自动载入. 有两种方法可以启用flask的调试模式 ...
- java web基础之mvc模式设计（一）--使用httpservlet实现mvc分层设计，DAO层使用的是dbutils实现与数据库的链接
一:1.最终的实现效果图: 2.案例的目录结构: 3.案例中使用到的jar包: 二:案例的链接数据库的层次结构关系:数据库是:mysql ,数据库名字:dsm,表格名字:customers 数据库表格 ...
随机推荐
- PowerShell：Linux程序员喜欢的cmd增强版
Linux程序员有时偶尔使用Windows下的cmd工具,会被逼疯的,有些命令ls, cat, ps等已经条件反射一样使用. 但在cmd下,根本不知道该用什么命令,好在盖兹大叔照顾了此部分需求.从Vi ...
- vector(相对线程安全) arryList（线程不安全）
1.什么是线程安全? 如果说某个集合是线程安全的,那么我们就不用考虑并发访问这个集合?(需要定义自己百度,但是很难懂) 2.深入jvm中的线程安全的级别. a不变模式(String等基本类型) b.绝 ...
- MATLAB绘图与图形处理
参考:http://www.cnblogs.com/djcsch2001/tag/MATLAB/ matlab部分写的不错! 7.2 三维图形 7.2.1 三维曲线.面填色命令 命令1 com ...
- [读书笔记]了不起的node.js(四)
这周的学习主要是nodejs的数据库交互上,并使用jade模板一起做了一个用户验证的网站.主要是遇到了一下几个问题. 1.mongodb版本过低 npm ERR! Not compatible wit ...
- Ubuntu 固态硬盘 4K对齐及启用 Trim，及其验证方法
因为之前一个移动硬盘因为坏道蔓延导致没办法继续使用,我略冲动地跑去买了一块 120GB 的三星840 固态硬盘回来.为了使用起来更方便,还去弄了个光驱位硬盘托架,把固态硬盘接在了光驱位与原本的笔记本硬 ...
- FTP被动模式连接及超时问题解决
问题: 1.FTPClient.listFiles()或者FTPClient.retrieveFile()方法时,就停止在那里,什么反应都没有,出现假死状态. 2.连接FTP服务器,长时间进行数据操作 ...
- kvo原理概述
kvo概述 kvo,全称Key-Value Observing,它提供了一种方法,当对象某个属性发生改变时,允许监听该属性值变化的对象可以接受到通知,然后通过kvo的方法响应一些操作. kvo实现原理 ...
- Umbraco Forms 使Rendering Forms scripts 在不同的template中
具体请参考 https://our.umbraco.org/documentation/products/umbracoforms/developer/Rendering-Scripts/ 转载 ht ...
- 转载Entity Framework 5.0（EF first）中的添加，删除，修改，查询，状态跟踪操作
转载原出处:http://www.cnblogs.com/kenshincui/p/3345586.html Entity Framework将概念模型中定义的实体和关系映射到数据源,利用实体框架可以 ...
- Qt on_pushButton_clicked()的用法【worldsing笔记】
在Qt里按钮控件默认对应一个on_pushButton_clicked()成员,如果想用点击信号,在代码中实现on_pushButton_clicked()成员即可. 最近看了一段代码,里面并没有co ...