polymer聚合物入门


备注

Polymer项目包括:

  • Polymer库 :Polymer是一个轻量级库,可帮助您充分利用Web组件。使用Web Components,您可以创建可重复使用的自定义元素,这些元素可以与浏览器的内置元素无缝地互操作,或者将您的应用程序分解为适当大小的组件,从而使您的代码更清晰,维护成本更低。
  • WebComponents Polyfill :WebComponents Polyfill是一个未来的目标库,旨在实现W3C Web组件规范。完全实现规范的浏览器不需要webcomponents.js。但是,大多数浏览器仍然缺少规范的某些部分,因此这将是相当长一段时间的依赖。
  • Polymer App Toolbox :通过利用Web组件,Service Worker和HTTP / 2等强大的Web平台功能,Polymer App Toolbox可帮助您以最小的开销和负载构建和交付先进的Progressive Web应用程序。工具箱提供基于组件的体系结构,响应式布局,模块化路由器,本地化支持,本地存储和离线缓存的交钥匙支持,以及非捆绑应用程序资源的高效交付。单独使用这些功能,或一起使用它们来构建功能齐全的Progressive Web App。聚合物在标准的Web Components API上撒上一些糖,使您更容易获得出色的结果。 Polymer库提供了一组用于创建自定义元素的功能。这些功能旨在使自定义元素更容易,更快速地工作,就像标准DOM元素一样。与标准DOM元素类似,Polymer元素可以是:

版本

发布日期
V2.0.0 2017年5月15日
V1.7.0 2016年9月28日
V1.6.1 2016年8月1日
V1.6.0 2016年6月29日
V1.5.0 2016年5月31日
V1.4.0 2016年5月18日
V1.0.0 2015年5月27日

基本元素结构

我们将以下非常基本的元素my-element 保存为src/my-element.html

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

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>
 
  • <link> 使用HTML导入包含Polymer库。
  • <dom-module> 是元素的本地DOM包装器(在本例中是my-element )。
  • <template> 是实际的本地DOM定义。
  • <template><style> 允许您定义作用于此元素及其本地DOM的样式,并且不会影响文档中的任何其他内容。
  • <content> 将保存您放置在元素中的任何内容。
  • :host 伪类与自定义元素( my-element )匹配。
  • Polymer 调用注册该元素。
  • is 属性是元素的名称(它必须匹配<dom-module>id

您可以使用以下方法在应用中导入它:

<link rel="import" href="src/my-element.html">
 

并将其用作标记:

<my-element>Content</my-element>
 

你好,世界

此示例创建名为x-foo 的Polymer元素,其模板绑定到名为“message”的字符串属性。元素的HTML被导入主文档,允许在<body> 使用<x-foo> 标记。

X-foo.html

<dom-module id="x-foo">
  <template>
    <span>{{message}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      properties : {
        message: {
          type: String,
          value: "Hello world!"
        }
      }
    });
  </script>
</dom-module>
 

的index.html

<head>
  <!-- PolyGit used here as CDN for demo purposes only. In production,
       it's recommended to import Polymer and Web Components locally
       from Bower. -->
  <base href="https://polygit.org/polymer+1.6.0/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="x-foo.html">
</head>
<body>
  <x-foo></x-foo>
</body>
 

请参阅CodePen中的演示

从模板设置您的第一个聚合物应用程序

让我们为您自己构建自己非常棒的Progressive Web App with Polymer!

在开始安装Polymer之前,您需要以下内容:

安装Polymer命令行界面

Polymer CLI为您提供Polymer Projects所需的所有工具:

npm install -g polymer-cli
 

从应用模板初始化您的应用

使用polymer init应用模板初始化您的应用

一个很酷的模板是--app-drawer-template 。让我们用它:

polymer init app-drawer-template
 

服务你的应用程序

没有必要为您的第一个真棒聚合物应用程序提供服务。只是serve 它:

polymer serve --open
 

这将在http://localhost:8080 上的默认浏览器中打开应用程序。

使用Polymer目录中的元素

Polymer推出了许多精心打造的元素,供您在应用中使用。

元素目录中浏览它们。

让我们通过包含paper-input文档 )来完成使用元素的工作流程

下载元素

要下载元素,有两种方法:

鲍尔

方便的方法是使用bower install 命令使用命令行:

bower install --save PolymerElements/paper-input

注意: - --save 将元素添加为应用程序的bower.json 的依赖项。

ZIP文件

另一种方法是使用导航中的“添加到集合”将所选元素(在本例中为paper-input )添加到您的集合(在Polymer目录中),并使用右上角的星形图标下载您的集合。

这将生成一个包含该元素及其所有依赖项的.zip文件。然后,您可以将.zip / components内的bower_components 文件夹复制到应用程序的根目录。

在您的应用中导入元素

要导入刚刚安装的元素,请导入相应的.html 文件:

<link rel="import" href="bower_components/paper-input/paper-input.html">
 

使用元素

现在,您可以在导入文档的内部使用paper-input

<paper-input></paper-input>