javascript - NG1 : Class controller constructor vs $onInit for variable initialization and method bindings

Question

在将这个问题标记为重复之前......我知道你在想什么，这个问题已经被问过无数次了，但不完全是。

我在研究期间从各种来源(包括官方文档、Angular 专家和布道者)了解到，$onInit block 通常保留用于依赖于 Angular 初始化工作/逻辑完成所有绑定(bind)。

然而，变量初始化并不真正符合这个“工作/逻辑”定义。特别是其中没有任何 Angular 逻辑的变量。因此，ES6 构造函数似乎更适合变量初始化。这同样适用于需要词法绑定(bind)回调范围的方法绑定(bind)，如下所示:

class myController() {
  constructor() {
    this.myVariableOne = 1,
    this.myVariableTwo = 2,
    this.myVariableThree = 3;

    this.myMethod = this.myMethod.bind(this);
  }

  $onInit() { }

  myMethod() {
    console.log(this.myVariableOne, this.myVariableTwo, this.myVariableThree);
  }
}

虽然这看起来很好地遵循了做事的“Angular 方式”，只要使用 $onInit block 进行初始化工作/逻辑，我也看到很多人说 Angular Controller 类构造函数应该只用于依赖注入(inject)设置。

所以，这让我很困惑。构造函数似乎是最适合变量初始化和方法绑定(bind)的 block ，而 $onInit 似乎不太适合这个 Angular 色，但我真的不清楚我应该使用什么。有人可以帮我弄清楚我应该把变量定义和方法绑定(bind)放在哪里吗？

Answer 1

这完全取决于这些属性是什么。对于初始静态值(如上面的代码)，构造函数是合适的地方。

$onInit 用于 DOM 和数据绑定(bind)初始化代码，它是 pre-1.5 pre-link 函数的直接对应物。出于可测试性原因，其他初始化代码也可以放在 $onInit 中。

考虑到有一些实例(不是原型(prototype))方法在初始化时被调用:

constructor() {
  this.method = () => ...;
}

$onInit() {
  this.method();
}

可以这样测试

const ctrl = $controller('...');
spyOn(ctrl, 'method').and...;
ctrl.$onInit();
expect(ctrl.method).toHaveBeenCalled();

如果在构造函数中调用它，就不可能监视或模拟它。

这种担忧在更大程度上影响了非模块化 ES5 应用程序，因为它们的方法通常定义为 this.method = ...，而 Controller prototype 不能无法轻松访问，因为无法导入 Controller 构造函数。