大前端

东南水乡 一恭弘=叶 恭弘小舟拂过水面 船上两位大侠把酒言欢 一名是玉真人 另一名是张真人 两人喝到高兴处 变作春联起来 上联 前端研讨，研讨个屁~ 下联 前端设想，设想个屁~ 横批 前端sb

特征

polymer 供应建立自定义和规范dom元素相似的自定义元素功用

• 能够运用constructor或许document.createElement建立元素

• 能够设置元素attributes或properties

• 能够在标签内部定义一些dom

• 能够对属性和属性的变化处置惩罚

• 能够有一些默许的款式,在外部修内部款式

• 能够供应要领许可你来支配它的内部状况

一个基础的polymer元素定义以下:

<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>

像一般标签一样运用

<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>';
  }

});

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