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>

Styling distributed children (::content)

在这个例子,这个规则

.content-wrapper ::content > .special

翻译为

.content-wrapper > special

Automatic node finding

内部元素使用id声明使用this.$ hash选择