angular笔记(3)我所理解的MV*

大学里写java web,用过struct2和Hibernate框架,接触了后端MVC;
大四实习的时候自学了nodejs的express框架,并且在此基础上做了我的毕业设计,这也是一个基于MVC的后端框架;
近期工作的这段时间,也在做基于angular的后台的开发和维护。angualr是基于MVVM的前端框架,MVVM是MVC的衍生,把C用VM来替代,但是MVC的原理依旧是可以解释地通的(作者研究过前端设计模式,也有自己的观点,有疑惑请在评论里讨论)。

java开篇
这里的java的设计模式和目前在做java开发的@组长ZJP同学讨论过,用一张图简单地描述下。

java中的MVC

相信了解过MVC的朋友都知道,Model代表数据存储,用来处理数据库相关操作,一般会使用ORM进行封装,降低藕合度。
View代表视图层,在后端渲染的情况下一般是jsp页面,而在前端渲染的情况下,可能是web端或者是客户端的某些页面,用户操作致使View发送request请求。
Control代表控制器,顾名思义,整个流程依赖Control进行控制,所以View中的请求会经过Control处理,然后返回response给View,而view处理的业务逻辑对客户端是不透明的,用户也不用去理会数据库是怎样的操作,所以这些“黑盒”操作都是由后端程序员完成。Control返回的response也有两种方式,像structs2采用的是action跳转,这是一种可以直接返回jsp页面的方式,还有一种是我们熟悉的后端返回json数据的方式。
图中关于Model,引申出了service,在一些不算复杂的框架中,可能就模糊了Model的概念,直接由service处理业务逻辑,框架的选型还是结合业务相关,这里不再赘述。

Nodejs express框架深入
这里选用了我毕设用的目录结构做说明。

1
2
3
4
5
6
7
- db
- admin.js
- user.js
- routers
- loginServer.js(require('../db/user.js'))
- adminServer.js(require('../db/admin.js'))
- app.js

我选用了mongoose包作为中间层,所以很明显可以看出db文件夹下就是ORM,每个单独的js文件代表数据库中的一张表,将数据类型相关以及CRUD操作进行封装,和Model类似,每个单独的js文件类似一个service实现类。
而router是一种路由的概念,每个**Server.js文件代表一个操作,需要调用db中的方法(类似于control调用service完成某个功能)。再划分细一点,router可以把不同请求对应到不同的方法中进行处理,此时router相当于一个过滤器和领路的作用,扩大了control的功能。而这些js文件会返回处理后的response。
app.js是项目启动文件,数据库连接,调用router方法等等,前端所有的请求request都需要经过app.js后,调用模块中的方法进行处理。

终于回到了重点angular
首先也先进行项目目录结构划分

1
2
3
4
5
6
7
8
9
- js
- app.js(root作用,调用service中的数据)
- common.js(factory、service、provider)
- main.js
- router.js(可以直接写路由,也可以通过ui-router这种插件根据状态来改变页面渲染)
- moudules
- moduleName
- ***.html
- ***.js(controller)

这里将页面划分为组件,每个contrller控制一个视图模型。
app.js起到root作用,包含了所有的controller。即这是一个总控制器。
common.js起Modul作用,在angular中有factory、service、contrller三个分类,service通过“构造器”(构造函数)创建,这个构造器即factory,而这些service又可以称为factory的实例化对象(实现类),以对象的形式存在。provider是一种更高级(可以通过config进行配置)的factory,作用也类似。
解释了这么多,再说一下angular的范式要求。在写angular的时候,尽量要将业务逻辑处理放在controller中,尽量不要在controller直接获取数据后处理,应该让service获取接口数据,此时的service相当于Model,这样angular的设计模式就完全和java对应了。

总结
都说angular适合后端程序员,确实总结时候发现了其中的相似之处非常多,当然,学好设计模式,框架什么的都是套路!


angular笔记(3)我所理解的MV*
https://guoningyan.com/2016/08/01/angular笔记(3)我所理解的MV/
作者
Ningyan Guo
发布于
2016年8月1日
许可协议