開坑，寫點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也就是程序的入口處。