保持我的代码干燥"$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变量，这是我的观点所特有的。

我该怎么做才能保持干燥？ 创建基类？使用装饰器？

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
});
}
}