我对前端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/(适用于 ...
随机推荐
- Jasper_chart_create a new stacked chart
How to make a stacked chart 1, prepare data Source here we will create a csv file. 2, import/configu ...
- CloudStack API编程指引
原文地址:https://cwiki.apache.org/confluence/display/CLOUDSTACK/CloudStack+API+Coding+Guidelines 前言 本文阐述 ...
- Unity3D中使用KiiCloud总结一
Kii Cloud简介 Kii Cloud提供一系列的服务,来帮助你为你的App获取用户,留住用户,以及创造利润.它为移动App提供了用户管理以及快捷安全可扩展的数据存储服务. 现在你可以在短短几分钟 ...
- java中连接postgresql基本代码
try { Class.forName( "org.postgresql.Driver" ).newInstance(); String url = "jdbc:post ...
- 一种针对虚拟机的应用软件License认证方法
由于虚拟机的硬件信息可以随意修改,使得虚拟机可能具有相同的硬件信息,在传统的应用软件License认证方式中会导致License认证漏洞.本专利提供了一种有效的解决方法. 文/王宏财 目 前,云计算的 ...
- 关于NGINX变量的一些测试结果
作为NGINX变量,不像正规语言那么正式. 但处理自定义和内部变量时,这些操作,也是少不了的. geo $dollar { default "$"; } server { list ...
- Uva11183-Teen Girl Squad(有向图最小生成树朱刘算法)
解析: 裸的有向图最小生成树 代码 #include<cstdio> #include<cstring> #include<string> #include< ...
- 微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记
微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView) ...
- JSTL解析——007——fmt标签库02
各位亲们,近期事情比较多,没更新,come on! 1.<fmt:bundle>/<fmt:message>/<fmt:param>资源国际化标签 java中使用R ...
- Codeforces Round #389(div 2)
A =w= B QvQ C 题意:在一个格子图里给出一个路径 里面有UDLR四种移动方向 问 我在格子路径里面最少选几个点 可以让我沿着格子路径走 其实是在相邻的点与点之间走最短路 分析:贪心+模拟 ...