[优化] 其余的组件变更检测策略改为onpush以提升组件性能

rdkmaster · Jun 29, 2020 · f3e80d1 · f3e80d1
1 parent 8aece53
commit f3e80d1
Show file tree

Hide file tree

Showing 18 changed files with 314 additions and 124 deletions.
diff --git a/src/jigsaw/common/directive/upload/upload.directive.ts b/src/jigsaw/common/directive/upload/upload.directive.ts
@@ -1,4 +1,16 @@
-import {Component, Directive, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Optional, Output, Renderer2} from "@angular/core";
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Directive,
+    ElementRef,
+    EventEmitter,
+    HostListener,
+    Input,
+    OnDestroy,
+    Optional,
+    Output,
+    Renderer2
+} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {TranslateService} from "@ngx-translate/core";
 import {
@@ -50,7 +62,7 @@ export class JigsawUploadDirective extends JigsawUploadBase implements OnDestroy
     public fileVerify: string;
 
     @Input('uploadAdditionalFields')
-    public additionalFields: {[prop: string]: string};
+    public additionalFields: { [prop: string]: string };
 
     @Input('uploadMinSize')
     public minSize: number;
@@ -235,10 +247,12 @@ export class JigsawUploadDirective extends JigsawUploadBase implements OnDestroy
                         </div>
                     </ng-container>
                 </div>
-                <span *ngIf="removable" class="jigsaw-upload-file-remove fa fa-trash" (click)="uploader?._$removeFile(file)"></span>
+                <span *ngIf="removable" class="jigsaw-upload-file-remove fa fa-trash"
+                      (click)="uploader?._$removeFile(file)"></span>
             </li>
         </ul>
-    `
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JigsawUploadFileInfoList extends AbstractJigsawComponent implements IPopupable {
     public answer: EventEmitter<ButtonInfo>;

diff --git a/src/jigsaw/pc-components/alert/alert.ts b/src/jigsaw/pc-components/alert/alert.ts
@@ -1,4 +1,20 @@
-import { Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, Renderer2, Type, ViewChild, Directive, NgZone } from "@angular/core";
+import {
+    Component,
+    ContentChildren,
+    ElementRef,
+    EventEmitter,
+    Input,
+    NgModule,
+    Output,
+    QueryList,
+    Renderer2,
+    Type,
+    ViewChild,
+    Directive,
+    NgZone,
+    ChangeDetectionStrategy,
+    Injector
+} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {TranslateModule, TranslateService} from "@ngx-translate/core";
 import {
@@ -24,11 +40,14 @@ export enum AlertLevel {
     templateUrl: 'alert.html',
     host: {
         '[class.jigsaw-alert-host]': 'true'
-    }
+    },
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JigsawAlert extends AbstractDialogComponentBase {
-    constructor(protected renderer: Renderer2, protected elementRef: ElementRef, protected _zone: NgZone) {
-        super(renderer, elementRef, _zone);
+    constructor(protected renderer: Renderer2, protected elementRef: ElementRef, protected _zone: NgZone,
+                // @RequireMarkForCheck 需要用到，勿删
+                protected  _injector: Injector) {
+        super(renderer, elementRef, _zone, _injector);
     }
 
     @Output()
@@ -204,7 +223,8 @@ export abstract class JigsawCommonAlert extends DialogBase {
 
 @Component({
     templateUrl: 'common-alert.html',
-    selector: 'jigsaw-info-alert, j-info-alert'
+    selector: 'jigsaw-info-alert, j-info-alert',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JigsawInfoAlert extends JigsawCommonAlert {
     constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef) {
@@ -246,7 +266,8 @@ export class JigsawInfoAlert extends JigsawCommonAlert {
 
 @Component({
     templateUrl: 'common-alert.html',
-    selector: 'jigsaw-warning-alert, j-warning-alert'
+    selector: 'jigsaw-warning-alert, j-warning-alert',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JigsawWarningAlert extends JigsawCommonAlert {
     constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef) {
@@ -289,6 +310,7 @@ export class JigsawWarningAlert extends JigsawCommonAlert {
 @Component({
     templateUrl: 'common-alert.html',
     selector: 'jigsaw-error-alert, j-error-alert',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 
 export class JigsawErrorAlert extends JigsawCommonAlert {
@@ -331,7 +353,8 @@ export class JigsawErrorAlert extends JigsawCommonAlert {
 
 @Component({
     templateUrl: 'common-alert.html',
-    selector: 'jigsaw-confirm-alert, j-confirm-alert'
+    selector: 'jigsaw-confirm-alert, j-confirm-alert',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JigsawConfirmAlert extends JigsawCommonAlert {
     constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef) {

diff --git a/src/jigsaw/pc-components/cascade/cascade.ts b/src/jigsaw/pc-components/cascade/cascade.ts
@@ -1,9 +1,20 @@
 import {
-    AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, NgModule, OnInit, Optional, Output, ViewChild, OnDestroy
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter, Injector,
+    Input,
+    NgModule,
+    OnDestroy,
+    OnInit,
+    Optional,
+    Output,
+    ViewChild
 } from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {TranslateModule, TranslateService} from "@ngx-translate/core";
-import {Observable} from "rxjs";
+import {Observable, Subscription} from "rxjs";
 import {JigsawTabsModule} from "../tabs/index";
 import {JigsawTileSelectModule} from "../list-and-tile/tile";
 import {JigsawTab} from "../tabs/tab";
@@ -15,6 +26,7 @@ import {TranslateHelper} from "../../common/core/utils/translate-helper";
 import {SimpleTreeData, TreeData} from "../../common/core/data/tree-data";
 import {JigsawInputModule} from "../input/input";
 import {JigsawPaginationModule} from "../pagination/pagination";
+import {RequireMarkForCheck} from "../../common/decorator/mark-for-check";
 
 export class CascadeData {
     /**
@@ -78,10 +90,13 @@ export class CascadeTabContentInitData {
     host: {
         '[class.jigsaw-cascade]': 'true',
         '[style.width]': 'width',
-    }
+    },
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JigsawCascade extends AbstractJigsawComponent implements AfterViewInit, OnInit {
-    constructor(private _changeDetectorRef: ChangeDetectorRef) {
+    constructor(private _changeDetectorRef: ChangeDetectorRef,
+                // @RequireMarkForCheck 需要用到，勿删
+                private _injector: Injector) {
         super();
     }
 
@@ -99,11 +114,10 @@ export class JigsawCascade extends AbstractJigsawComponent implements AfterViewI
     /**
      * 生成级联数据的函数，一般用于需要异步加载的数据的生产
      *
-     * @NoMarkForCheckRequired
-     *
      * $demo = cascade/lazy-load
      * $demo = cascade/selected-items
      */
+    @RequireMarkForCheck()
     @Input()
     public dataGenerator: CascadeDateGenerator;
 
@@ -138,7 +152,7 @@ export class JigsawCascade extends AbstractJigsawComponent implements AfterViewI
         return this._data;
     }
 
-    public set data(value: CascadeDateGenerator | SimpleTreeData| TreeData) {
+    public set data(value: CascadeDateGenerator | SimpleTreeData | TreeData) {
         this._data = value;
         if (value instanceof Function) {
             this.dataGenerator = value;
@@ -302,7 +316,7 @@ export class JigsawCascade extends AbstractJigsawComponent implements AfterViewI
         } else {
             this._selectedItems.splice(level, this.selectedItems.length - level, [...selectedItems]);
         }
-
+        this._changeDetectorRef.markForCheck();
         // 多选的tab是级联结束的地方，在这更新选中的数据
         this.selectedItemsChange.emit(this._selectedItems);
     }
@@ -318,6 +332,7 @@ export class JigsawCascade extends AbstractJigsawComponent implements AfterViewI
         } else {
             this._cascading(level + 1, selectedItem);
         }
+        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -331,6 +346,7 @@ export class JigsawCascade extends AbstractJigsawComponent implements AfterViewI
         this._removeCascadingTabs(level);
         this._tabs.selectedIndex = this._tabs.length - 1;
         this._selectedItems = this._selectedItems.slice(0, level);
+        this._changeDetectorRef.markForCheck();
         this.selectedItemsChange.emit(this._selectedItems);
     }
 
@@ -429,7 +445,8 @@ export class JigsawCascade extends AbstractJigsawComponent implements AfterViewI
                          (click)="_$cascade?._selectAll(initData.level)">
                         {{'cascade.all' | translate}}
                     </div>
-                    <j-tile-option *ngFor="let item of _$list; trackBy: _$trackByFn" [value]="item" [width]="initData.optionWidth" (click)="_$handleOptionClick()">
+                    <j-tile-option *ngFor="let item of _$list; trackBy: _$trackByFn" [value]="item"
+                                   [width]="initData.optionWidth" (click)="_$handleOptionClick()">
                         <span [title]="item && item[_$cascade?.labelField] ? item[_$cascade?.labelField] : item">
                             {{item && item[_$cascade?.labelField] ? item[_$cascade?.labelField] : item}}</span>
                     </j-tile-option>
@@ -439,14 +456,19 @@ export class JigsawCascade extends AbstractJigsawComponent implements AfterViewI
                 </div>
             </ng-template>
         </div>
-    `
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class InternalTabContent extends AbstractJigsawComponent implements IDynamicInstantiatable, OnInit, OnDestroy {
     constructor(
         /**
          * @internal
          */
-        @Optional() public _$cascade: JigsawCascade
+        @Optional()
+        public _$cascade: JigsawCascade,
+        private _cdr: ChangeDetectorRef,
+        // @RequireMarkForCheck 需要用到，勿删
+        private _injector: Injector
     ) {
         super();
     }
@@ -482,28 +504,29 @@ export class InternalTabContent extends AbstractJigsawComponent implements IDyna
     /**
      * @internal
      */
+    @RequireMarkForCheck()
     public get _$list() {
         return this._list;
     }
 
     public set _$list(value: any) {
-        if(!value || this._list == value) return;
+        if (!value || this._list == value) return;
         if (value instanceof LocalPageableArray && value.pagingInfo) {
             this._list = value;
-            if(this._removeListRefreshListener) {
+            if (this._removeListRefreshListener) {
                 this._removeListRefreshListener();
                 this._removeListRefreshListener = null;
             }
             // 用于刷新分页
             this._removeListRefreshListener = this._list.onRefresh(this._$updateCurrentPageSelectedItems, this);
-        } else if(value instanceof Array || value instanceof ArrayCollection) {
+        } else if (value instanceof Array || value instanceof ArrayCollection) {
             const data = new LocalPageableArray();
             data.pagingInfo.pageSize = this._$cascade.pageSize;
             data.fromArray(value);
             const removeDataOnRefresh = data.onRefresh(() => {
                 removeDataOnRefresh();
                 this._list = data;
-                if(this._removeListRefreshListener) {
+                if (this._removeListRefreshListener) {
                     this._removeListRefreshListener();
                     this._removeListRefreshListener = null;
                 }
@@ -550,6 +573,8 @@ export class InternalTabContent extends AbstractJigsawComponent implements IDyna
         }
     }
 
+    private _removeFilterSubscribe: Subscription;
+
     /**
      * @internal
      */
@@ -562,12 +587,15 @@ export class InternalTabContent extends AbstractJigsawComponent implements IDyna
         }
         filterKey = filterKey ? filterKey.trim() : '';
         (<LocalPageableArray<any> | PageableArray>this._$list).filter(filterKey, [this._$cascade.labelField]);
+        this._removeFilterSubscribe = (<LocalPageableArray<any> | PageableArray>this._$list).pagingInfo.subscribe(() => {
+            this._cdr.markForCheck();
+        });
     }
 
     private _updateSelectedItemsByCurrent() {
         this._$currentPageSelectedItems = this._$currentPageSelectedItems ? this._$currentPageSelectedItems : [];
         this._$selectedItems = this._$selectedItems ? this._$selectedItems : [];
-        if(this.initData.multipleSelect) {
+        if (this.initData.multipleSelect) {
             this._$selectedItems.push(...this._$currentPageSelectedItems.filter(item =>
                 !this._$selectedItems.some(it => CommonUtils.compareWithKeyProperty(item, it, <string[]>this._$cascade.trackItemBy))));
             const currentUnselectedItems = this._$list.concat().filter(item =>
@@ -577,6 +605,7 @@ export class InternalTabContent extends AbstractJigsawComponent implements IDyna
         } else {
             this._$selectedItems = this._$currentPageSelectedItems;
         }
+        this._cdr.markForCheck();
     }
 
     /**
@@ -586,12 +615,13 @@ export class InternalTabContent extends AbstractJigsawComponent implements IDyna
         this.runMicrotask(() => {
             // 初始化时触发变更检查
             this._$selectedItems = this._$selectedItems ? this._$selectedItems : [];
-            if(this._$list instanceof LocalPageableArray && this._$list.pagingInfo.pageSize != Infinity) {
+            if (this._$list instanceof LocalPageableArray && this._$list.pagingInfo.pageSize != Infinity) {
                 this._$currentPageSelectedItems = this._$selectedItems.filter(item => (<any[]>this._$list).some(it =>
                     CommonUtils.compareWithKeyProperty(it, item, <string[]>this._$cascade.trackItemBy)));
             } else {
                 this._$currentPageSelectedItems = this._$selectedItems;
             }
+            this._cdr.markForCheck();
         });
     }
 
@@ -611,6 +641,7 @@ export class InternalTabContent extends AbstractJigsawComponent implements IDyna
                 });
             })
         }
+        this._cdr.markForCheck();
     }
 
     ngOnInit() {
@@ -635,6 +666,7 @@ export class InternalTabContent extends AbstractJigsawComponent implements IDyna
                 subscriber.unsubscribe();
                 this.callLater(() => {
                     this._$showLoading = false;
+                    this._cdr.markForCheck();
                 }, 300);
             }, () => subscriber.unsubscribe());
         } else if (list instanceof Array) {
@@ -643,10 +675,14 @@ export class InternalTabContent extends AbstractJigsawComponent implements IDyna
     }
 
     ngOnDestroy() {
-        if(this._removeListRefreshListener) {
+        if (this._removeListRefreshListener) {
             this._removeListRefreshListener();
             this._removeListRefreshListener = null;
         }
+        if (this._removeFilterSubscribe) {
+            this._removeFilterSubscribe.unsubscribe();
+            this._removeFilterSubscribe = null;
+        }
     }
 }