Custom Elements 是 Web Components 规范的一部分，它可以让开发者自定义标签，并通过 JavaScript 完成一系列逻辑操作。在 Custom Elements 中，我们可以通过定义一些生命周期钩子函数来响应不同的生命周期事件。其中，AttributeChangedCallback 函数负责监听自定义标签属性的变化，并进行相应处理。不过，在 AttributeChangedCallback 函数中却存在一个神奇的 Bug，即该函数可能会多次执行，这在一些特定场景下会给我们带来不小的麻烦。
Bug 表现
以下是一个简单的 Custom Elements 自定义标签实现示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- -------- ----------- ------- ------ ----------------------- -------- ----- -------- ------- ----------- - ------ --- -------------------- - ------ ---------- - ------------- - -------- - ------------------------------ --------- --------- - ---------------------- ---------- ----- --------- ---------- - - ---------------------------------- ---------- --------- ------- -------展开代码
在上述示例中，我们定义了一个 CustomEl 类，它继承了 HTMLElement 类，并实现了一个 AttributeChangedCallback 函数，该函数用于监视自定义标签的 value 属性变化，并打印出相应的变化信息。
当我们执行上述代码并在浏览器中打开该网页时，会发现控制台输出了两次“Attribute changed: value null ”信息。这就是 AttributeChangedCallback 函数会多次执行的典型表现。
Bug 原因
AttributeChangedCallback 函数会多次执行的原因是因为它与 Custom Elements 中的其他生命周期钩子函数的执行顺序有关。特别是在 CustomEl 类实例初始化阶段时，浏览器在属性变化之前就已经执行了多次构造函数，而且每次构造函数返回的都是不同的 this 对象。因此，当我们在 AttributeChangedCallback 函数中访问 this 对象时，它实际上引用了原型链中的实例，从而导致函数的多次执行。
Bug 解决方案
为了解决 AttributeChangedCallback 函数多次执行的问题，我们需要对代码进行适当的修改。具体来说，我们需要在该函数中增加一个判断，通过比较 oldValue 和 newValue 来避免重复处理。
修改后的代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- -------- --- ---------------- ------- ------ ----------------------- -------- ----- -------- ------- ----------- - ------ --- -------------------- - ------ ---------- - ------------- - -------- - ------------------------------ --------- --------- - -- --------- --- --------- - ---------------------- ---------- ----- --------- ---------- - - - ---------------------------------- ---------- --------- ------- -------展开代码
在上述示例中，我们通过增加一个 if 语句来避免 AttributeChangedCallback 函数的多次执行。该语句会比较 oldValue 和 newValue，只有在它们的值不相等时才执行相应的逻辑操作。
指导意义
AttributeChangedCallback 函数的多次执行是 Custom Elements 中一种常见的 Bug，它可能会在一些特定场景下给我们带来麻烦。为了避免该问题的发生，我们需要在代码中增加相应的判断，以确保仅在属性变化时才执行逻辑操作。此外，我们还可以通过对 Custom Elements 规范的深入学习来更好地理解该问题的本质，从而更加熟练地应用 Custom Elements 来开发高质量的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c509dd6e1fc40e36e3f261
