Polymer初探

Polymer是什么？

Polymer英文为

n.聚合物；多聚体
网络高分子；聚合体；高分子聚合物

Image result for polymer

应用在Web组件场景，表达的是，一个一个小的Web组件，可以通过此框架聚合为一个整个页面。

https://github.com/Polymer/polymer

Polymer lets you build encapsulated, reusable elements that work just like standard HTML elements, to use in building web applications.

<script src="webcomponentsjs/webcomponents-lite.min.js"></script>


<link rel="import" href="google-map.html">


<google-map latitude="37.790" longitude="-122.390"></google-map>
Polymer is a lightweight library built on top of the web standards-based Web Components API's, and makes it easier to build your very own custom HTML elements. Creating reusable custom elements - and using elements built by others - can make building complex web applications easier and more efficient. By being based on the Web Components API's built in the browser (or polyfilled where needed), Polymer elements are interoperable at the browser level, and can be used with other frameworks or libraries that work with modern browsers.

Web Components标准

http://www.cnblogs.com/ywb15ba/p/polymer.html

polymer由谷歌的Palm webOS团队打造，并在2013 Google I/O大会上推出，旨在实现Web Components，用最少的代码，解除框架间的限制的UI 框架。

polymer分层结构：

元素层（Elemets），分为UI elements（如select、tab）、 non-UI elements（如ajax、animate）

核心层：polymer.html+polymer.js，是创建polymer element的必要依赖。
基础层：platform.js，是平台兼容，和响应式代码实现的必要依赖，创建应用必须首先引入它。其中大部分API最终将成为原生浏览器API。

通过<link rel="import" href="component-name.html">方式引入组件，即Web Components的Imports规范。

规范

https://www.w3.org/TR/2013/WD-components-intro-20130606/

The component model for the Web ("Web Components") consists of five pieces:

Templates, which define chunks of markup that are inert but can be activated for use later.

Decorators, which apply templates based on CSS selectors to affect rich visual and behavioral changes to documents.

Custom Elements, which let authors define their own elements, with new tag names and new script interfaces.

Shadow DOM, which encapsulates a DOM subtree for more reliable composition of user interface elements.

Imports, which defines how templates, decorators and custom elements are packaged and loaded as a resource.

https://developer.mozilla.org/en-US/docs/Web/Web_Components

Web Components consists of several separate technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology. They are part of the browser, and so they do not need external libraries like jQuery or Dojo. An existing Web Component can be used without writing code, simply by adding an import statement to an HTML page. Web Components use new or still-developing standard browser capabilities.

Sometimes there is some confusion regarding Web Components and Google Polymer. Polymer is a framework that is based on Web Components technologies. You can make and use Web Components without Polymer.

http://fex.baidu.com/blog/2014/05/web-components-future-oriented/

首先需要说明的是这不是一篇 Web Components 的科普文章，如果对此了解不多推荐先读《A Guide to Web Components》。有句古话-“授人以鱼，不如授人以渔”，如果把组件比作“鱼”的话，对于前端开发者而言，W3C组织制定的HTML标准以及浏览器厂商的实现都是“鱼”而不是“渔”，开发者在需求无法满足的情况下通过现有技术创造了各种组件，虽然短期满足了需求但是由于严重缺乏标准，导致同一个组件有成千上万的相似实现但它们却无法相互重用，这很大程度上制约了组件化的最大价值-重用，Web Components则在组件标准化方面向前迈了一大步。

DEMO

https://github.com/fdandan/polymer

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Polymer Demo</title>
  <link rel="stylesheet" href="css/layout.css">

  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <script src="js/jquery-2.1.4.min.js"></script>

  <link rel="import" href="components/demo-1/demo-1.html">
</head>
<body>
  <div id="container" style="height:550px;1000px;border:1px solid #ccc;margin: 0 auto">
    <demo-1></demo-1>
  </div>
</body>
</html>

组件demo1

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../demo-2/demo-2.html">

<dom-module id="demo-1">
  <style>
  :host: {
    display: block;
  }
  .container {
    padding: 20px;
  }
  demo-2: {
    display: block;
  }
  </style>
  <template>
    <div class="container">
      <div class="title">{{txt}}</div>
      <demo-2 some-prop="{{someProp}}"></demo-2>
      <demo-2 some-prop="{{someProp}}"></demo-2>
      
    </div>     
  </template>
  <script>
  Polymer({
    properties: {
      txt: {
        type: String,
        value: 'this is component-1'
      },
      someProp: {
        type: String,
        value: 'this is component-2, I am in component-1'
      }
    },
    ready: function() {
      this.items = [1,2,3,4]
      this.flag = true
    }
  })
  </script>
</dom-mudule>

组件DEMO2

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

<dom-module id="demo-2">
  <style>
  host:{
    display: block;
  }
  .container {
    height: 200px;
    border: 1px dashed #555;
    padding: 20px;
    margin-bottom: 10px;
  }
  .title {
    padding-bottom: 30px;
  }
  input{
    width: 50px;
  }
  </style>
  <template>
    <div class="container">
      <div class="title">
        <span>{{someProp}}</span>
      </div>
      <div vertical layout>
        <span>This is template repeator(dom-repeat)</span>
        <div horizontal layout style="padding-bottom:30px;">
          <template is="dom-repeat" items={{items}}>
            <div flex on-click="onButtonClicked" data-index$="{{index}}"><input type="button" value="{{index}}"/></div>
          </template>
      </div>
      
      </div>
      <template is="dom-if" if="{{flag}}">
        <div>this is condition complate(dom-if)</div>
      </template>
      <br>
      <button on-click="toggleDiv">点我<span>{{msg}}</span></button>
    </div>
  </template>
  <script>
  Polymer({
    properties: {
      msg: {
        type: String,
        value: '隐藏文本'
      },
      flag: {
        type: Boolean,
        value: true
      }
    },
    onButtonClicked: function(e) { 
      alert(e.currentTarget.dataset.index)    
    },
    toggleDiv: function() {
      if (this.flag) {
        this.msg = '显示文本'
        this.flag = false
      } else {
        this.msg = '隐藏文本'
        this.flag = true
      }
    },
    ready: function() { 
      this.items = [1, 2, 3, 4]
    }
  })
  </script>
</dom-module>

运行效果：