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

2019年8月27日 197次阅读 来源: 熊丸子

之前一篇算是带人人大抵明白了一下Polymer的风貌。这篇我们轻微深切一丢丢，讲下组件的注册和建立。

建立自定义组件的几种体式格局

这里我们运用Polymer函数注册了一个自定义组件”my-element”

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

在hello world篇中我们运用的是直接在html页面里写标签的体式格局来建立这个自定义组件

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

然则假如my-element须要被动态建立，运用上面的体式格局明显就满足不了请求。所以Polymer供应了别的2种建立体式格局
第一种

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

啊，我们能够挪用原生dom api一样来建立自定义组件了，这是一件何等让人愉悦的事变。
我们来测试一下
《开坑，写点Polymer 1.0 教程第3篇——组件注册与建立》

第二种
这类体式格局须要我们在注册自定义组件的时刻举行一点小的修正，挪用Polymer函数定义的时刻把返回值赋个一个全局变量MyElement

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

从这里能够得知Polymer函数会返回一个自定义组件的组织函数，运用new就能够建立它了。
我们来测试一下
《开坑，写点Polymer 1.0 教程第3篇——组件注册与建立》

关于这类要领，Polymer还供应了一个接口factoryImpl能够让我们在建立自定义组件的时刻传入运行时的组织参数，而不是只能死死地运用注册组件时刻定义的内容。
我们修正下例子

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

测试一下
《开坑，写点Polymer 1.0 教程第3篇——组件注册与建立》
这类组织函数传参的体式格局只适用于，new CustomElement的建立体式格局，而且它2种体式格局不支撑，缘由你本身拍脑壳想一想就懂了。

factoryImpl 被挪用的机遇是在dom被建立，默认值被设置了今后，详细的我们会在生命周期篇里谈。

扩大原生的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>

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

假如运用的是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也就是顺序的入口处。

    原文作者：熊丸子
    原文地址: https://segmentfault.com/a/1190000003820426
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