Web 组件 – 没有框架的 SPA(ß)

mstmahmuda11121

活动 在此步骤中，我们要对按钮的单击事件做出反应以更改组件的值。这可以使用普通的 JavaScript 来完成，就像我们以前所做的那样 在构造函数中，我们通过 querySelector 将一些元素读入影子属性，并将它们的引用存储在关联的属性中。然后我们通过addEventListener为按钮的点击事件添加一个事件监听器，点击时相应地调用增量或减量方法。在这些方法中，我们增加或减少一个值。 我们以 getter 和 setter 的形式映射值本身，这反过来又将当前值保存为组件的 HTML 属性。此外，setter 调用 render 方法，该方法显示 div 中的当前值。当我们在浏览器中试用该组件时，我们可以通过单击按钮来更改内容（图 4）。 图 4：具有值的组件 - Host Europe 博客中有关 Web 组件的博客文章 图：具有值的组件 顺便说一句，我们不一定要将我们的值保存为属性。这里我们使用一种称为“将属性反射到属性”的技术（有时也称为“反射 DOM 属性”）。每个 HTML 元素都有一个 HTML 和一个 JavaScript 状态。


这些不一定必须代表相同的值。对于像数字这样的简单事物，我们可以轻松地将 JavaScript 状态映 瑞士 电话号码 射为 HTML 状态。但是，你必须小心。 JavaScript 属性可以是字符串/数字形式的简单值，也可以是复杂的对象和数组。 HTML 属性只能以字符串的形式表示。换句话说，对于复杂的对象，我们必须将它们映射为 JSON 字符串，这可能会导致性能非常差。 如果我们在index.html中手动设置值，例如通过在浏览器中刷新后，我们会注意到该值尚未显示。如果我们通过 DevTools 更改 HTML 中的值，这同样适用，它不会更改我们的显示。为了实现这一点，我们需要生命周期事件。 生命周期事件 在本节中，我们将了解Web 组件为我们提供的两个最重要的生命周期事件。 connectedCallback 和 attributeChangedCallback。我们在这里看到实现就会被调用。在我们的例子中，我们在这里调用 render 方法，这会导致显示当前值。 一旦 HTML 属性发生更改，就会调用 attributeChangedCallback。此更改可以通过 JavaScript 或 DevTools 进行。




在此回调中，我们首先通过将旧值与新值进行比较来检查值是否已更改。然后我们检查更改后的属性名称是否为 value，然后设置 JavaScript 状态。危险！当同步 JavaScript 和 HTML 状态时，这很快就会导致无限循环。 为了让浏览器也知道应该监视哪些属性以调用哪个 attributeChangedCallback，它需要一个静态 getterobservedAttributes。返回的是一个包含受监视属性名称的数组。 如果我们在浏览器中尝试我们的组件，我们会发现它的行为符合预期。 造型 最后，我们想快速浏览一下样式。通过 CSS 变量，我们已经为至少更改组件的大小创建了一个小的基础。 我们可以在 中轻松定义一个覆盖 CSS 变量的样式在浏览器中，我们获得三个不同大小的计数器组件，每个组件独立工作（图 5）。 图 5：Gestyle 组件 - 博客文章 Web Components 图：Gestyle 组件 结论 借助 Web 组件，我们有一个绝佳的机会在没有框架的情况下创建组件并使用浏览器的本机资源。通过这篇文章，我们慢慢地探讨了 Web 组件的主题，并迈出了实现的第一步。还有许多令人兴奋的事情有待发现，例如自定义事件、CSS 阴影部分或可构造样式表。