前端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的理解的更多相关文章

  1. 【blade的UI设计】理解前端MVC与分层思想

    前言 最近校招要来了,很多大三的同学一定按捺不住心中的焦躁,其中有期待也有彷徨,或许更多的是些许担忧,最近在开始疯狂的复习了吧 这里小钗有几点建议给各位: ① 不要看得太重,关心则乱,太紧张反而表现不 ...

  2. 前端MVC框架Backbone 1.1.0源码分析(一)

    前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...

  3. 我的前端MVC之路

    大约十几个月前,了解到时下前端MVC之火爆,同事推荐我了解一下angular.当时也不是特别在意,只是稍稍阅读了一遍官方文档,并尝试了文档上的例子.其实当时也颇有震惊之感的,原来代码还可以这么写!看完 ...

  4. 侃侃前端MVC设计模式

    前言 前端的MVC,近几年一直很火,大家也都纷纷讨论着,于是乎,抽空总结一下这个知识点.看了些文章,结合实践略作总结并发表一下自己的看法. 最初接触MVC是后端Java的MVC架构,用一张图来表示之— ...

  5. 前端mvc mvp mvvm 架构介绍(vue重构项目一)

    首先 我们为什么重构这个项目 1:我们现有的技术是前后台不分离,页面上采用esayUI+jq构成的单页面,每个所谓的单页面都是从后台胜场的唯一Id 与前端绑定,即使你找到了那个页面元素,也找不到所在的 ...

  6. 【Java面试】说说你对Spring MVC的理解

    一个工作了7年的粉丝,他说在面试之前,Spring这块的内容准备得很充分. 而且各种面试题也刷了,结果在面试的时候,面试官问:"说说你对Spring MVC的理解". 这个问题一下 ...

  7. 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  8. 前端MVC学习总结——AngularJS验证、过滤器

    前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...

  9. 前端MVC框架、类库、UI框架选择

    CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...

随机推荐

  1. 搭建hbase-0.94.26集群环境

    先安装hadoop1.2.1,见http://blog.csdn.net/jediael_lu/article/details/38926477 1.配置hbase-site.xml <prop ...

  2. CSS3 transition 动画过度属性

    <!DOCTYPE html> <html> <head> <style>  div { width:100px; height:100px; back ...

  3. python多进程断点续传分片下载器

    python多进程断点续传分片下载器 标签:python 下载器 多进程 因为爬虫要用到下载器,但是直接用urllib下载很慢,所以找了很久终于找到一个让我欣喜的下载器.他能够断点续传分片下载,极大提 ...

  4. BIT_COUNT()和BIT_OR()

    在学习MySQL手册时,看到根据天数计算访问量时,出现了BIT_COUNT()和BIT_OR()两个函数来处理天数计算的问题 所使用的表格信息如下: mysql> select year,mon ...

  5. Flume Channel

    http://blog.csdn.net/john_f_lau/article/details/20913831 http://dev.cmcm.com/archives/194

  6. ACM1174_爆头解题思路_空间三维坐标求点到直线的距离

    /* 爆头 Description gameboy是一个CS高手,他最喜欢的就是扮演警察, 手持M4爆土匪的头.也许这里有人没玩过CS,有必 要介绍一下“爆头”这个术语:所谓爆头,就是子 弹直接命中对 ...

  7. redis 的基本语法

    Redis::__construct构造函数 $redis = new Redis(); connect, open 链接redis服务 参数 host: string,服务地址 port: int, ...

  8. IOS 创建一张有颜色的UIImage

    #import <UIKit/UIKit.h> @interface UIImage (ImageWithColor) + (UIImage *)imageWithColor:(UICol ...

  9. redis的简单使用

    一.简单使用Jedis 需要Jedis就从Maven获取吧! Maven Pom.xml <dependency> <groupId>redis.clients</gro ...

  10. 【转】invokeRequired属性和 invoke()方法

    C#中禁止跨线程直接访问控件,InvokeRequired是为了解决这个问题而产生的,当一个控件的InvokeRequired属性值为真时,说明有一个创建它以外的线程想访问它. 此时它将会在内部调用n ...