Angular框架发展史

前端三大框架vue,angular,react,今天来聊聊Angular发展史。

0.背景

前端开发的基础仍然是HTML+CSS+Javascript。原始的Javascript(以下简称JS)写法是程序员撰写的JS代码和发布版JS基本相同,最多用混淆工具对单个文件做一些混淆处理。这个阶段的JS开发模式是手工+工具。

Jquery的出现让JS在前段开发中重要性大大提高,html和css的所有动态调整都可以由JS完成。但是由于Jquery只是对Javascript的框架封装,开发者的开发模式依然是手工+工具。

Node.js是对JS开发方式的一种重要改进。程序员基于Node.js编译器开发JS代码,开发后的文件由Node.js转换成发布版JS。发布过程中的优化、整合、混淆等等,完全有Node.js编译器完成。至此JS开发进入集成开发环境阶段。

Angular、React、Vue以及很多最新的前端开发框架(包括微信小程序)都是基于Node.js,因此它们都具有Node.js提供的特性。它们也被前端开发工程师形象称为“脚手架”

Angular开发的一个主要特点在于使用Typescript作为开发语言,源码文件以.ts结尾。Typescript是一种Javascript超集,最终也依赖Node.js编译器转化成发布的js文件。个人觉得使用Typescript的一个潜在好处是开发者可以明显的区分开发用的ts和发布的js文件。

1.AngularJS vs Angular

AngularJS指的是早期的Angular版本,就是从2009年诞生的那个版本,那个时候AngularJS版本更新很慢,直到2016年,AngularJS的版本才是1.7*,而在这之后,AngularJS不在继续老版本的更新了,而是推出了一个全新的版本Angular 2,这个版本因为从底层彻底重构了,所以它和之前的AngularJS可以说不是一个框架了,因此,现在人们讨论的Angular一般意义上是指Angular v2及以上版本。它是一种前端应用框架,使用TypeScript语言。第一个版本实际使用Javascript,因此被称为AngularJS。

具体时间线如下:

  • AngularJS 作为最早的版本,AngularJS于2009年开始开发,于2010年发布初始版本。由于Angular 和 AngularJS开发语言不通,Angular JS仍在维护,1.7.5 版本于2018年10月发布。
  • Angualr 2 于2014年十月宣布,于2016年五月推出第一个发布版。该版本不再受JS的作用域、控制器等特性要求,而是使用组件等更适应开发阶段的特性。
  • Angular 4 由于路由包已经占用了版本编号V3.3.0,为了避免混淆,Angular直接从 V2 跳到 V4。第一个发布版于 2017年3月发布,并完全向下兼容 Angular 2。
  • Angular 5 于2017年11月发布。新特性包括支持渐进式网站应用(PWA),并对Material设计框架等有更好的支持。
  • Angular 6 于2018年 5月发布。该版本主要改进了工具链,使其对开发者更加友好。
  • Angular 7 于2018年 10月发布。 该版本同步依赖 Typescript 3.1, RxJS 6.3 和 Node10(兼容 Node8)。
  • Angular 8 于2019年 5月发布。该版本改进了应用程序在现代浏览器上的启动时间,提供了开发 CLI 的新的 API,保持了 Angular 与业界生态和更多新的 Web 标准的同步。
  • Angular 9 于2020年 2月发布。该版本默认情况下将应用程序切换到Ivy编译器和运行时,并引入了改进的组件测试方法。
  • Angular 10 将于2020年6月发布。
  • 具体参考: https://github.com/angular/angular/blob/master/CHANGELOG.md

2.高速发展

Anguar 10马上要发布了,要知道之前用了8年才发布了一个主版本,而现在4年时间已经发布了8个版本。这是因为现在Angular采用了语义本版本控制,每个6个月就会升级一个大版本。

3.三大特性

angular能够高速发展是因为它有三驾马车全力牵引着它。

TypeScript

现在的ts已经成为了各个开发框架的首选的语言。vue3.0也是使用的TypeScript。TypeScript是JS的超集,提供了比js更多的语法特性,具有面向对象的全部特性,非常适合开发大型项目。而Angular就采用了typescript来进行框架的构建,这样使得它的开发迭代变得异常迅猛。

rxjs

它是使用Observables进行响应式编程库,表示我们可以订阅异步数据流。该库提供了内置的运算符,用于观察,转换和过滤流,甚至将多个流组合在一起以一次创建更强大的数据流。Angular将所有信息作为从路由参数到HTTP响应的可观察流处理。

Zone.js

js是异步执行的,当代码很多的时候,如果想要统计执行时间将变得非常困难,而zone.js解决了这些问题,zone.js能实现异步Task跟踪,分析,错误记录、开发调试跟踪等,通过它的钩子,我们只要将函数执行挂在到它的上面,我们就能统计分析函数执行效率。

4.依赖注入,控制反转

软件开发强调低耦合,而依赖注入就是将被依赖的对象(service)实例传递给依赖对象(client)的行为。将被依赖的对象传给依赖者,而不需要依赖者自己去创建或查找所需对象是依赖注入的基本原则。正是这样的设计思想,让angular的各个功能都通过依赖注入,使得代码耦合大大降低。

5.Ivy

它是angular提供的下一代编译和渲染引擎,通过使用Ivy,我们AOT编译速度将得到大幅度提升。代码将变得更加简洁,代码将会得到大幅压缩,而这也是Angular 9默认开启的,当然,如果你不想使用这个引擎的话,也可以进行关闭。

AngularJS在文件上传前判断文件大小,并且进行超限提示

废话不说,直接上代码:
html代码,兼容移动端浏览器:

	<input type="file" name="and_file_head" id="and_file_head" accept="image/*" capture="camera" style="display: none;">
	<input type="file" name="file_head" id="file_head" accept="image/*" style="display: none;" />

继续阅读“AngularJS在文件上传前判断文件大小,并且进行超限提示”