亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

AngularJS學習——MVC

標簽:
AngularJS

从以下几个问题去理解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人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
2
獲贊與收藏
70

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消