polymer1.0 簡要介紹和實例

時間 2019-11-06

標籤 polymer1.0 polymer 簡要介紹實例简体版

原文原文鏈接

polymer是什麼呢
一個能夠幫助你輕鬆建立一個自定義標籤的庫
利用polymer的一些特性你能夠建立自定義元素來減小模板代碼大小也能夠利用它很是簡單的建立複雜交互元素css

註冊元素
生命週期回調
屬性的觀察
local DOM模板
數據綁定

Register an element

使用Polymer函數註冊一個新元素html

polymer開發頁面就是html模塊化
首先你須要一個元素html
proto-element.htmlreact

<link rel="import"
      href="bower_components/polymer/polymer.html">



<script>
  // register a new element called proto-element
  Polymer({
    is: "proto-element",
    // add a callback to the element's prototype
    ready: function() {
      this.innerHTML = "I'm a proto-element. Check out my prototype!"
    }
  });
</script>

Polymer只有一個參數用於定製元素tag-name properties methodsweb

note: 自定義元素初始化結束後調用ready方法ajax

在index.html中咱們可使用本身定義好的元素瀏覽器

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="proto-element.html">
  </head>
  <body>
    <proto-element></proto-element>
  </body>
</html>

Polymer 是基於webcomponets組件建立機制的庫經過簡單的提供一些方式幫助建立自定義元素使用Polymer 最底層是webcomponents實現中間是基礎元素包括Polymer和自定義基礎元素再上層時ui元素頁面在調用ui元素markdown

add local Dom

local dom就是自定義元素內部的一些dom節點 polymer設計目標就是語義化好比我如今要一個相冊標籤項目組沒必要再一層一層套div 直接引入控件組的html庫可能只須要寫
成這樣app

<lfx-gallery>
    ...
</lfx-gallery>

gallery.html中可能就要寫成這樣dom

<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">

<dom-module id="lfx-gallery">
  <template>
    <div>gallery caption</div>
    <template is="dom-repeat" items="{{employees}}">
        <img src="" alt="">
        <p>gallery description!</p>    
    </template>
  </template>
</dom-module>



<script>
  Polymer({
    is: "lfx-gallery",
    ready: function() {
      this.employees = [
          {first: 'Bob', last: 'Smith'},
          {first: 'Sally', last: 'Johnson'},
          {first: 'Aally', last: 'Sohnson'}
      ];
    }    
  });
</script>

index.html這樣寫編輯器

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="lfx-gallery.html">
  </head>
  <body>
    <lfx-gallery></lfx-gallery>
  </body>
</html>

plunker自定義lfx-gallery標籤連接地址

note: 自定義元素最好加本身的命名空間以防和瀏覽器默認標籤重名

Composition with local DOM

自定義元素內部節點是能夠在外部控制的，能夠指定插入自定義元素內部的位置

<link rel="import"
      href="bower_components/polymer/polymer.html">

<dom-module id="picture-frame">
  <!-- scoped CSS for this element -->
  <style>
    div {
      display: inline-block;
      background-color: #ccc;
      border-radius: 8px;
      padding: 4px;
    }
  </style>
  <template>
    <div>
      <!-- any children are rendered here -->
      <content></content>
    </div>
  </template>
</dom-module>



<script>
  Polymer({
    is: "picture-frame",
  });
</script>

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="picture-frame.html">
  </head>
  <body>
    <picture-frame>
      <img src="images/p-logo.svg">
    </picture-frame>
  </body>
</html>

content標籤放置外部自定義dom Polymer會把img放到content區域
plunker元素插入標籤內部

note: dom-module內部css樣式不會影響到外部

Data binding

數據綁定可使元素動態修改本身local dom，可使用{{}}綁定屬性

<link rel="import"
      href="bower_components/polymer/polymer.html">

<dom-module id="name-tag">
  <template>
    <!-- bind to the "owner" property -->
    This is <b>{{owner}}</b>'s name-tag element.
  </template>
</dom-module>



<script>
  Polymer({
    is: "name-tag",
    ready: function() {
      // set this element's owner property
      this.owner = "Daniel";
    }
  });
</script>

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="name-tag.html">
  </head>
  <body>
    <name-tag></name-tag>
  </body>
</html>

Declare a property

在polymer函數中能夠聲明屬性，每一個屬性能夠分別而設置本身的默認值，標記屬性配置，屬性觀察者還有更多。

<link rel="import"
      href="bower_components/polymer/polymer.html">

<dom-module id="configurable-name-tag">

  <template>
    <!-- bind to the "owner" property -->
    This is <b>{{owner}}</b>'s configurable-name-tag element.
  </template>



