Question

在浏览Polymer docs时，我发现了两种在自定义元素中定义属性的方法，即：

Polymer('my-element', {
    myProp: 'someValue'
});

和

Polymer('my-element', {
    ready: function () {
        this.myProp = 'someValue';
    }
});

据我所知，第一个将对象作为原型传递给我的自定义元素，因此属性在元素创建之前存在，而另一个属性在声明属性之前等待元素初始化。

我想知道这两者之间有什么区别（如果有的话），何时会使用另一个？还有其他方法来初始化属性/函数吗？

Answer 1

在created()回调中为对象或数组的属性值设置默认值。否则，您可能会在对象中遇到“共享状态”问题。在created()内设置值可确保为元素的每个实例创建单独的对象：

<polymer-element name="my-element">
  <script>
    Polymer({
      created: function() {
        // Creates `myObj` for *this* instance.
        this.myObj = {
          color: 'red'
        };
      }
    });
  </script>
</polymer-element>

我更喜欢将初始化代码放在created()内，而不是放在ready()中。看到 https://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods了解两次回调之间的区别。

回答你的另一个问题：“还有其他方法可以初始化属性/功能吗？”。是的，您可以发布元素的属性。例如：

<polymer-element name="my-element">
  <template>
    <h1>{{val}}</h1>
  </template>
  <script>
    Polymer({
      publish: {
        val: 'foo'
      }
    });
  </script>
</polymer-element>

如果您使用这样的元素，val设置为“foo”：

<my-element></my-element>

如果你这样使用它，val设置为“bar”：

<my-element val="bar"></my-element>

您还可以直接在<polymer-element>上声明属性。这些会自动包含在元素的每个实例中。例如：

<polymer-element name="my-element" foo="bar">
  <template>
    <h1 id="myHeading"></h1>
  </template>
  <script>
    Polymer({
      ready: function() {
        this.$.myHeading.textContent = this.getAttribute('foo');
      }
    });
  </script>
</polymer-element>

请注意，在这种情况下，您需要使用ready()。

当然，您可以直接在<polymer-element>的实例上设置任意属性：

<my-element disabled></my-element>

Answer 2

你是对的，第一个例子在原型对象上设置属性。另一方面，第二个示例在元素的实例上设置属性 在vanilla javascript中，第一个例子将转化为：

var F = function () {};
F.prototype.myProp = 'someValue';

虽然第二个会转化为类似的东西：

var F = function () {
    this.myProp = 'someValue';
};

强烈建议以避免您的第一个示例，除非您知道自己在做什么。在原型上设置属性可能会产生意外后果。以这段代码为例：

Polymer('my-element', {
    myConfig: {
        myProp: 'someValue'
    }
});

var el1 = document.createElement('my-element'),
    el2 = document.createElement('my-element');

el1.myConfig.myProp = 'anotherValue';
console.debug(el2.myConfig.myProp); // will output 'anotherValue'

即使我正在打印el2.myConfig.myProp，您也可以看到它与el1.myConfig.myProp上设置的值相同。这是因为Prototypal Inheritance的性质而发生的。

聚合物定义元素中的属性

2 个答案: