polymer web componets 大前端

大前端

東南水鄉 一葉小舟拂過水麪 船上兩位大俠把酒言歡 一位是玉真人 另外一位是張真人 兩人喝到開心處 變做對聯起來 上聯 前端研究,研究個屁~ 下聯 前端設計,設計個屁~ 橫批 前端sbhtml

特點

polymer 提供建立自定義和標準dom元素相似的自定義元素功能前端

  • 能夠使用constructor或者document.createElement建立元素node

  • 能夠配置元素attributes或properties瀏覽器

  • 能夠在標籤內部定義一些domapp

  • 能夠對屬性和屬性的變化處理dom

  • 能夠有一些默認的樣式,在外部修內部樣式函數

  • 能夠提供方法容許你來操縱它的內部狀態ui

一個基本的polymer元素定義以下:this

<dom-module id="element-name">
  <style>
    /* CSS rules for your element */
  </style>
  <template>
    <!-- local DOM for your element -->

    <div>{{greeting}}</div> <!-- data bindings in local DOM -->
  </template>
</dom-module>

<script>
  // element registration
  Polymer({
    is: "element-name",

    // add properties and methods on the element's prototype

    properties: {
      // declare properties for the element's public API
      greeting: {
        type: String,
        value: "Hello!"
      }
    }
  });
</script>

像普通標籤同樣使用prototype

<element-name></element-name>        <!-- <div>hello!</div> -->

註冊和生命週期

註冊自定義元素

使用polymer註冊一個元素,使用is屬性指明要註冊元素的名稱

// register an element
MyElement = Polymer({

  is: 'my-element',

  // See below for lifecycle callbacks
  created: function() {
    this.innerHTML = 'My element!';
  }

});

// create an instance with createElement:
var el1 = document.createElement('my-element');

// ... or with the constructor:
var el2 = new MyElement();

polymer function 將元素註冊到瀏覽器上 而且 返回一個建立新實例的元素構造函數

定義一個自定義構造函數

polymer function返回一個基本的構造函數,可用於實例化自定義元素,若是你想要向構造函數傳遞參數配置新元素,您能夠指定一個自定義構造函數原型。

MyElement = Polymer({

  is: 'my-element',

  constructor: function(foo, bar) {
    this.foo = foo;
    this.configureWithBar(bar);
  },

  configureWithBar: function(bar) {
    ...
  }

});

var el = new MyElement(42, 'octopus');
  • 自定義函數只當使用構造函數時調用,做爲html標記解析時不調用

  • 自定義函數在元素初始化後調用

擴展html元素

MyInput = Polymer({

  is: 'my-input',

  extends: 'input',

  created: function() {
    this.style.border = '1px solid red';
  }

});

var el1 = new MyInput();
console.log(el1 instanceof HTMLInputElement); // true

var el2 = document.createElement('input', 'my-input');
console.log(el2 instanceof HTMLInputElement); // true

回調生命週期

MyElement = Polymer({

  is: 'my-element',

  created: function() {
    console.log(this.localName + '#' + this.id + ' was created');
  },

  attached: function() {
    console.log(this.localName + '#' + this.id + ' was attached');
  },

  detached: function() {
    console.log(this.localName + '#' + this.id + ' was detached');
  },

  attributeChanged: function(name, type) {
    console.log(this.localName + '#' + this.id + ' attribute ' + name +
      ' was changed to ' + this.getAttribute(name));
  }

});

準備回調和元素初始化

ready: function() {
  <!-- access a local DOM element by ID using this.$ -->
  this.$.header.textContent = 'Hello!';
}
元素初始化順序
  • created callback

  • local DOM constructed

  • default values set

  • ready callback

  • custom constructor (if any)

  • attached callback

註冊回調

Polymer.Base also implements registerCallback, which is called by Polymer() to allow Polymer.Base to supply a layering system for Polymer features.

標籤靜態屬性

若是一個自定義標籤須要標籤上出現attributes要在hostAttrbuites下寫 值爲true會被轉變爲空
false 該屬性不會添加

mixins屬性

fun-mixin.html

FunMixin = {

    funCreatedCallback: function() {
      this.makeElementFun();
    },

    makeElementFun: function() {
      this.style.border = 'border: 20px dotted fuchsia;';
    }
  };

});

my-element.html

<link rel="import" href="fun-mixin.html">

<script>
  Polymer({

    is: 'my-element',

    mixins: [FunMixin],

    created: function() {
      this.funCreatedCallback();
    }

  });
</script>

類樣式的構造函數

若是你想實現你的元素,但並不註冊他,你能夠使用Polymer.class function Polymer.class和Polymer有着相同的屬性配置,設置原型鏈,沒有註冊元素,能夠用document.registerElement 註冊。