<script>
    Polymer({
      is: "configurable-name-tag",
      properties: {
        // declare the owner property
        owner: {
          type: String,
          value: "Daniel"
        }
      }
    });
  </script>



</dom-module>

雙向數據綁定屬性使用{{}}
Plunker屬性聲明地址

Bind to a property

polymer除了提供文字內容綁定，還提供元素屬性綁定，一樣也是雙向數據綁定。

<link rel="import"
      href="bower_components/polymer/polymer.html">
<!-- import the iron-input custom element -->
<link rel="import"
      href="bower_components/iron-input/iron-input.html">

<dom-module id="editable-name-tag">

  <template>
    <p>
    This is a <strong>{{owner}}</strong>'s editable-name-tag.
    </p>
    <!-- iron-input exposes a two-way bindable input value -->
    <input is="iron-input" bind-value="{{owner}}"
      placeholder="Your name here...">
  </template>



<script>
    Polymer({
      is: "editable-name-tag",
      properties: {
        owner: {
          type: String,
          value: "Daniel"
        }
      }
    });
  </script>



</dom-module>

Plunker屬性綁定地址
估計你們可能對polymer的速度有單心，不過從目前測下來速度是至關快的
polymer使用這些能夠作些什麼呢寫個timer

<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">

<dom-module id="lfx-timer">

  <template>
    <div>Seconds Elapsed: <b>{{secondsElapsed}}</b></div>
  </template>



<script>
  Polymer({
    is: "lfx-timer",
    properties: {
      secondsElapsed: {
        type: Number,
        value: 0
      }
    },    
    setTimer: function() {
      var self = this;
      setInterval(function(){
        self.secondsElapsed += 1;
      }, 1000);
    },
    ready: function() {
      this.setTimer();
    }
  });
  </script>



</dom-module>

是否是和react好像不過咱們能夠直接在index.html使用標籤
並且能夠直接當dom處理
Plunker計時器地址

咱們再寫一個todoapp

<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/iron-input/iron-input.html">

<dom-module id="lfx-todoapp">

  <template>
    <h3>TODO</h3>
    <ul>
      <template is="dom-repeat" items="{{todos}}">
        <li>{{item}}</li>
      </template>
    </ul>
    <p>你輸入的是<b>{{input}}</b></p>
    <input is="iron-input" bind-value="{{input}}"
      placeholder="Your name here...">
    <button type="button" on-click="handleClick">Add #<b>{{index}}</b></button>
  </template>



<script>
    Polymer({
      is: "lfx-todoapp",
      properties: {
        index: {
          type: Number,
          value: 1
        },
        input: {
          type: String,
          value: ''
        }
      },
      ready: function() {
        this.todos = [
          'sdsds'
        ];
      },
      handleClick: function(){
        var self = this;
        if(self.input != '') {
          self.push('todos', self.input);
          self.input = '';          
        }
      }
    });
  </script>



</dom-module>

polymer提供repeat if等標籤來處理數據
Plunker todoapp 地址

polymer能夠作markdown編輯器

<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<!-- import the iron-input custom element -->
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>

<dom-module id="lfx-markdown">

  <template>
    <h3>INPUT</h3>
    <textarea name="" id="textarea" on-keyup="keyupHandle" value="{{input}}"></textarea>
    <h3>OUTPUT</h3>
    <div id="output"></div>
  </template>



<script>
    Polymer({
      is: "lfx-markdown",
      properties: {
        input: {
          type: String,
          value: '',
          observer: 'inputChanged'
        },
        output: {
          type: String,
          value: ''
        }
      },
      ready: function() {
        var self = this;
        self.input = 'Type some *markdown* here!';
      },
      keyupHandle: function(event) {
        var self = this;
        self.input = event.path ? event.path[0].value : event.target.value;
      },
      inputChanged: function(newvalue, oldvalue) {
        var self = this;
        self.$.output.innerHTML = marked(self.input);
      }
    });
  </script>



</dom-module>

polymer經過object.observe或者dirty check實現數據觀察
Plunker markdown 地址

1. css3 attr 簡單介紹和實例
2. Jsonp和HttpClient 簡要介紹
3. ArangoDB簡單實例介紹
4. JMS ActiveMQ簡單介紹+簡單實例
5. ActiveMQ簡單介紹+簡單實例
6. WCF簡要介紹
7. SVM簡要介紹
8. Bootstrap簡要介紹
9. Log4j簡要介紹
10. 簡要介紹Eclipse
更多相關文章...
• XLink 和 XPointer 簡介 - XLink 和 XPointer 教程
• 網站主機介紹 - 網站主機教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Github 簡明教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。