polymer

polymer 是用來構建web components的好框架

2015年 4月 

angular2 依舊跳票 

只能玩玩polymer了 不過這個框架也搞破壞性更新

好吧 一個一個開始玩

我會配圖的 

安裝 

其餘不推薦 就用bower安裝吧 

沒有bower.ini的走一遍

bower init

作過的

bower install --save Polymer/polymer#^0.8.0-rc.2

如何構建一個新的元素   

    你要先引入import一個polymer庫

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

   先搞個標籤

<dom-module id="x-foo">
    <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: "x-foo",
        // add properties and methods on the element's prototype
        properties: {
            // declare properties for the element's public API
            greeting: {
                type: String,
                value: "Hello!"
            }
        }
    });
</script>

這個時候你就有一個本身的標籤了

<x-foo></x-foo>

好的 如何獲取標籤呢  我喜歡用queryselector 你愛用啥用啥 由於那就是個標籤 

var el1 = document.querySelector('x-foo');
console.dir(el1);

看看有什麼 

element 元素 shadow dom 無法模擬徹底 這個沒辦法

console臺打印結構

多了點方法 其他就是個dom

還有就是官方最推薦的寫法 

MyElement = Polymer({

  is: 'my-element',

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

  configureWithBar: function(bar) {
    ...
  }
 });
var el = new MyElement(42, 'octopus');