如何在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中确实可以工作，但这样写是正确的吗？

- ghiscoding

Answer 1

这是在使用Web API时在Aurelia中的正确方法，所以您现有的代码没有问题。但是，在使用DOM时，您当然也可以使用标准的DOM API，但Aurelia具有平台抽象层（PAL文档），它将为您的应用程序所在的任何平台提供类似于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构建自己的实现，以适应它们框架的结构和最佳实践，但这并不一定是最好的方法。

- Svenskunganka

---

我不得不读两次你的答案才明白我实际上是以正确的方式使用它。你能否重新措辞句子开头使其更加明确…谢谢回答 :) - ghiscoding

这应该被标记为被接受的答案。它高度详细，并且平台抽象层在Aurelia依赖和功能中被内部使用，因为它处理了DOM中大多数事物的特征检测和回退。如果您仅使用document.getElementById或查询事物，则PAL依赖项可能过于繁琐，但对于与事件相关的任何事物并且使用不断发展的标准和其他功能（如Shadow DOM）修改DOM，肯定要使用平台抽象层。 - Dwayne Charrington