从以下几个问题去理解MVC(模型—视图—控制器)的概念:
1、为什么需要MVC?
- 代码规模越来越大,需要将不同的系统功能切分成不同的模块(JS文件),这样有助于让不同的开发人员去实现,简单来说就是切分职责是大势所趋;
- 为了复用公共的模块——很多模块的逻辑是一模一样的;
- 为了后期维护的方便——修改一切功能不影响其他功能。
MVC只是手段,终极目标是模块化和复用!!!要学会区分手段和目的。
2、前端MVC的困难在哪里?
如上图所示,首先浏览器内部会加载JS脚本,然后进行JIT编译执行,在这执行过程中,会给我们带来如上图右边的一些常见的困难:
- 如DOM的操作会受到浏览器加载影响——浏览器在加载脚本时,不同的浏览器会有不同的实现方式,包括加载的顺序以及并发的线程数量都是有不同的;
- 如果模块之间出现依赖关系(JS文件依赖),JS并没有为我们提供现成的解决工具,需要自己手工去解决;
- JS本身的语言机制,例如原型继承,也没有像其他语言有现成的继承工具,需要自己去模拟继承去完成想要的效果;
以上,是所有以JS为基础开发的框架都会面临的问题。
3、AngularJS语境下的MVC是如何实现的?
控制器——Controller
常见的MVC——controller的实现方式1:
控制器和视图进行双向交互,和数据模型也进行双向交互,但视图和模型之间没有双向交互,我们会把多个视图的逻辑控制都放在同一个控制器内,对于小型项目还好,但没办法应对大型项目。
MVC——controller的实现方式2:
改进:一个控制器只跟一个视图进行双向交互,两个视图共用同个数据模型只需在对应的的控制器里管理就好
问题:如果两个视图的控制器里面出现相同的内容,该如何管理?
改进:将公共的部分抽出,生成一个通用控制器,然后继承这个通用控制器,但通常在AngularJS中不建议这样做。
正确的打开方式是:
将通用的部分抽成一个Service,让控制器去调用。
Controller使用过程中的注意点(使用原则):
- 不要试图去复用Controller,一个控制器一般只负责一小块视图——AngularJS的Controller通常处理的是业务逻辑;
- 不要在Controller中操作DOM,这不是控制器的职责——有封装好的操作DOM的机制Directive;
- 不要在Controller里面做数据格式化,ng有很好用的表单控件;
- 不要在Controller里面做数据过滤操作,ng有$fliter服务;
- 一般来说,Controller是不会相互调用的,控制器之间的交互会通过事件进行。
模型——model
AngularJS中使用指令ng-model来生成数据模型,通常是绑定在$scope对象上实现。
视图——View
AngularJS中使用Directive实现视图。
AngularJS的MVC是借助于$scope实现的!!!
点击查看更多内容
13人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