angular综述

三大框架唯有angular是真的框架,最重最不自由,选择angular的一般是企业级应用。angular借鉴了很多后端思想,通常使用ts开发。

一、继承自angularjs的思想:

1、模版编译:数据绑定与指令系统都是基于对模版(html)的编译,angular将自己认识的符号(变量、指令)进行翻译,变量的话取出相应的值,指令则转换为相应的js(ts)操作。
1)数据绑定,这是MV分离的核心,编译就是把model与view关联的过程,这种分离使得开发者专注于model。
2)指令系统,angular(js&2+)都提供了自带的指令,也允许自定义指令,指令系统使开发者以声明式编程的思想开发,命令式编程是自给自足,比如我要做宫保鸡丁,我需要去市场买鸡肉、胡萝卜,回家切菜、开火、炒,盛到盘子,吃;声明式编程是把这种通用行为抽取给外卖,打电话说我要一份宫保鸡丁,外卖送到家门口,吃。声明式编程让开发变得简洁明了,如果鸡丁不好吃,问题一定出在外卖公司不是我,我的目的就是填饱肚子,把与我无关的业务抽取到别处,本质上也是一种解耦、复用的思想。

2、脏值检测:数据绑定,编译过程对数据进行绑定后如何实时随着model进行变化呢,这就需要对model进行检测,检测是两个问题,一是何时进行检测,二是如何进行检测。
1)何时检测,基本思想是发生异步事件时进行检测,同步监测没有意义,直接取最终值现实就行了,同步过程没有可察觉的时间间隔。angular采用zone.js(另文介绍zone.js)对所有的异步事件进行检测,一旦发生任何异步,就沿着组件树(类似冒泡反过程,也就是分发)去检测绑定的数据;另一种方法是将所有的绑定数据变为Observable(Rxjs)类型,并不是发生一切异步事件就立即进行检测,在变量上进行subscribe,当新值到来时才去触发detector进行检测,这将大大提高检测效率,为什么angular不直接使用第二种方式呢,应该就是因为Rxjs的学习成本过高,不利于angular的推广。
2)如何检测,旧的值存放起来,发生检测时对比当前值与存储值是否不同,不同的话更新view。

3、依赖注入:依赖注入的思想另一篇详细阐述过,本质就是解耦,这是借鉴自后端的思想,在angular中依赖注入的应用主要是单例的service。

二、angular2+思想:

4、体系结构:angular采用了模块的组织方式,angular的模块体系与ts(es6)的模块概念完全不同,两者是相互补充的,angular有自己的逻辑,在一个模块中包含模块、组件、服务、指令,模块是一个装饰器函数。正是因为angular提供了复杂的模块逻辑,angular的编译过程也遵循其设计逻辑,所以angular才能够称得上是一个真正的框架,开发者要约束在框架的结构中,失去自由的同时获得了更规范的组织,使代码变得更加可靠(所谓失去自由是指一切要按angular的规则来,需要抛弃过往写前端的思想,另外两个框架失去的自由相对较少,可以掺杂进更多传统的前端风格,而所谓更可靠指的是应用体系复杂后整个工程不会变的混乱难以维护,出了问题容易排查、新的功能容易扩展)
1)declarations声明本模块拥有的视图类(组件、指令、管道),这些视图类是在这个模块中实现的,能够在模块内互相调用。
2)exports,一方面可以是declarations的子集,其他模块可以使用的本模块的视图类,当一个视图类被exports时,其他模块imports这个模块后将不必通过ts(es6)import这个模块文件了,同样也可以exports其他的module,对于需要imports的当前模块,如果这个module还引用了其他module,那么angular并不会自动暴露那个模块内被imports的模块所暴露出来的成员,需要在exports中暴露这个被引用的module,另外看angular的源码,只要在当前module中ts级import了某个module,就可以直接在angular级别exports。
3)imports,只需要imports其他的模块,angular是模块级别的相互引用。
4)providers提供模块内的service,service不能export,也确实没有export的逻辑性。

三、angular2+的前后端请求:

5、最传统的前后端请求是ajax,原生的是浏览器提供的XHR对象,jquery这样的库与angular这样的框架都对原生XHR进行了封装。另一种是fetch,这是浏览器级别的API,天然支持跨域。很少有使用传统ajax请求的框架了,无论传统的ajax请求还是fetch,都是以新的面目呈现出来的,他们在使用上或者表现为Rxjs的Observable或者表现为es6天然支持的Promise,而这两者又是类似的,因此可以讨论Observable的使用,Observable返回一个对象,对象可以订阅,订阅函数中进行后续操作,而以往的ajax是将后续操作放进了回调函数中,这样回调地狱得以避免,数据会随着Observable对象传递走,把数据获取代码与数据处理代码分离开。