申明屬性

你能夠在你的元素上聲明有哪些properties經過在polymer構造函數原型properties寫
能夠聲明那些配置
屬性類型
默認值
屬性改變觀察者
只讀
出發事件
基於別的屬性計算屬性
屬性值改變時跟新相關

Polymer({

  is: 'x-custom',

  properties: {
    user: String,
    isHappy: Boolean,
    count: {
      type: Number,
      readOnly: true,
      notify: true
    }
  },

  ready: function() {
    this.innerHTML = 'Hello World, I am a <b>Custom Element!</b>';
  }

});
key details
type (Boolean,Date,Number,String,Array,Object)
value (Boolean,Number,String,Function) 默認值
reflectToAttribute (Boolean)
readyOnly (Boolean)
notify (Boolean)
computed (String)
observer (String) 屬性觀察者函數名

property name 和 attribute name 映射

當映射 attribute name 到 property names

  • attribute names 轉換成 小寫 property names 好比firstName 映射成 firstname

  • attribute names 帶破折號 轉換成 駝峯命名 property namses 好比first-name 映射成
    firstName

property names 映射成 attribute names時一致

反序列化屬性

屬性最好設置type

<script>

  Polymer({

    is: 'x-custom',

    properties: {
      user: String,
      manager: {
        type: Boolean,
        notify: true
      }
    },

    attached: function() {
      // render
      this.innerHTML = 'Hello World, my user is ' + (this.user || 'nobody') + '.\n' +
        'This user is ' + (this.manager ? '' : 'not') + ' a manager.';
    }

  });

</script>

<x-custom user="Scott" manager></x-custom>
<!--
<x-custom>'s innerHTML becomes:
Hello World, my user is Scott.
This user is a manager.
-->

attributes dash-case 風格 轉換成 camel-case 風格

<script>

  Polymer({

    is: 'x-custom',

    properties: {
      userName: String
    }

  });

</script>

<x-custom user-name="Scott"></x-custom>
<!-- Sets <x-custom>.userName = 'Scott';  -->

配置默認屬性值

properties 的默認值能夠再properties對象使用value屬性 能夠是一個原始值或者一個function的返回值

Polymer({

  is: 'x-custom',
   
  properties: {
  
    mode: {
      type: String,
      value: 'auto'
    },
    
    data: {
      type: Object,
      notify: true,
      value: function() { return {}; }
    }
  
  }

});

屬性更改回調(觀察者)

Polymer({

  is: 'x-custom',

  properties: {
    disabled: {
      type: Boolean,
      observer: 'disabledChanged'
    },
    highlight: {
      observer: 'highlightChanged'
    }
  },

  disabledChanged: function(newValue, oldValue) {
    this.toggleClass('disabled', newValue);
    this.highlight = true;
  },

  highlightChanged: function() {
    this.classList.add('highlight');
    setTimeout(function() {
      this.classList.remove('highlight');
    }, 300);
  }

});

觀察多個屬性更改

Polymer({

  is: 'x-custom',

  properties: {
    preload: Boolean,
    src: String,
    size: String
  },

  observers: {
    'preload src size': 'updateImage'
  },

  updateImage: function(preload, src, size) {
    // ... do work using dependent values
  }

});

觀察更改子屬性

local Dom

咱們叫把能夠創造和管理的dom叫local dom
polymer支持建立multiple local dom 在支持shadow dom的瀏覽器上 shadow dom用來建立local dom
在其餘瀏覽器 polymer經過自定義實現的shadow dom提供local dom

local dom template

使用<dom-module>元素表現local <dom-module>的id元素對應元素 is property在dom-module內 放置<template> polymer會自動拷貝模板內容爲元素的local dom

<dom-module id="x-foo">
  <template>I am x-foo!</template>
</dom-module>

<script>
  Polymer({
    is: 'x-foo'
  });
</script>

scoped styling

<dom-module id="my-element">
  
  <style>
    :host {
      display: block;
      border: 1px solid red;
    }
    #child-element {
      background: yellow;
    }
    /* styling elements distributed to content (via ::content) requires */
    /* using a wrapper element for compatibility with shady DOM         */
    .content-wrapper > ::content .special {
      background: orange;
    }
  </style>
  
  <template>
    <div id="child-element">In local Dom!</div>
    <div class="content-wrapper"><content></content></div>
  </template>
  
</dom-module>

<script>

    Polymer({
        is: 'my-element'
    });

</script>

Styling distributed children (::content)

在這個例子,這個規則

.content-wrapper ::content > .special

翻譯爲

.content-wrapper > special

Automatic node finding

內部元素使用id聲明 使用this.$ hash選擇

DOM (re-)distribution

相關文章
相關標籤/搜索