Angular 初认识

从 2.0 开始 Angular.js 已经不叫 AngularJS 了,就叫 Angular(少了.js)只是版本号是 2.x。而日常我们为了区别 Angular.js 1.x 和 Angular 的 2.x 的版本,称之为 Angular2。

以下我们将 Angular 1.x 版本称之为 AngularJS,Angular 2.x 以上的版本称之为 Angular。

1. AngularJS

优点

  • 模版功能强大丰富

  • 比较完善的前端 MVC 框架

AngularJS 包含了「模版」、「双向数据绑定」、「路由」、「模块化」、「服务」、「过滤器」、「依赖注入」等功能,提供了基本所有的 web 开发所需要的工具。

相对于只关注某一方面的框架来说,AngularJS 只需要一个框架就能完成所有功能。

  • 比较大胆地引入了 Java 的一些概念

比如「依赖注入」、「单元测试」等,能够很容易地写出可复用的代码。

缺点

  • 性能

这里必须要提到的就是「双向数据绑定」,双向数据绑定可谓是一把双刃剑。

JavaScript 并没有监控变量改变的功能,因此为了实现双向数据绑定的功能,AngularJS 使用的是 Dirty Checking(脏值检查)。在 AngularJS 作用域中,任何的操作都可以引发 Dirty Checking。随着注册的变量越来越多,性能也会随之降低。

相比于 AngularJS,Angular 废弃了该做法,双向绑定不再是默认写法,而改为了单向绑定方式。

其次,整个检查机制进行了重写,性能得到提升。

  • 路由

AngularJS 中用于路由功能的 ng-view 指令只能有一个,不能嵌套多个视图。虽然第三方模块 UI-Router 可以解决这一问题,但是对 url 的控制也并不够灵活,必须是嵌套模式才可以。

相比于 AngularJS,Angular 将路由模块作为核心模块进行巨大的提升。

  • 作用域

AngularJS 中,作用域的概念非常重要。作用域 执行环境和浏览器的 隔离开,所有的原生事件在 AngularJS 的作用域都无法得到响应。例如,无法使用 click 事件,选择框的 select 事件,而必须用 ng-click 的 AngularJS 事件来代替。如果要使用原生事件,必须使用 $scope.$apply() 的方式告诉浏览器数据有了更新,然后更新 UI。

相比于 AngularJS,Angular 废弃了 $scope。任何原生的事件都可以直接进行绑定和处理。

  • 表单验证

AngularJS 中,错误验证信息功能相对薄弱,需要写很多模版标签才来完成该项功能。

相比于 AngularJS,Angular 提供了一套全新的模版 API。尤其是「响应式表单」,非常方便地进行复杂的校验和显示错误信息。

  • JavaScript 语言

没有类型系统,面向对象开发的能力很差。

相比于 AngularJS,Angular 使用了 TypeScript 语言进行开发,它具有很完善的类型系统。在编译阶段解决 bug,减少运行时的 bug。配套的 IDE 可以提供更好的代码提示和更快的性能。

  • 学习成本高

如果学习 AngularJS,可能要学习很多东西,它并没有一个核心的概念。
例如,React 最核心的概念就是虚拟 DOM,但是很难在 AngularJS 中提出一个很核心的东西。

相比于 AngularJS,Angular 的核心概念就是组件,所有的东西都是为组件而服务的。

Angular 的组件非常容易编写,类似于 React 的 jsx。

2. Angular

在 Angular 2.x 版本中,AngularJS 的所有优点都被继承下来。另外还提供了一些新特性:

  • 全新的命令行工具 AngularCLI

  • 服务器端渲染

    • 提高了渲染时间
    • 为单页应用(SPA)提供了 SEO 功能,针对不同的视图提供 SEO
  • 移动和桌面兼容

    • 官方的 UI 库 Angular Metro

3. AngularJS 架构

AngularJS

Angular

Angular 采用了完全不同的架构,整个应用就是一个组件树。用户看到的页面是由组件树被激活的组件构成的。

从一个组件路由到另一个组件,路由到另一个组件上,由于被激活的组件不同,因此用户看到的页面也是不相同的。

用户可以与某个组件进行交互,完全由组件进行处理。组件可以通过依赖注入的方式引入服务,并用服务处理用户的操作或实现与服务器的通讯。

3. Angular、React 和 Vue 的对比

3.1 与 React 对比

  • 速度

React 采用虚拟 DOM 的方式处理 DOM,React 只会在 setState 时更新 DOM。更新时,先更新虚拟 DOM,与实际 DOM 比较后再更新实际的 DOM。

这一过程保证更新次数少、内容少,大大提高了性能。

而 Angular 中采用了类似的方法,实现了新的变更检测算法,速度上可与 React 相比较。

  • FLUX 架构

数据的单向更新

React 可以直接使用 ES6 语法,webpack 的工具编译成浏览器识别的 JavaScript,这些是以前 Angular 所不具备的。

但是 Angular 已经完全实现了。

  • 服务器渲染

单页应用对搜索引擎优化是有限制的,React 的解决方案在服务器上预渲染应用再发送到客户端的,恢复一样的纪录到动态应用程序中。

搜索引擎的爬虫依赖于服务器的响应,而不是 JavaScript 的执行。

目前 Angular 也支持服务器渲染。

3.2 与 Vue 对比

  • 简单

vue 的目标是用尽可能少的代码实现数据绑定和组合的视图组件,vue 是由国内团队开发的,中文文档非常完善,很容易上手。

  • 灵活

vue 官方提供了一个构建工具协助构建,但是不限制如何构建。

而 AngularCLI 包办了所有非开发工作,包括编译、构建等。

不过喜欢哪一种因人而异。

  • 性能

vue 尺寸很小,类似 React 的方式来处理组件,响应速度较快。vue 框架只有 10+k 大小,而 Angular 基本框架有 50+k。

  • 其他

vue 个人主导的项目,而 Angular 是 Google 团队项目,在世界范围内有庞大的社区和生态环境。

vue 只关注 web,而 Angular 不仅可以开发 web 项目,也可以配合 iOS 等客户端开发。

vue 只能通过第三方库或服务实现 SEO,而 Angular 提供官方的服务器端渲染支持,可以解决 vue 这种纯前端框架无法解决的痛点。