我对前端MVC的理解
前端MVC:(model、view、controller)模型、视图、控制器
MVC的逻辑都应该以函数的形式包装好,然后按产品业务和交互需求,使用对应的设计模式组装成合适的MVC对象或类。
MVC逻辑划分的清晰度判断标准是维护人员要能明确的区别哪些是M层的函数,哪些是V层的函数,哪些是C层的函数,其调用的次序通常是从C到M到C到V,参数从M层输入计算后得到返回值传递给C层,C层依据M层传来的参数操作完毕后,将结果呈现在V层。这样做的好处是:当维护人员在维护和修改产品的时候,可以根据V层的异常结果去追踪对应C层的参数、逻辑和输出,如果对应的C层没问题,就再追踪M层,直至追踪至服务端。
清晰划分前端MVC的好处在于可以将前端逻辑的关联关系划分开,将复杂问题分解成一个个相关联的简单问题去逐一分析解决,从而将问题的复杂度限制在人脑可以处理的范围内逐一解决,避免问题的复杂度(繁杂的数据和关联关系)超出人脑的处理能力。
M:模型层,主要包括数据模型的创建()、添加、修改(拼接、格式化等)、删除、查询(清洗、过滤等)等操作逻辑;
C:控制器层,主要包括两个方面:
1、注册事件并操作DOM,获取用户的输入和操作参数,将参数传递给模型层处理;
2、根据模型层返回的参数进行DOM操作,控制视图来呈现不同的状态用以与用户交互;
V:视图层,主要包括HTML标签、CSS,提供给控制器操作的对象;
MVC程序结构划分只适合使用在那些业务逻辑较为复杂的项目中,太过简单的业务和交互逻辑也划分MVC,就像拿高科技制导导弹去打蚊子,得不偿失。
我对前端MVC的理解的更多相关文章
- 【blade的UI设计】理解前端MVC与分层思想
前言 最近校招要来了,很多大三的同学一定按捺不住心中的焦躁,其中有期待也有彷徨,或许更多的是些许担忧,最近在开始疯狂的复习了吧 这里小钗有几点建议给各位: ① 不要看得太重,关心则乱,太紧张反而表现不 ...
- 前端MVC框架Backbone 1.1.0源码分析(一)
前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...
- 我的前端MVC之路
大约十几个月前,了解到时下前端MVC之火爆,同事推荐我了解一下angular.当时也不是特别在意,只是稍稍阅读了一遍官方文档,并尝试了文档上的例子.其实当时也颇有震惊之感的,原来代码还可以这么写!看完 ...
- 侃侃前端MVC设计模式
前言 前端的MVC,近几年一直很火,大家也都纷纷讨论着,于是乎,抽空总结一下这个知识点.看了些文章,结合实践略作总结并发表一下自己的看法. 最初接触MVC是后端Java的MVC架构,用一张图来表示之— ...
- 前端mvc mvp mvvm 架构介绍(vue重构项目一)
首先 我们为什么重构这个项目 1:我们现有的技术是前后台不分离,页面上采用esayUI+jq构成的单页面,每个所谓的单页面都是从后台胜场的唯一Id 与前端绑定,即使你找到了那个页面元素,也找不到所在的 ...
- 【Java面试】说说你对Spring MVC的理解
一个工作了7年的粉丝,他说在面试之前,Spring这块的内容准备得很充分. 而且各种面试题也刷了,结果在面试的时候,面试官问:"说说你对Spring MVC的理解". 这个问题一下 ...
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- 前端MVC框架、类库、UI框架选择
CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...
随机推荐
- jquery 图片滚动
效果图: $(function(){ $("#roll-img2").html($("#roll-img").html()); function r ...
- [译]终极塔防——运用HTML5从头创建一个塔防游戏
翻译共享一篇CodeProject的高星力作,原文地址:http://www.codeproject.com/Articles/737238/Ultimate-Tower-Defense 下载演示项目 ...
- Monkey and Banana(HDU 1069 动态规划)
Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- DataTable中数据针对某列数据去重
//针对这些数据进行去重,取某一列就用这一列字段,把重复的去掉 DataSet ds = dao.get(); DataTable dt = ds.Table[0] DataView dv = dt. ...
- 简单的使用php多线程抓取网页
PHP 利用 Curl Functions 可以完成各种传送文件操作,比如模拟浏览器发送GET,POST请求等等,受限于php语言本身不支持多线程,所以开发爬虫程序效率并不高,这时候往往需 要借助Cu ...
- LeetCode_Rotate Image
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...
- Keil C51程序设计中几种精确延时方法
1 使用定时器/计数器实现精确延时 单片机系统一般常选用11.059 2 MHz.12 MHz或6 MHz晶振.第一种更容易产生各种标准的波特率,后两种的一个机器周期分别为1 μs和2 μs,便于精确 ...
- python中的继承原则
继承是面向对象的重要特征之一,继承是两个类或者多个类之间的父子关系,子进程继承了父进程的所有公有实例变量和方法.继承实现了代码的重用.重用已经存在的数据和行为,减少代码的重新编写,python在类名 ...
- seajs教程之seajs学习笔记 seajs.use用法
seajs.use 用来在页面中加载模块.通过 use 方法,可以在页面中加载任意模块. 实例地址:http://www.android100.org/html/201405/23/12807.htm ...
- WPF弹出对话确认框
MessageBoxResult mr = CMessageBox.ShowQuestionMessage("点击“是”继续,点击“否”取消.", "确认删除?" ...