剖析Angular Component的源碼示例

2019-11-19 14:06:59

字體：大中小

供稿：網(wǎng)友

Web Component

在介紹Angular Component之前，我們先簡單了解下W3C Web Components

定義

W3C為統(tǒng)一組件化標(biāo)準(zhǔn)方式，提出Web Component的標(biāo)準(zhǔn)。

每個組件包含自己的html、css、js代碼。
Web Component標(biāo)準(zhǔn)包括以下四個重要的概念：
1.Custom Elements（自定義標(biāo)簽）：可以創(chuàng)建自定義 HTML 標(biāo)記和元素；
2.HTML Templates（HTML模版）：使用 <template> 標(biāo)簽去預(yù)定義一些內(nèi)容，但并不加載至頁面，而是使用 JS 代碼去初始化它；
3.Shadow DOM（虛擬DOM）：可以創(chuàng)建完全獨立與其他元素的DOM子樹；
4.HTML Imports（HTML導(dǎo)入）：一種在 HTML 文檔中引入其他 HTML 文檔的方法，<link rel="import" href="example.html" rel="external nofollow" />。

概括來說就是，可以創(chuàng)建自定義標(biāo)簽來引入組件是前端組件化的基礎(chǔ)，在頁面引用 HTML 文件和 HTML 模板是用于支撐編寫組件視圖和組件資源管理，而 Shadow DOM 則是隔離組件間代碼的沖突和影響。

示例

定義hello-component

<template id="hello-template">  <style>    h1 {      color: red;    }  </style>  <h1>Hello Web Component!</h1></template><script>  // 指向?qū)胛臋n，即本例的index.html  var indexDoc = document;  // 指向被導(dǎo)入文檔，即當(dāng)前文檔hello.html  var helloDoc = (indexDoc._currentScript || indexDoc.currentScript).ownerDocument;  // 獲得上面的模板  var tmpl = helloDoc.querySelector('#hello-template');  // 創(chuàng)建一個新元素的原型，繼承自HTMLElement  var HelloProto = Object.create(HTMLElement.prototype);  // 設(shè)置 Shadow DOM 并將模板的內(nèi)容克隆進(jìn)去  HelloProto.createdCallback = function() {    var root = this.createShadowRoot();    root.appendChild(indexDoc.importNode(tmpl.content, true));  };  // 注冊新元素  var hello = indexDoc.registerElement('hello-component', {    prototype: HelloProto  });</script>

使用hello-component

<!DOCTYPE html><html lang="zh-cn"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="author" content="賴祥燃, laixiangran@163.com, http://www.laixiangran.cn"/>  <title>Web Component</title>  <!--導(dǎo)入自定義組件-->  <link rel="import" href="hello.html" rel="external nofollow" ></head><body>  <!--自定義標(biāo)簽-->  <hello-component></hello-component></body></html>

從以上代碼可看到，hello.html 為按標(biāo)準(zhǔn)定義的組件（名稱為 hello-component ），在這個組件中有自己的結(jié)構(gòu)、樣式及邏輯，然后在 index.html 中引入該組件文件，即可像普通標(biāo)簽一樣使用。

Angular Component

Angular Component屬于指令的一種，可以理解為擁有模板的指令。其它兩種是屬性型指令和結(jié)構(gòu)型指令。

基本組成

@Component({  selector: 'demo-component',  template: 'Demo Component'})export class DemoComponent {}

組件裝飾器：每個組件類必須用@component進(jìn)行裝飾才能成為Angular組件。
組件元數(shù)據(jù)：組件元數(shù)據(jù)：selector、template等，下文將著重講解每個元數(shù)據(jù)的含義。
組件類：組件實際上也是一個普通的類，組件的邏輯都在組件類里定義并實現(xiàn)。
組件模板：每個組件都會關(guān)聯(lián)一個模板，這個模板最終會渲染到頁面上，頁面上這個DOM元素就是此組件實例的宿主元素。

組件元數(shù)據(jù)

自身元數(shù)據(jù)屬性

名稱	類型	作用
animations	AnimationEntryMetadata[]	設(shè)置組件的動畫
changeDetection	ChangeDetectionStrategy	設(shè)置組件的變化監(jiān)測策略
encapsulation	ViewEncapsulation	設(shè)置組件的視圖包裝選項
entryComponents	any[]	設(shè)置將被動態(tài)插入到該組件視圖中的組件列表
interpolation	[string, string]	自定義組件的插值標(biāo)記，默認(rèn)是雙大括號
moduleId	string	設(shè)置該組件在 ES/CommonJS 規(guī)范下的模塊id，它被用于解析模板樣式的相對路徑
styleUrls	string[]	設(shè)置組件引用的外部樣式文件
styles	string[]	設(shè)置組件使用的內(nèi)聯(lián)樣式
template	string	設(shè)置組件的內(nèi)聯(lián)模板
templateUrl	string	設(shè)置組件模板所在路徑
viewProviders	Provider[]	設(shè)置組件及其所有子組件（不含ContentChildren）可用的服務(wù)

從 core/Directive 繼承

名稱	類型	作用
exportAs	string	設(shè)置組件實例在模板中的別名，使得可以在模板中調(diào)用
host	{[key: string]: string}	設(shè)置組件的事件、動作和屬性等
inputs	string[]	設(shè)置組件的輸入屬性
outputs	string[]	設(shè)置組件的輸出屬性
providers	Provider[]	設(shè)置組件及其所有子組件（含ContentChildren）可用的服務(wù)（依賴注入）
queries	{[key: string]: any}	設(shè)置需要被注入到組件的查詢
selector	string	設(shè)置用于在模板中識別該組件的css選擇器（組件的自定義標(biāo)簽）

