0

我知道，要注册我们自己的 elementTypes，我们使用

Object.defineProperties(ElementPrototype,{
 get: function(){

 },
 set: function(newVal) {

 }
});

现在只要我不附加 onchange 侦听器，它就可以很好地用于 value 属性，但如果我这样做了，这个 setter 永远不会被调用，我能想到的一个原因是这个 onchange 在内部覆盖了我的 setter 并放置了它自己的，这导致我的二传手永远不会被召唤。这样做

elem.value = "newvalue";

不会触发我的设置器功能。所以

首先我的结论正确吗？

第二什么是解决方法？

编辑：-假设 ElementType 是我自己的元素副本，我不想修改现有的标签元素，

4

2 回答 2

1

主机对象只需要为 ECMAScript 功能提供最低限度的支持。请参阅ECMAScript §4：“ ……宿主对象，其描述和行为超出了本规范的范围，除非表明它们可以提供可以访问的某些属性和可以从 ECMAScript 程序调用的某些函数”。

例如，浏览器不需要支持 DOM 对象的原型继承（尽管大多数都支持）。在 ECMA-262 的各个部分如何对宿主对象进行特殊处理也很明显，例如对于typeof 运算符。

底线是宿主对象不需要支持 ECMAScript 的所有特性，你应该只期望它们支持它们通过发布的文档提供的特性。

更一般地说，有一个原则是你不应该弄乱你不拥有的对象。也就是说，除非您有明确的许可，否则不要向宿主、内置或其他脚本对象添加属性和行为。主要原因是：

  1. 主机对象在不同主机中的实现方式可能不同，因此在一个主机中“工作”的东西在另一台主机中可能不会（或抛出错误）。

  2. 脚本添加的功能可能会添加到更高版本的宿主环境中，从而导致不容易解决的冲突（例如，当 ECMAScript ed 3 是规范时引入的 jQuery 的each方法，具有不同的名称并采用不同的参数order 比 ES5 的forEach方法，后面介绍）

  3. 如果通过 3rd 方脚本修改主机或内置对象变得严格，功能测试将变得极其困难。测试一个特性很容易，但判断你正在处理的特定特性的哪个实现并不容易（例如参数的顺序和数量），这进一步增加了复杂性。

修改其他本地对象有时是可以的，例如，如果你有一个插件，它可能有一个你可以修改的设置或参数对象，但你不应该去替换整个方法。

如果要扩展主机对象的行为，请创建一个代理并使用它。

于 2015-06-20T23:25:55.547 回答
0

我可能是错的，但看起来您想要做的是在自定义元素的value属性发生更改时触发更改事件。这就是你可以做到的方式。

定义组件

xtag.register('my-element', {
    accessors: {
        value: {
            attribute: {},
            get: function () {
                return this._value;
            },
            set: function (v) {
                if (v === this._value) return; // unchanged

                var change = { from: this._value, to: v }; // optional

                this._value = v; // set new value

                xtag.fireEvent(this, 'change', { // event
                    detail: change,
                    bubbles: true,
                    cancelable: true
                });
            }
        }
    }
});

HTML

<my-element value="2"></my-element>

试试看

var el = document.querySelector('my-element');

// add event listener

el.addEventListener('change', function (e) {
    console.log('value changed from %s to %s', e.detail.from, e.detail.to);
});

// change the value

el.value = 4; 

// this will cause the 'change' event to fire
// the listener will output this to the console:

// "value changed from 2 to 4"

因为我们已经将change事件的bubbles选项设置为true，所以我们也可以使用事件委托。

xtag.addEvent(document.body, 'change:delegate(my-element)', function (e) {
    console.log('Value of <my-element> somewhere in <body> changed');
});
于 2016-03-15T21:21:24.477 回答