开坑，写点Polymer 1.0 教程第3篇——组件注册与建立

时间 2019-12-20

标签 polymer1.0 polymer 教程组件注册建立繁體版

原文原文链接

以前一篇算是带你们大体领略了一下Polymer的风采。这篇咱们稍微深刻一丢丢，讲下组件的注册和建立。html

建立自定义组件的几种方式

这里咱们使用Polymer函数注册了一个自定义组件"my-element"web

// register an element
Polymer({
  is: 'my-element',
  created: function() {
    this.textContent = 'My element!';
  }
});

在hello world篇中咱们使用的是直接在html页面里写标签的方式来建立这个自定义组件api

<div>
    <my-element></my-element>
</div>

可是若是my-element须要被动态建立，使用上面的方式显然就知足不了要求。因此Polymer提供了另外2种建立方式
第一种dom

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

啊，咱们能够调用原生dom api同样来建立自定义组件了，这是一件多么让人愉悦的事情。
咱们来测试一下
函数

第二种
这种方式须要咱们在注册自定义组件的时候进行一点小的改动，调用Polymer函数定义的时候把返回值赋个一个全局变量MyElement测试

// register an element
MyElement = Polymer({
  is: 'my-element',
  created: function() {
    this.textContent = 'My element!';
  }
});

var el2 = new MyElement();

从这里能够得知Polymer函数会返回一个自定义组件的构造函数，使用new就能够建立它了。
咱们来测试一下
this

对于这种方法，Polymer还提供了一个接口factoryImpl可让咱们在建立自定义组件的时候传入运行时的构造参数，而不是只能死死地使用注册组件时候定义的内容。
咱们修改下例子spa

<dom-module id="my-element">
    <template>
        <p>{{helloMessage}}</p>
    </template>
    <script>
        MyElement = Polymer({
            is: 'my-element',
            properties: {
                helloMessage: {
                    value: "hi",
                    type: "string"
                }
            },
            //定义factoryImpl借口，构造时将helloMessage从新赋值
            factoryImpl: function (message) {
                this.helloMessage = message;
            }
        });
    </script>
</dom-module>

测试一下

这种构造函数传参的方式只适用于，new CustomElement的建立方式，并且它2种方式不支持，缘由你本身拍脑壳想一想就懂了。code

factoryImpl 被调用的时机是在dom被建立，默认值被设置了之后，具体的咱们会在生命周期篇里谈。component

扩展原生的html标签

首先告诉你们一个很是遗憾的消息，Polymer当前版本暂不支持扩展本身定义组件（既本身不能扩展本身，可是会在之后版本中支持你们请擦干净鼻涕静静等待），目前只能扩展原生的html标签如input， button等。Polymer提供了一个extends接口来实现扩展

my-input.html

<script>
    MyInput = Polymer({
        is: 'my-input',
        extends: 'input',
        created: function () {
            // 咱们扩展组件的外观使之变成红色边框
            this.style.border = '1px solid red';
        }

    });
</script>

若是使用的是dom api咱们须要这样来建立

var el1 = document.createElement('input', 'my-input')

若是使用html标签的方式，咱们要这样写

<input is="my-input">

窃觉得，后面2种方式来建立一个组件是很是很是扯蛋的一件事情，使用者必须很是清楚组件的继承关系，你说这还不扯蛋么？指望Polymer在后续版本的api中对于组件扩展这一块内容，消灭以上两种不靠谱的建立方式。

在html主文件里定义“自定义组件

首先说下，只有在写demo的时候，才会用到这种写法。生产环境中，都是须要把组件写在各自独立的文件中。

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js">
    </script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <title>Defining a Polymer Element from the Main Document</title>
  </head>
  <body>
    <dom-module id="main-document-element">
      <template>
        <p>
          Hi! I'm a Polymer element that was defined in the
          main document!
        </p>
      </template>
      <script>
        HTMLImports.whenReady(function () {
          Polymer({
            is: 'main-document-element'
          });
        });
      </script>
    </dom-module>
    <main-document-element></main-document-element>
  </body>
</html>

HTMLImports.whenReady()这个方法你能够把它理解成JQ里的document.ready()或者AMD里的domReady(),能够确保引用的组件dom都被加载完了再进行下一步的调用，通常都是用在index.html也就是程序的入口处。