个人中心
gpt4 book ai didi

javascript - 通过元素的属性检测元素的属性变化 - JavaScript

转载 作者：行者123 更新时间：2023-11-30 11:16:57 27 4
gpt4 key购买 nike

我想知道是否有可能通过元素的属性来检测对元素所做的属性更改。

例如，我们可以通过使用 HTMLElement.prototype 对象及其继承的原型(prototype)向元素添加可继承的属性和方法，例如:

// Add our global property
HTMLElement.prototype.sandwich = 'double-decker variety';

// Get the <body> element
let body = document.body;
body.sandwich // => 'double-decker variety'

那么，有没有办法将其扩展到元素属性？

或者我应该改为处理 Attr.prototype 对象吗？

// Add our global property
Object.defineProperty(HTMLElement.prototype, 'burger', {
    ...,
    set: function changeBurger(newValue) {
        // Our response
        console.log(`Response: You changed our '${oldValue}' burger to a '${newValue}'`)
    }
});

// Get the <body> element
let body = document.body;

// Response: You changed our 'king-sized' burger to a 'family pack'
body.burger = 'family pack';

// Response: You changed our 'family pack' burger to a 'kids delight'
body.setAttribute('burger', 'kids delight');

上面的示例也应该适用于不在 DOM 或当前文档中的元素，即:从 HTMLElement 构造函数初始化的对象。

如果问题看起来有点含糊，我很抱歉，我希望我给出的示例能够阐明问题主题。

感谢任何愿意花时间回答的人。

最佳答案

正确的方法 扩展 HTMLElement 是使用 CustomElements ,有一个名为 attributeChangedCallback 的生命周期回调。

然后，当使用 objectName.setAttribute('attrName','attrValue') 设置属性时调用此函数。

您也可以使用 MutationObserver使用 config={attributes:true}(小心使用它，错误的实现会严重损害性能)。

另一种方法 实现这一点的方法是编写一个函数来读取所有属性并将它们转换为 setter/getter...类似这样

    class WatchableObject{
            constructor(){
                this.handler = ()=>{};
            }
            watch(handler){
                if(!this.beingWatched()) {
                    delete this.handler;

                    let properties = Object.getOwnPropertyNames(this);
                    properties.forEach((prop) => {
                        if (this.hasOwnProperty(prop)) {
                            Object.defineProperty(this, prop, {
                                set: (newValue) => {
                                    let oldValue = this["_" + prop];
                                    this["_" + prop] = newValue;
                                    this.handler.call(this,oldValue,newValue);
                                },
                                get: () => {
                                    return this["_" + prop];
                                }
                            });
                        }
                    });
                }
                this.handler = handler;
            }
            unwatch(){
                this.watch(()=>{});
            }
            beingWatched(){
                return (this.handler.toString() != "()=>{}");
            }
    }

    let a = new WatchableObject();
    a.b = "hello";
    a.c = "daniel";
    a.watch(()=>{alert("a change has been made.")});
    a.b = "bye";
    a.unwatch();
    a.b = "hello again";

关于javascript - 通过元素的属性检测元素的属性变化 - JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51197507/

27 4 0
文章推荐： javascript - 传递表格以调用 read() JavaScript 函数的语法
文章推荐： javascript - Material ui添加onclick
文章推荐： java - 适用于所有服务器请求类型的单个 servlet 与多个 servlet——每种请求类型对应一个
文章推荐： javascript - 使用模块化 CSS 在 React 中使用状态字符串作为类名
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com