前端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. hibernate集合映射inverse和cascade详解

    hibernate集合映射inverse和cascade详解   1.到底在哪用cascade="..."? cascade属性并不是多对多关系一定要用的,有了它只是让我们在插入或 ...

  2. sqlplus 一次奇葩问题 HTTP proxy setting has incorrect value

    y@y:~$ sqlplus Error 46 initializing SQL*PlusHTTP proxy setting has incorrect valueSP2-1502: The HTT ...

  3. Javascript中Function,Object,Prototypes,__proto__等概念详解

    http://anykoro.sinaapp.com/2012/01/31/javascript%E4%B8%ADfunctionobjectprototypes__proto__%E7%AD%89% ...

  4. java classpath import package 机制 @Java的ClassPath, Package和Jar

    java classpath import package 机制   從一個簡單的例子談談package與import機制 基本原則:為什麼需要將Java文件和類文件切實安置到其所歸屬之Package ...

  5. Android_Studio常用插件

    Android studio常用插件,可极大简化开发,增强开发效率. 不懂安装studio插件,看参考博文:android stuido插件安装:http://blog.csdn.net/liang5 ...

  6. PhpForm表单相关的超全局变量操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 选择排序(Selection Sort)

    选择排序就是在选择数组元素上做文章,关键是如何选择?选择的标准是什么?选择之后放在哪?所有这些都是选择排序的问题. 选择排序算法中,通常会有以下操作: 从数组第一个元素开始. 遍历整个数组,找到最小的 ...

  8. nginx、fastCGI、php-fpm关系梳理(转载参考)

    nginx.fastCGI.php-fpm关系梳理 还可以参考:http://www.cnblogs.com/skynet/p/4173450.html   前言: Linux下搭建nginx+php ...

  9. Block 代替for循环

    NSDictionary *aDictionary = [[NSDictionary alloc]initWithObjectsAndKeys:", nil]; [aDictionary e ...

  10. javascript 执行环境,变量对象,作用域链

    前言 这几天在看<javascript高级程序设计>,看到执行环境和作用域链的时候,就有些模糊了.书中还是讲的不够具体. 通过上网查资料,特来总结,以备回顾和修正. 要讲的依次为: EC( ...