Polymer初探

時間 2019-11-19

標籤 polymer 初探简体版

原文原文鏈接

Polymer是什麼？

Polymer英文爲css

n.聚合物；多聚體
網絡高分子；聚合體；高分子聚合物

應用在Web組件場景，表達的是，一個一個小的Web組件，能夠經過此框架聚合爲一個整個頁面。html

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

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

Web Components標準

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

polymer由谷歌的Palm webOS團隊打造，並在2013 Google I/O大會上推出，旨在實現Web Components，用最少的代碼，解除框架間的限制的UI 框架。web

polymer分層結構：ajax

元素層（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;width: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>

運行效果：

1. polymer
2. Alias: Potteryable precursor polymer
3. Polymer 1.0 dom querySelector
4. [譯]關於Polymer 2.0
5. polymer web componets 大前端
6. polymer展現HTML標籤
7. polymer使用經驗分享
8. 【Polymer】NUMA-aware Graph-structured Analysis
9. IP、UDP初探
10. GPUImage 初探
更多相關文章...
• 探索Redis事務回滾 - Redis教程
• 使用TCP協議檢測防火牆 - TCP/IP教程
• 適用於PHP初學者的學習線路和建議
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。