前端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模式-入门示例的更多相关文章

  1. 前端Web开发MVC模式-入门示例

    MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:control为servlet程序控制跳转和 ...

  2. SAP web 开发 (第二篇 bsp 开发 mvc模式 Part1 )

    Model-View-Controller 简称MVC. 简单的说就是把数据处理,显示,页面事件及处理过程分离开来,企业应用多数都采用这种方式,多层架构的优缺点不再多言,google一下啥都知道. 在 ...

  3. 《Flask Web开发实战：入门、进阶与原理解析（李辉著 ）》PDF+源代码

    一句话评价: 这可能是市面上(包括国外出版的)你能找到最好的讲Flask的书了 下载:链接: https://pan.baidu.com/s/1ioEfLc7Hc15jFpC-DmEYBA 提取码: ...

  4. web开发-MVC IoC 框架（转）

    随着Web应用的商业逻辑包含逐渐复杂的公式分析计算.决策支持等,使客户机越 来越不堪重负,因此将系统的商业分离出来.单独形成一部分,这样三层结构产生了. 其中‘层’是逻辑上的划分. 三层体系结构是将整 ...

  5. Java Web开发技术教程入门-自定义标签

    回顾: 昨天了解了JSP开发的两种模式Model1和Model2模式.Model1采用JSP+JavaBean技术开发Web应用,它比较适合小规模应用的开发,效率较高,易于实现.但由于在Model1中 ...

  6. Java Web开发技术教程入门-Model1和Model2

    今天我们聊聊JSP开发中的Model1和Model2. Model1采用了JSP+JavaBean技术开发Web应用.其中,JSP实现页面显示,业务逻辑和流程控制,数据处理由JavaBean完成.在J ...

  7. MVC模式入门案例

    import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widg ...

  8. Java Web开发技术教程入门-JSP基本语法和九大内置对象

    这两天气温逐渐升高,好想把自己泡在冰块里······ 恩嗯摁蒽恩嗯摁蒽恩嗯摁蒽恩嗯摁蒽.......今天阅读到了这本书的第四章-JSP基本语法.经过第一天的阅读,我们明白JSP技术是Java Web开 ...

  9. Java Web开发技术教程入门-静态网页技术

        昨天了解了构建动态网站的几种技术:Servlet技术.JSP技术,ASP技术和ASP.NET技术以及PHP技术.昨天的精髓在于JSP技术的运行原理:通过用户请求JSP文件,首先检查JSP文件的 ...

随机推荐

  1. APP注册&登陆 逻辑细节

    前言:有多少用户愿意注册登陆,决定了一款产品的最大活跃度. 用户登陆注册系统分为两大类: 自建用户系统:邮箱/手机号/用户名/二维码/人脸识别/指纹 第三方授权用户系统:微信/微博/支付包/豆瓣/Fa ...

  2. Oracle自我补充之trunc()函数使用介绍

    oracle trunc函数使用介绍 核心提示:oracle trunc函数使用介绍 1.TRUNC(for dates) TRUNC函数为指定元素而截去的日期值. 其具体的语法格式如下: TRUNC ...

  3. IDEA激活

    https://blog.csdn.net/qq_34273222/article/details/78810799 目测这个服务器可用:http://idea.iteblog.com/key.php

  4. Django之静态文件配置

    在项目目录中打开settings.py,在最下面配置静态文件(css文件,js文件以及其他静态配置文件),比如说html使用到了jQuery框架,我们要在项目根目录下创建statics(可自定义),将 ...

  5. C++数组初始化

    局部数组:没有默认值,如果声明的时候不定义,则会出现随机数(undefined): 全局数组:声明时不赋值,默认值为0

  6. NHibernate many-to-one映射

    many-to-one 数据方面,多条对一条. 非主键字段与主键字段的关联,在类中实现了一对一的单向映射.在类中是单实体映射. 订单充值业务.显然,一单位可以有多个充值信息. 通过表 Deposit里 ...

  7. Unity 3D-Canvas画布的三种模式

    Unity开发VR之Vuforia 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  8. #include<bits/stdc++.h>的使用

    #include<bits/stdc++.h>包含了C++里面所有的库函数,因此在写任何程序的时候只需要加上#include<bits/stdc++.h>即可.

  9. C++学习（二十六）（C语言部分）之 结构体3（联合，枚举）

    结构体 struct 类型定义点运算符 . 变量名.成员 成员是数组的时候不能用等于号赋值箭头运算符 -> 指针->成员 作用 存放多个不同类型的有关联的数据 与结构体类似的类型1.联合作 ...

  10. LG4091 【[HEOI2016/TJOI2016]求和】

    前置:第二类斯特林数 表示把\(n\)个小球放入\(m\)个不可区分的盒子的方案数 使用容斥原理分析,假设盒子可区分枚举至少有几个盒子为空,得到通项: \[S(n,m)=\frac{1}{m!}\su ...