javascript - 有没有办法访问 marko 类中的 "window"和 "document"引用？

Question

我正在使用Marko并且需要访问窗口和视口(viewport)高度。我需要特定 div 的高度和视口(viewport)的高度。这通常是通过类似的东西来实现的

var viewportHeight = window.innerHeight
var elementHeight = document.getElementById("#myDiv").clientHeight

我可以像这样在类中访问window和document吗？

class {
    onCreate(){
        var windowHeight = window.innerHeight
        var elementHeight = document.getElementById("#myDiv").clientHeight
        this.state = { winHeight: winHeight, elemHeight: elementHeight }
    }
}

#myDiv
    p -- ${state.winHeight}
    p -- ${state.elemHeight}

我收到错误:

ReferenceError:文档未定义

引用错误:窗口未定义

在我的标记中访问这些值的最佳方式是什么？

Answer 1

Marko 组件设计为在服务器和浏览器上呈现。因此，在 onCreate(以及 onRender 和 onInput)中访问 window/document )将在这些值不存在的服务器上抛出错误。 此外，在 DOM 节点安装到文档之前，您无法测量它们。

出于这些原因，onMount 可能是放置此逻辑的最佳位置。 onMount 仅在浏览器中且节点存在于 DOM 中后调用。

但这确实意味着您的初始渲染不会完全正确。您可能需要将 state.winHeight 和 state.elemHeight 设置为默认值。初始渲染后，将进行测量，并且您的组件将更新以反射(reflect)新值。

class {
  onCreate() {
    this.state = { winHeight:0, elemHeight:0 }
  }
  onMount() {
    this.state.elemHeight = this.getEl("measure").clientHeight;
    this.state.winHeight = window.innerHeight;
  }
}

<div key="measure">
  <p>Element ${state.elemHeight}!</p>
  <p>Window ${state.winHeight}!</p>
</div>

根据您使用这些值的目的，这可能是可以接受的，并且对于您的用户来说大多不会被注意到。但是，如果更新这些值导致内容明显跳跃，您可能会考虑在这些值不可用时呈现占位符。