幾種元數(shù)據(jù)詳解

以下幾種元數(shù)據(jù)的等價寫法會比元數(shù)據(jù)設(shè)置更簡潔易懂，所以一般推薦的是等價寫法。

inputs

@Component({  selector: 'demo-component',  inputs: ['param']})export class DemoComponent {  param: any;}

等價于：

@Component({  selector: 'demo-component'})export class DemoComponent {  @Input() param: any;}

outputs

@Component({  selector: 'demo-component',  outputs: ['ready']})export class DemoComponent {  ready = new eventEmitter<false>();}

等價于：

@Component({  selector: 'demo-component'})export class DemoComponent {  @Output() ready = new eventEmitter<false>();}

host

@Component({  selector: 'demo-component',  host: {    '(click)': 'onClick($event.target)', // 事件    'role': 'nav', // 屬性    '[class.pressed]': 'isPressed', // 類  }})export class DemoComponent {  isPressed: boolean = true;  onClick(elem: HTMLElement) {    console.log(elem);  }}

等價于：

@Component({  selector: 'demo-component'})export class DemoComponent {  @HostBinding('attr.role') role = 'nav';  @HostBinding('class.pressed') isPressed: boolean = true;   @HostListener('click', ['$event.target'])  onClick(elem: HTMLElement) {    console.log(elem);  }}

queries - 視圖查詢

@Component({  selector: 'demo-component',  template: `    <input #theInput type='text' />    <div>Demo Component</div>  `,  queries: {    theInput: new ViewChild('theInput')  }})export class DemoComponent {  theInput: ElementRef;}

等價于：

@Component({  selector: 'demo-component',  template: `    <input #theInput type='text' />    <div>Demo Component</div>  `})export class DemoComponent {  @ViewChild('theInput') theInput: ElementRef;}

queries - 內(nèi)容查詢

<my-list>  <li *ngFor="let item of items;">{{item}}</li></my-list>

@Directive({  selector: 'li'})export class ListItem {}

@Component({  selector: 'my-list',  template: `    <ul>      <ng-content></ng-content>    </ul>  `,  queries: {    items: new ContentChild(ListItem)  }})export class MyListComponent {  items: QueryList<ListItem>;}

等價于：

@Component({  selector: 'my-list',  template: `    <ul>      <ng-content></ng-content>    </ul>  `})export class MyListComponent {  @ContentChild(ListItem) items: QueryList<ListItem>;}

styleUrls、styles

styleUrls和styles允許同時指定。

優(yōu)先級：模板內(nèi)聯(lián)樣式 > styleUrls > styles。

建議：使用styleUrls引用外部樣式表文件，這樣代碼結(jié)構(gòu)相比styles更清晰、更易于管理。同理，模板推薦使用templateUrl引用模板文件。

changeDetection

ChangeDetectionStrategy.Default：組件的每次變化監(jiān)測都會檢查其內(nèi)部的所有數(shù)據(jù)（引用對象也會深度遍歷），以此得到前后的數(shù)據(jù)變化。

ChangeDetectionStrategy.OnPush：組件的變化監(jiān)測只檢查輸入屬性（即@Input修飾的變量）的值是否發(fā)生變化，當(dāng)這個值為引用類型（Object，Array等）時，則只對比該值的引用。

顯然，OnPush策略相比Default降低了變化監(jiān)測的復(fù)雜度，很好地提升了變化監(jiān)測的性能。如果組件的更新只依賴輸入屬性的值，那么在該組件上使用OnPush策略是一個很好的選擇。

encapsulation

ViewEncapsulation.None：無 Shadow DOM，并且也無樣式包裝。

ViewEncapsulation.Emulated：無 Shadow DOM，但是通過Angular提供的樣式包裝機制來模擬組件的獨立性，使得組件的樣式不受外部影響，這是Angular的默認(rèn)設(shè)置。

ViewEncapsulation.Native：使用原生的 Shadow DOM 特性。

生命周期

當(dāng)Angular使用構(gòu)造函數(shù)新建組件后，就會按下面的順序在特定時刻調(diào)用這些生命周期鉤子方法：

生命周期鉤子	調(diào)用時機
ngOnChanges	在ngOnInit之前調(diào)用，或者當(dāng)組件輸入數(shù)據(jù)（通過@Input裝飾器顯式指定的那些變量）變化時調(diào)用。
ngOnInit	第一次ngOnChanges之后調(diào)用。建議此時獲取數(shù)據(jù)，不要在構(gòu)造函數(shù)中獲取。
ngDoCheck	每次變化監(jiān)測發(fā)生時被調(diào)用。
ngAfterContentInit	使用
ngAfterContentChecked	ngAfterContentInit后被調(diào)用，或者每次變化監(jiān)測發(fā)生時被調(diào)用（只適用組件）。
ngAfterViewInit	創(chuàng)建了組件的視圖及其子視圖之后被調(diào)用（只適用組件）。
ngAfterViewChecked	ngAfterViewInit，或者每次子組件變化監(jiān)測時被調(diào)用（只適用組件）。
ngOnDestroy	銷毀指令/組件之前觸發(fā)。此時應(yīng)將不會被垃圾回收器自動回收的資源（比如已訂閱的觀察者事件、綁定過的DOM事件、通過setTimeout或setInterval設(shè)置過的計時器等等）手動銷毀掉。