Javascript 定义元素性质的聚合物

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

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

及

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

---

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

如果正确，第一个示例将在prototype对象上设置属性。另一方面，第二个示例设置元素实例的属性。
在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

上设置的值相同。发生这种情况的原因是。

如果您是正确的，第一个示例将在prototype对象上设置属性。另一方面，第二个示例设置元素实例的属性。
在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

上设置的值相同。发生这种情况的原因是。

在

created（）

回调中为对象或数组的属性值设置默认值。否则，您可能会在对象中陷入“共享状态”问题。在

created（）

中设置值可确保为元素的每个实例创建单独的对象：

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

如果像这样使用元素，

val

被设置为“foo”：

您还可以直接在

上声明属性。这些将自动包含在元素的每个实例中。例如：

<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>

---

在

created（）

回调中为对象或数组的属性值设置默认值。否则，您可能会在对象中陷入“共享状态”问题。在

created（）

中设置值可确保为元素的每个实例创建单独的对象：

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

如果像这样使用元素，

val

被设置为“foo”：

您还可以直接在

上声明属性。这些将自动包含在元素的每个实例中。例如：

<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>

---

谢谢，这解释了很多。你能告诉我这些任意属性是如何工作的吗？它们传递给我的自定义元素的值是什么？我能否以某种方式定义只是属性的自定义元素，就像我可以定义只是属性的angularjs指令一样？任意属性对聚合元素的作用就像对任何HTML元素一样。虽然您可以在属性方面做很多工作，但更好的做法是使用已发布的属性（使用

published

或

attributes=

）。可以将已发布的属性视为元素的公共界面。是的，我知道，尽管我对动画（过渡）库等用例感到好奇，但它可以为元素的淡入淡出设置动画，并作为属性用于任何任意元素（例如div）。像这样的东西可以用angular来做，我想知道是否可以用聚合物来做？或者创建一个自定义元素是更好的做法，它只是扩展了“动画元素”？谢谢，这解释了很多。你能告诉我这些任意属性是如何工作的吗？它们传递给我的自定义元素的值是什么？我能否以某种方式定义只是属性的自定义元素，就像我可以定义只是属性的angularjs指令一样？任意属性对聚合元素的作用就像对任何HTML元素一样。虽然您可以在属性方面做很多工作，但更好的做法是使用已发布的属性（使用

published

或

attributes=

）。可以将已发布的属性视为元素的公共界面。是的，我知道，尽管我对动画（过渡）库等用例感到好奇，但它可以为元素的淡入淡出设置动画，并作为属性用于任何任意元素（例如div）。像这样的东西可以用angular来做，我想知道是否可以用聚合物来做？或者创建一个自定义元素是更好的做法，它只会扩展“animation元素”？这两个元素获得另一个值的原因是它们引用的是同一个对象。如果您使用

myConfig:'someValue'

进行尝试，您所指的问题将消失。这两个元素获得另一个

值的原因是它们引用的是同一个对象。如果您尝试使用myConfig:'someValue'

，您所指的问题将消失。