阅读 Angular 6/RxJS 最新教程,请访问
前端修仙之路
本文基于 Top Common Mistakes of Angular Developers 这篇文章的内容进行整理和扩展,建议有兴趣的读者直接阅读原文。如果你刚接触 Angular,也可以参考一下 Angular 常见问题汇总 这篇文章。
Angular vs Angular 2 vs Angular 4
Angular 1.x 版本统称为 AngularJS,Angular 2+ (4/5) 统称为 Angular。
第三方库的命名也有一定的规则。假设早期版本的命名以 ng-
作为前缀,当 Angular 2 发布后,该库名称会使用 ng2-
作为前缀。但当 Angular 4 发布以后,新的命名规则就随之出现了。新的术语是使用 ngx-
作为前缀,因为 Angular 使用语义版本,每六个月会发布一个新版本。因此,举个例子,当我们把 ng2-bootstrap
更名为 ngx-bootstrap
后,今后就不需要再频繁更换库的名称了。
ngOnChanges vs ngDoCheck
AngularJS 使用 watcher
和 listener
的概念。watcher 是一个函数,返回被监测的值。通常情况下,这些值是对象模型的属性值。但也不总是数据模型的属性 – 我们可以跟踪组件的状态、计算新值等。如果该函数返回的值与前一次的值不一样,Angular 就会调用 listener
,通常它用来更新 UI 状态。
Angular 移除了 watch
和 scope
,现在我们将使用组件的输入属性。除此之外,Angular 为我们提供了 ngOnChanges
生命周期钩子。为了提高变化检测的性能,对于对象比较,Angular 内部直接使用 ===
运算符进行值比较。因此当输入属性是引用类型,当改变对象内部属性时,是不会调用 ngOnChanges
生命周期钩子的。
// JS has NaN !== NaN
export function looseIdentical(a: any, b: any): boolean {
return a === b || typeof a === 'number' && typeof b === 'number'
&& isNaN(a) && isNaN(b);
}
许多开发人员不知道这一点,陷入这个陷阱。为了解决这个问题,有各种解决方案:
- 使用
ngDoCheck
生命周期钩子 - 使用不可变的数据结构
- 把输入对象拆分为多个输入 (即不是直接传递引用对象,而是把内部属性抽离成独立的字段)
- 使用
subscriptions
使用 ngDoCheck
生命周期挂钩是解决此问题的常用方法。当变化检测运行时会自动调用此钩子。在使用此生命周期钩子时,你要小心控制该钩子的内部逻辑,因为通常每分钟会触发多次变化检测 (可以参考下面的源码)。
ngStyle
指令内部也实现了
DoCheck
接口,然后利用
KeyValueDiffer
对象来检测对象的变化 (如内部属性的新增、修改、移除操作)。
// packages/core/src/view/provider.ts
// 变化检测:
// checkAndUpdateView -> Services.updateDirectives(view, CheckType.CheckAndUpdate)
function checkAndUpdateDirectiveInline(
view: ViewData,
def: NodeDef,
v0: any, v1: any, v2: any,
v3: any, v4: any, v5: any,
v6: any, v7: any, v8: any,
v9: any): boolean {
const providerData = asProviderData(view, def.index);
const directive = providerData.instance;
let changed = false;
let changes: SimpleChanges = undefined !;
const bindLen = def.bindings.length;
// 判断输入属性值是否改变,若发生改变则更新changes对象相应的属性。
if (bindLen > 0 && checkBinding(view, def, 0, v0)) {
changed = true;
changes = updateProp(view, providerData, def, 0, v0, changes);
}
// ...
if (bindLen > 9 && checkBinding(view, def, 9, v9)) {
changed = true;
changes = updateProp(view, providerData, def, 9, v9, changes);
}
// 若输入属性发生变化才会调用ngOnChanges生命周期钩子
if (changes) {
directive.ngOnChanges(changes);
}
// 若首次执行变化检测及实现OnInit生命周期钩子,则调用ngOnInit生命周期钩子
if ((view.state & ViewState.FirstCheck) && (def.flags & NodeFlags.OnInit)) {
directive.ngOnInit();
}
// 若实现DoCheck接口,则调用ngDoCheck生命周期钩子
if (def.flags & NodeFlags.DoCheck) {
directive.ngDoCheck();
}
return changed; // 返回SimpleChanges对象
}
未及时释放资源
你可能知道当你订阅 Observable 对象或设置事件监听时,在某个时间点,你需要执行取消订阅操作,进而释放操作系统的内存。否则,你的应用程序可能会出现内存泄露。
@Component({ ... })
export class HeroComponent implements OnInit, OnDestroy {
heroForm: FormGroup;
valueChanges$: Observable;
ngOnInit() {
this.valueChanges$ = this.heroForm.valueChanges.subscribe(...);
}
ngOnDestroy() {
this.valueChanges$.unsubscribe();
}
}
大多数情况下,当你在组件类中执行订阅操作,你可以在 ngOnDestroy
生命周期钩子中,执行取消订阅的操作。
额外取消订阅操作
上面介绍了在某些场景下需要手动执行取消订阅操作,进而释放相应的资源。但有些场景下,无需我们开发者手动执行额外的取消订阅操作。因为在这些场景下,Angular 内部会自动执行取消订阅操作。比如,使用 async
的场景:
@Component({
selector: 'heroes-garden',
template: `<hero [hero]="heroes$ | async"></todos>`
})
export class HeroesGardenComponent implements OnInit, OnDestroy {
heroesChanged$: Observable;
ngOnInit() {
this.heroesChanged$ = this.store.select('heroes');
}
ngOnDestroy() {
this.heroesChanged$.unsubscribe();
}
}
除了使用 async
的场景外,还有以下场景会自动取消订阅:
- Observer.timer(1000).subscribe(…)
- http.get(‘https://segmentfault.com/u/‘).subscribe(…)
- RxJS 中的 take()、takeWhile()、first() 等操作符
若想进一步了解手动释放资源和自动释放资源的场景,可以参考专栏 Angular 中何时取消订阅 这篇文章。
@Component.providers vs @NgModule.providers
分层依赖注入作为 Angular 的新机制的一部分,让我们可以灵活地控制依赖注入。在 AngularJS 中,服务都是单例的,而 Angular 2.x 以上的版本,我们可以多次实例化一个服务。
假设我们已经定义了一个 HeroesService
服务,用来获取英雄信息:
@Injectable()
export class HeroesService {
heroes: Hero[] = [];
constructor(private http: Http) {
this.http.get('http://give-me-heroes.com')
.map(res => res.json())
.subscribe((heroes: Hero[]) => {
this.heroes = heroes;
});
}
getHeroes() {
return this.heroes;
}
}
正如你所见,我们在构造函数中获取英雄的数据,此外我们定义了 getHeroes()
方法,用来获取英雄信息。
现在我们来使用刚创建的 HeroesService
服务:
- 在组件中声明服务
@Component({
selector: 'hero',
template: '...',
providers: [HeroesService]
})
export class HeroComponent {
constructor(private heroesService: HeroesService) {}
}
@NgModule({
declarations: [HeroComponent]
}
export class HeroesModule { ... }
在 HeroComponent
中,我们在 @Component.providers
数组中声明 HeroesService
服务,然后在 HeroComponent
组件类的构造函数中注入该服务。使用这种方式会有问题,每当实例化新的 HeroComponent
组件时,都会创建一个新的 HeroService
实例,这会导致发送多次 Http 请求。
解决上述问题的一种方案是在 @NgModule.providers
中声明服务。
- 在模块中声明服务
@Component({
selector: 'hero',
template: '...'
})
export class HeroComponent {
constructor(private heroesService: HeroesService) {}
}
@NgModule({
declarations: [HeroComponent],
providers: [HeroesService]
}
export class HeroesModule { ... }
采用这种方式的话,对于多个 HeroComponent
组件,HeroesService
服务只会被实例化一次。因为,当在模块中声明 provider
,它所相关的依赖对象,将是单例的,其它的模块都能够使用它。我们不需要通过 @NgModule.exports
数组来导出对应的 provider
,它会被自动导出。
直接操作 DOM
Angular 不再是简单的 Web 框架,Angular 是一个平台,它的一个优点是允许我们将应用程序代码与渲染器分离,从而编写可以在浏览器、服务器上运行的应用程序,甚至可以编写原生应用。
此外解耦后,也为我们提供更多的能力,如使用 AOT (Ahead of time) 或 Web Worker。AOT 意味着在构建阶段进行模板编译,AOT 编译模式的开发流程:
- 使用 TypeScript 开发 Angular 应用
运行 ngc 编译应用程序
- 使用 Angular Compiler 编译模板,一般输出 TypeScript 代码
- 运行 tsc 编译 TypeScript 代码
- 使用 Webpack 或 Gulp 等其他工具构建项目,如代码压缩、合并等
- 部署应用
除此之外 AOT 还有以下优点:
- 在客户端我们不需要导入体积庞大的 angular 编译器,这样可以减少我们 JavaScript 脚本库的大小
- 使用 AOT 编译后的应用,不再包含任何 HTML 片段,取而代之的是编译生成的 TypeScript 代码,这样的话 TypeScript 编译器就能提前发现错误。总而言之,采用 AOT 编译模式,我们的模板是类型安全的。
如果我们现在或将来要使用这种功能,我们需要遵守一定的规则。其中一个规则是不能使用 jQuery,document 对象或 ElementRef.nativeElement 来直接操作 DOM。具体示例如下:
@Component({ ... })
export class HeroComponent {
constructor(private _elementRef: ElementRef) {}
doBadThings() {
$('.bad-with-jquery').click();
this._elementRef.nativeElement.xyz = 'bad with native element';
document.getElementById('bad-with-document');
}
}
如你所见,doBadThings()
方法中有三行代码,这三行代码演示了直接操作 DOM 的三种方式。在 Angular 中我们推荐通过 Renderer2
服务执行 DOM 操作 (Angular 2 中使用 Renderer)。
@Component({ ... })
export class HeroComponent {
constructor(
private _renderer2: Renderer2,
private _elementRef: ElementRef) {}
doGoodThings() {
this._renderer2.setElementProperty(this._elementRef,
'some-property', true);
}
}
上面代码中,我们通过依赖注入方式注入 Renderer2
和 ElementRef
实例,然后在 doGoodThings()
方法中调用 Renderer2
实例提供的 setElementProperty()
方法来设置元素的属性。 此外,为了方便开发者获取视图中的元素,Angular 为我们提供了 @ViewChild
、@ViewChildren
、@ContentChild
和 @ContentChildren
等装饰器。
渲染器是视图层的封装。当我们在浏览器中时,将使用默认渲染器。当应用程序在不同平台 (如 WebWorker ) 上运行时,渲染器将被替换为平台对应的渲染器。此渲染器需要实现 Renderer2
抽象类,并利用 DI (依赖注入) 机制作为默认的 Renderer 对象注入到组件或服务中。
若想深入了解 Angular 渲染器,可以参考专栏 Angular Renderer (渲染器) 这篇文章。
多次声明同一个组件
组件是 Angular 应用程序中的常见构建块。每个组件都需要在 @NgModule.declarations
数组中声明,才能够使用。
在 Angular 中是不允许在多个模块中声明同一个组件,如果一个组件在多个模块中声明的话,那么 Angular 编译器将会抛出异常。例如:
@Component({
selector: 'hero',
template: '...',
})
export class HeroComponent { ... }
@NgModule({
declarations: [HeroComponent]
}
export class HeroesModule { ... }
@NgModule({
declarations: [HeroComponent]
}
export class AnotherModule { ... }
如你所见,HeroComponent
组件在 HeroesModule 以及 AnotherModule 中进行声明。在多个模块中使用同一个组件是允许的。但当这种情况发生时,我们应该考虑模块之间的关系是什么。如果一个模块作为另一个模块的子模块,那么针对上面的场景解决方案将是:
- 在子模块的
@NgModule.declaration
中声明HeroComponent
组件 - 通过子模块的
@NgModule.exports
数组中导出该组件 - 在父模块的
@NgModule.imports
数组中导入子模块
而对于其它情况,我们可以创建一个新的模块,如 SharedModule
模块。具体步骤如下:
- 在 SharedModule 中声明和导出 HeroComponent
- 在需要使用 HeroComponent 的模块中导入 SharedModule
NgModule({
declarations: [HeroComponent],
exports: [HeroComponent]
}
export class SharedModule { ... }
NgModule({
imports: [SharedModule]
}
export class HeroesModule { ... }
@NgModule({
imports: [SharedModule]
}
export class AnotherModule { ... }