Polymer是什么？

Polymer英文为

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

应用在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.

<!-- Polyfill Web Components for older browsers -->

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

<!-- Import element -->

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

<!-- Use element -->

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

  1. Templates, which define chunks of markup that are inert but can be activated for use later.
  2. Decorators, which apply templates based on CSS selectors to affect rich visual and behavioral changes to documents.
  3. Custom Elements, which let authors define their own elements, with new tag names and new script interfaces.
  4. Shadow DOM, which encapsulates a DOM subtree for more reliable composition of user interface elements.
  5. 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>

运行效果：

Polymer初探的更多相关文章

  1. 初探领域驱动设计（2）Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

  2. CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  3. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  4. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  5. .NET文件并发与RabbitMQ（初探RabbitMQ）

    本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...

  6. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  7. 【手把手教你全文检索】Apache Lucene初探

    PS: 苦学一周全文检索,由原来的搜索小白,到初次涉猎,感觉每门技术都博大精深,其中精髓亦是不可一日而语.那小博猪就简单介绍一下这一周的学习历程,仅供各位程序猿们参考,这其中不涉及任何私密话题,因此也 ...

  8. Web Components初探

    本文来自 mweb.baidu.com 做最好的无线WEB研发团队 是随着 Web 应用不断丰富,过度分离的设计也会带来可重用性上的问题.于是各家显神通,各种 UI 组件工具库层出不穷,煞有八仙过海之 ...

  9. Key/Value之王Memcached初探：三、Memcached解决Session的分布式存储场景的应用

    一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...

随机推荐

  1. luogu4162 最长距离 (dijkstra)

    相邻格子连双向边,如果一个点有障碍,那进它的边权就是1,否则是0 这样的话,两点间的最短路+[起始点有障碍],就是从一个点走到另一个需要清除的障碍的个数 求出最短路后枚举这两个点就可以了 然而30*3 ...

  2. CAN总线网络的传输模式

    CAN总线网络的传输模式根据触发条件的不同,在车身CAN网络中可分为事件型.周期性及混合型三种传输模式: 1.事件型传输模式: 随着类型或数据的转变及时发送的消息.此类型消息的好处是极少占用总线资源, ...

  3. zabbix3.2监控mysql

    应用环境:ZABBIX一款强大的企业级可分布式的开源监控工具,从2.2版本开始支持MySQL监控(自带监控模板), 不过,默认添加MySQL模板后是无法使用的,这里小记一下部署监控MySQL的简单全过 ...

  4. 基于配置文件的redis的主从复制

    redis中主从复制有很多种配置方法: 1. 使用配置文件即为redis.conf来配置 在随从redis中配置 # slaveof {masterHost} {MastePort} slaveof ...

  5. CodeFroces-- 511div2 C. Enlarge GCD

    题目链接:C. Enlarge GCD 给你一个序列 删除一些数看可以让他们之间的gcd变大如果可以输出删除数量最小的个数 先求出共同 gcd 然后除去 找出出现最多的质数 然后减去就可以了 #inc ...

  6. 第十八节，TensorFlow中使用批量归一化(BN)

    在深度学习章节里,已经介绍了批量归一化的概念,详情请点击这里:第九节,改善深层神经网络:超参数调试.正则化以优化(下) 神经网络在进行训练时,主要是用来学习数据的分布规律,如果数据的训练部分和测试部分 ...

  7. nohup报错

    1 这是脚本编码的问题 解决办法: (1)用vi打开对应的脚本 (2)在命令行下(:set ff?),看一下当前文档的编码格式 ,有两种情况 fileformat=unix和fileformat=do ...

  8. MFC调用halcon生成的cpp内容

    打开VS,文件——新建——项目——Visual C++——MFC——MFC应用程序,注意下图,其他默认.窗体1个Button.1个Picture Control [VS配置Halcon] 1.若hal ...

  9. （基础 输入方法 栈）P1427 小鱼的数字游戏 洛谷

    题目描述 小鱼最近被要求参加一个数字游戏,要求它把看到的一串数字(长度不一定,以0结束,最多不超过100个,数字不超过2^32-1),记住了然后反着念出来(表示结束的数字0就不要念出来了).这对小鱼的 ...

  10. 6.Django Admin学习

    ##创建超级用户 python manage.py createsuperuser 英文界面换成中文: 修改setting.py zh_Hans ##后台显示数据 django requets get ...