前端Web开发MVC模式-入门示例
MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架：model模型是理解成服务器端的模块程序；view为发送给客服端的内容；control为servlet程序控制跳转和工作流。
随着前端Ajax兴起、前端开发工作进一步划分：js程序员和ue页面制作、另外从整个前端项目的清晰明朗可以扩展性角度来看，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代码还需要查找整个页面，导致整个页面非常混乱。
批注：类似与 jsp中直接嵌入java片段语句。
2、将html和js代码进行适当分离：（view和model control在同一页面适当分离）
修改以上的写法：
<html>
<head>
<title> example </title>
</head>
<body>
<input type="button" value="baidu" onclick="tipInfo(this);"/>
<script type="text/javascript">
function tipInfo(o){
alert(o.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 o = document.getElementById("baidu");
o.onclick = function(){
alert(this.value);
}
说明：button节点的操作和事件注册等工作完全与html页面分离。但是仔细想想，这还不是一个基于MVC的模式，control和model完全混合在一起。
批注：与jsp中的javabean实现类似。
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 G(id){
return document.getElementById(id);
}
var UI = new Object();
UI.register = function(id,even,fun,arr){
if(G(id))
G(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模型
}
批注：类似jsp中的struts框架、struts标签实现方式。
总结：
View：只管页面的显示和样式展示
Control：进行页面节点事件的注册和控制，以及页面加载性能的实现（例如方荣的硬盘缓存）。
Model：真正的逻辑处理，例如jslib库中的form、popup、drag等功能组件都属于model模块。
前端Web开发MVC模式-入门示例的更多相关文章
- 【转】前端Web开发MVC模式-入门示例
前端Web开发MVC模式-入门示例 MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:cont ...
- SAP web 开发 (第二篇 bsp 开发 mvc模式 Part1 )
Model-View-Controller 简称MVC. 简单的说就是把数据处理,显示,页面事件及处理过程分离开来,企业应用多数都采用这种方式,多层架构的优缺点不再多言,google一下啥都知道. 在 ...
- 《Flask Web开发实战：入门、进阶与原理解析（李辉著 ）》PDF+源代码
一句话评价: 这可能是市面上(包括国外出版的)你能找到最好的讲Flask的书了 下载:链接: https://pan.baidu.com/s/1ioEfLc7Hc15jFpC-DmEYBA 提取码: ...
- web开发-MVC IoC 框架（转）
随着Web应用的商业逻辑包含逐渐复杂的公式分析计算.决策支持等,使客户机越 来越不堪重负,因此将系统的商业分离出来.单独形成一部分,这样三层结构产生了. 其中‘层’是逻辑上的划分. 三层体系结构是将整 ...
- Java Web开发技术教程入门-自定义标签
回顾: 昨天了解了JSP开发的两种模式Model1和Model2模式.Model1采用JSP+JavaBean技术开发Web应用,它比较适合小规模应用的开发,效率较高,易于实现.但由于在Model1中 ...
- Java Web开发技术教程入门-Model1和Model2
今天我们聊聊JSP开发中的Model1和Model2. Model1采用了JSP+JavaBean技术开发Web应用.其中,JSP实现页面显示,业务逻辑和流程控制,数据处理由JavaBean完成.在J ...
- MVC模式入门案例
import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widg ...
- Java Web开发技术教程入门-JSP基本语法和九大内置对象
这两天气温逐渐升高,好想把自己泡在冰块里······ 恩嗯摁蒽恩嗯摁蒽恩嗯摁蒽恩嗯摁蒽.......今天阅读到了这本书的第四章-JSP基本语法.经过第一天的阅读,我们明白JSP技术是Java Web开 ...
- Java Web开发技术教程入门-静态网页技术
昨天了解了构建动态网站的几种技术:Servlet技术.JSP技术,ASP技术和ASP.NET技术以及PHP技术.昨天的精髓在于JSP技术的运行原理:通过用户请求JSP文件,首先检查JSP文件的 ...
随机推荐
- 《编程珠玑(第2版)》【PDF】下载
<编程珠玑(第2版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382225 内容简介 书的内容围绕程序设计人员面对的一系列实 ...
- 微信小程序教学第二章：小程序中级实战教程之预备篇 - 项目结构设计 ｜基于最新版1.0开发者工具
iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享>. ...
- 接口json数据与数据库数据循环比对校验
创建测试计划,加载数据库驱动: 线程组: csv配置元件: 注:Filename用的是相对路径,csv文件要与jmeter脚本文件在同一目录 JDBC连接配置: jdbc请求: 用户定义的变量: ht ...
- 【ANT】java项目生成文件示例
<?xml version="1.0" ?> <project default="dist"> <property name=&q ...
- 【java】io流之字符输入流：java.io.Reader类及子类的子类java.io.FileReader
package 文件操作; import java.io.File; import java.io.FileReader; import java.io.IOException; import jav ...
- [LeetCode] 二叉树相关题目（不完全）
最近在做LeetCode上面有关二叉树的题目,这篇博客仅用来记录这些题目的代码. 二叉树的题目,一般都是利用递归来解决的,因此这一类题目对理解递归很有帮助. 1.Symmetric Tree(http ...
- OC学习6——面相对象的三大特性
我们在学习Java的时候都知道,类有三大特性:继承,封装,多态,这也是面向对象的三大特征.OC学习篇之---类的三大特性(封装,继承,多态) 1.封装(Encapsulation)是指将对象的状态信息 ...
- iOS 判断数组array中是否包含元素a，取出a在array中的下标+数组方法详解
目前找到来4个解决办法,第三个尤为简单方便 NSArray * arr = @["]; //是否包含 "]) { NSInteger index = [arr indexOfObj ...
- iOS----------如何检查域名是否支持ipv6
http://ipv6-test.com/validate.php 这个地址 也可以检测到! 1.检查你所用到的库,像af 3.0以上什么的(不用改),其他的库自己去搜下是否支持ipv6吧. 2. ...
- Java I/O---File类
1.File概述 File(文件)类可能有一定的误导性,它不仅仅指代的是文件.它既能代表一个特定的文件的名称,又能代表一个目录下的一组文件集的名称,这样就可以用集合List方法调用和遍历.实际上Fil ...