如何访问 Aurelia 中的 Window 和 Document 对象？

Question

在ES6 / Aurelia 框架中访问Document 和Window 对象的最佳方式是什么？我确实尝试在我的 Aurelia 代码中直接访问 window，它似乎确实有效，但这是正确的方法还是有 Aurelia/ES6 的方法？

具体来说，我想访问像window.localStorage 和window.sessionStorage 这样的属性。我刚开始使用 Aurelia 和 ES6，所以虽然我想遵循标准，但我对如何做到这一点有点小白。

类似于以下内容：

constructor() {
    this.user = JSON.parse(window.sessionStorage.user || window.localStorage.user);
}

该代码实际上在 Aurelia 中工作，但这样编写是否正确？

Answer 1

这是在 Aurelia 中使用 Web API 时执行此操作的正确方法，因此您可以使用当前拥有的代码。

但是，在使用 DOM 时，您当然也可以使用标准 DOM API，但 Aurelia 有一个平台抽象层 (PAL docs)，它将使用类似 DOM 的 API 抽象您的应用程序所在的任何平台。

例如，document.getElementById 的等价物是

import {inject} from 'aurelia-framework'
import {DOM} from 'aurelia-pal'

@inject(DOM)
export class Home {
  constructor(DOM) {
    this.DOM = DOM
  }

  attached() {
    let element = this.DOM.getElementById('someId')
  }
}

不幸的是，PAL 目前并没有真正做太多，但在未来计划允许您使用日常 DOM API 调用，即使您的应用程序可能不是在“正常”DOM 中运行。

不要忘记的一件非常重要的事情是，原生 DOM 和 Web API 非常强大，使用它们的原生实现没有任何问题。其他框架倾向于围绕 Web API 构建自己的实现，这些实现是针对其框架的结构和最佳实践量身定制的，但这不一定是最好的。