javascript - 保持 `$onInit` 和 `$onChanges` 方法的代码干燥

Question

我有一段代码在几乎所有组件中都重复:

import {deviceCommands} from "../../../core/data/Commands";


let _generalProperties = {
    'deviceName': deviceCommands.NAME.key,
    'deviceModel': deviceCommands.MODEL.key
};

export default class GeneralDeviceSettingsCtrl {
    constructor($scope) {
        let $ctrl = this;
        $ctrl.$onChanges = function (changes) {
            for(let prop in _generalProperties) {
                $ctrl[prop] = $ctrl.test.vm.data[_generalProperties[prop]];
            }
        };

        $ctrl.$onInit = function () {
            for(let prop in _generalProperties) {
                $scope.$watch(() => $ctrl.test.vm.data[_generalProperties[prop]],
                    (newValue, oldValue) => {
                        if (newValue !== oldValue) {
                            $ctrl[prop] = $ctrl.test.vm.data[_generalProperties[prop]];
                        }
                    });
            }
        };
    }
}

唯一不同的是 _generalProperties 变量，它是特定于我的 View 的。

我怎样才能保持干燥？做一个基类？使用装饰器？

Answer 1

我认为有很多不同的方法可以实现这一点，但如果您坚持使用类和继承，您可以向父构造函数提供 _generalProperties 并重用整个实现。

例如:

export class BaseSettingsComponent {
    constructor(properties){
        this._properties = properties;
    }

    $onInit(){ /* ... implement base component stuff*/ }
}

然后，在使用相同组件逻辑的每个页面上，您可以扩展基类，向父类提供属性并让基类完成这项工作。

import { BaseSettingsComponent } from '../common/base-settings-component.js';

let _generalProperties = {
    'deviceName': deviceCommands.NAME.key,
    'deviceModel': deviceCommands.MODEL.key
};

export class GeneralDeviceSettingsCtrl extends BaseSettingsComponent {
    constructor(){
        super(_generalProperties);
    }

    $onInit(){ super.$onInit(); /* ... implement base component stuff*/ }
}

使用此方法时要记住的重要一件事是，如果您需要在子类上实现 $onInit 或 $onChanges，则必须调用super.$onInit() 否则，您会因覆盖而丢失父级行为。

最后，为了获得更简洁的代码，您还可以放弃 _generalProperties 的声明，将其直接提供给 super 构造函数。

import { BaseSettingsComponent } from '../common/base-settings-component.js';

export class GeneralDeviceSettingsCtrl extends BaseSettingsComponent {
    constructor(){
        super({
            'deviceName': deviceCommands.NAME.key,
            'deviceModel': deviceCommands.MODEL.key
        });
    }
}