javascript 无法使用代理捕获customElements上的访问者调用？

jk9hmnmh 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(160)

我正在使用customElements.define注册一些自定义元素，并希望在成员访问器上自动设置陷阱，以便在它们更改时发出事件

class State extends HTMLElement {
    public someValue = 1;

    public constructor() {
        super();
        console.log('State constructor');
    }
}

const oProxy = new Proxy(State, {
    get(target, prop: string) {
        console.log(`GET trap ${prop}`);
        return Reflect.get(target, prop);
    },
    set(target, prop: string, value: any) {
        console.log(`SET trap ${prop}`);
        return Reflect.set(target, prop, value);
    }
});

customElements.define('my-state', oProxy);

const oStateEl = document.querySelector('my-state');
console.log(oStateEl.someValue);
console.log(oStateEl.someValue = 2);
console.log(oStateEl.someValue);

我的浏览器似乎没有问题，上面的代码，我可以看到一些陷阱输出作为元素的设置

GET trap prototype
GET trap disabledFeatures
GET trap formAssociated
GET trap prototype

但是当我手动获取/设置值时，陷阱不会被触发。这可能吗

JavaScript

来源：https://stackoverflow.com/questions/62193939/unable-to-trap-accessor-calls-on-customelements-using-proxy

1条答案

按热度按时间

qmb5sa221#

我最终做的是将所有成员变量的值移动到一个私有对象中，并在自定义元素挂载到DOM上后立即动态地为每个成员变量定义一个getter/setter，就像这样……

//
class State extends HTMLElement {

    protected _data: object = {}

    public connectedCallback() {
        // Loop over member vars
        Object.getOwnPropertyNames(this).forEach(sPropertyKey => {
            // Ignore private
            if(sPropertyKey.startsWith('_')) {
                return;
            }

            // Copy member var to data object
            Reflect.set(this._data, sPropertyKey, Reflect.get(this, sPropertyKey));

            // Remove member var
            Reflect.deleteProperty(this, sPropertyKey);

            // Define getter/setter to access data object
            Object.defineProperty(this, sPropertyKey, {
                set: function(mValue: any) {
                    console.log(`setting ${sPropertyKey}`);
                    Reflect.set(this._data, sPropertyKey, mValue);
                },

                get: function() {
                    return this._data[sPropertyKey];
                }
            });
        });
    }

}

// 
class SubState extends State {

    public foobar = 'foobar_val';
    public flipflop = 'flipflop_val';

    public SubStateMethod() { }

}

//
window.customElements.define('sub-state', SubState);

//
const oState = document.querySelector('sub-state') as SubState;
oState.foobar = 'foobar_new_val';

这样，我仍然可以正常地获取/设置对象上的值，typescript对成员变量的存在感到高兴，并且我可以在访问成员时触发自定义事件-所有这些都允许自定义元素存在于DOM就绪的标记中

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 无法使用代理捕获customElements上的访问者调用？

1条答案

相关问题

热门标签

最新问答