polymer web componets 大前端

時間 2019-11-06

標籤 polymer web componets 前端欄目 HTML 简体版

原文原文鏈接

大前端

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