Question

按照我正在阅读的书“学习WebComponents”中的教程，我坚持使用其中一个，即创建自定义元素的那个。在下面找到代码。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Web Component: custom element example</title>
    <script type="text/javascript">
        var objectPrototype = Object.create(HTMLElement.prototype);

        Object.defineProperty(objectPrototype, 'title', {
            writable : true
        });

        Object.defineProperty(objectPrototype, 'awesomeprop', {
            writable : true
        });

        objectPrototype.createdCallback = function () {
            alert(this.awesomeprop);
        };

        var  myNameElement = document.registerElement("my-name",{
            prototype:objectPrototype
        });

    </script>
</head>
<body>
    <my-name title="Welcome to custom element 1" awesomeprop="hello"></my-name>
    <br>
    <my-name title="Welcome to custom element 2" awesomeprop="hello"></my-name>
</body>
</html>

主要问题是，如果我遵循代码示例，元素值将始终未定义。但是，如果我做一些小的改动，我的意思是设置一个默认值，它将像魅力一样工作。

Object.defineProperty(objectPrototype, 'title', {
            writable : true,
            value : "myTitle"
        });

这没有任何意义，因为，我想使用我放入属性的文本，我也已定义。

<my-name title="Welcome to custom element 1" awesomeprop="hello"></my-name>

我猜测有一些缺失的步骤，或者某些东西，但我真的不知道如何继续解决这个问题。

任何帮助将不胜感激。

Answer 1

Object.defineProperty()方法与javascript对象相关：

Object.defineProperty（）方法直接在对象上定义新属性，或修改对象上的现有属性，并返回该对象。

我写了一个简短的示例，展示了如何访问title属性：

<my-example title="foo!" aaa="bbb!">bar!</my-example>
<script>
  var Proto = Object.create(HTMLElement.prototype);
  Object.defineProperty(Proto, 'hallo', {value: 'ween!'});
  Proto.createdCallback = function() {
    console.log(this.getAttribute('title'));  // -> foo!
    console.log(this.getAttribute('aaa'));    // -> bbb!
    console.log(this.innerHTML);              // -> bar!
  };
  document.registerElement('my-example', { prototype: Proto });

  // Output of the JavaScript object:
  console.log(document.getElementsByTagName('my-example')[0].hallo); // -> 'ween'
</script>

这是正确的实施方式：

var objectPrototype = Object.create(HTMLElement.prototype);
objectPrototype.createdCallback = function () {
  alert(this.getAttribute('title'));          // <--
  alert(this.getAttribute('awesomeprop'));    // <--
};
var myNameElement = document.registerElement("my-name",{ prototype: objectPrototype });

浏览器：Google Chrome 51.0.2704.106（64位）

Object.defineProperty定义一个始终返回未定义值的属性

1 个答案: