Javascript 如何使用vanilla JS实现可维护的反应式UI

今天，我遇到了一个问题，可以通过使用反应式和状态管理的框架（如Vue）轻松解决。可悲的是，使用它是不可能的

以下（简化的）情况（）：我们有一个服务器呈现的页面，其中有一个price字段。它有机会添加或删除注释。如果我们添加一个注释，它将被发布到服务器上，用户界面应该会自我更新。删除便笺的方法相同

const priceField=document.getElementById（“priceField”）；
priceField.querySelector（“创建注释btn”）.addEventListener（“单击”，（）=>{
priceField.querySelector（“注释输入行”）.classList.toggle（“隐藏”）；
//根据状态，创建注释btn可以隐藏/显示注释行或节点输入行
});
priceField.querySelector（“#提交注释btn”）.addEventListener（“单击”，（）=>{
priceField.querySelector（“注释行”）.classList.toggle（“隐藏”）；
priceField.querySelector（“注释输入行”）.classList.toggle（“隐藏”）；
常量输入=priceField.querySelector（“输入”）.value；
priceField.querySelector（“#note”）.innerHTML=input；
//api调用
//进一步的ui更新，如更改#创建便笺btn的图标
});
priceField.querySelector（“删除注释btn”）.addEventListener（“单击”，（）=>{
priceField.querySelector（“注释行”）.classList.toggle（“隐藏”）；
//api调用
//重置#创建便笺btn的图标
});
//更多的逻辑和额外的UI更新操作，如重新计算价格等。

。隐藏{
显示：无；
}

100 €
创建注释
提交
占位符注释
删除注释

我按照自己的想法，使用

呈现

-函数实现了内部状态，该函数保存了所有与UI相关的更改

const RenderMode = {
  INITIAL: "Initial",
  CREATE: "Create",
  OPEN: "Open",
  SHOW_NOTE: "Show note input",
  TOGGLE_PRICE: "Toggle price input",
};

render() {
    switch (this.renderMode) {
      case RenderMode.INITIAL:
        this._hideIndicatorIcon();
        this._hideIndicatorRow();
        this._hideInputRow();
        this._hidePriceInput();

        break;
      case RenderMode.CREATE:
        this._showInputRow();
        break;
      case RenderMode.OPEN:
        this._showIndicatorIcon();
        this._hideInputRow();
        this._hideIndicatorRow();
        break;
      case RenderMode.SHOW_NOTE:
        this._showIndicatorRow();
        break;
      case RenderMode.TOGGLE_PRICE:
        this._togglePriceInputs();
        break;
      default:
        console.error("No render mode defined!");
    }

页面重新加载后的状态由服务器端呈现的html的自定义属性确定：

  initializeRenderMode() {
    ...
    // if note already exists on page load switch render mode to open
    this.renderMode = existingNote ? RenderMode.OPEN : RenderMode.INITIAL;
    this._render();
  }

---

到目前为止，这不是最好的解决方案，但它帮助我保持简单。

相关CSS技巧文章：我已经偶然发现了这篇文章，但它似乎有点复杂，特别是对于像我这样的新手。我明白了。这有点复杂。但这就是你想要的功能，对吗？目前，由于页面重新加载，它处于失去状态，但基本上是的。这太广泛了。