使用 Polymer 构建你的前端应用

时间 2019-12-08

标签使用 polymer 构建前端应用繁體版

原文原文链接

初识

Polymer 是在 Google I/O 2013 发布的一个新的 Web UI 框架。Polymer的核心原则是 “Everything is an element”。它是一款实用、基于事件驱动、封装性和互操做性强的 Web UI 开发框架。javascript

在了解 Polymer 以前，若是你没有了解过 Web Components ，推荐去了解下 Web Components 规范。能够经过 Web Components Wiki了解，Polymer 用到的有 Shadom Dom,Custom Elements,HTML Imports 等 Web Components 技术。html

安装 Polymer

Polymer 提供几种方式安装源码。java

Bower 安装，推荐使用此方法安装。若是您对bower不熟悉，能够自行Google了解。若是已经安装bower，可使用命令直接安装：bower install --save Polymer/polymergit
直接下载zip包，zip下载地址。github
GitHub Polymer源码，Polymer连接。web

构建本身的 Polymer 应用

建立一个 Polymer 元素

Polyer支持建立自定义元素，在外部看来就像其余的 DOM 元素，可是在内部，提供便利的数据绑定和其余丰富的功能，使用更加少的代码，构建复杂的应用。
建立一个新的 Polyer 元素，须要：express

引入 Polymer 核心组件，polymer.html
使用<polymer-element>声明自定义元素

下面例子，将建立一个名字为 my-element 的元素：数组

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element">
    <template>
        <span>This is element content</span>
    </template>
    <script>
      Polymer({ ready: function() {
        //...
      }})
    </script>
</polymer-element>

Polymer元素主要由俩部分构成,<template>和<script>,其中<template>是Polymer元素的HTML模板，<script>是模板对应的 javascript代码。
注意到<script>标签中的Polymer构造方法，Polymer构造方法是一个对document.registerElement的包装，而且提供一些特殊的功能，好比数据绑定和事件映射，Polymer构造方法接受一个对象参数，定义该元素的prototype。
有些 Polymer元素并不须要 javascript 代码，可使用noscript属性声明：浏览器

<polymer-element name="my-element" noscript>
...
</polymer-element>

你能够在这里查看Polymer的 API 。框架

使用自定义的 Polymer 元素

定义好本身的 Polymer元素以后，就能够经过import的方式引入它（经过import引入的文件，即便引入屡次，浏览器也只会请求一次。）。在 HTML代码中引入自定义的元素而且使用它。首先须要引入 webcomponents.js依赖。

<!DOCTYPE html>
<html>
  <head>
    <script src="webcomponents.js"></script>
    <link rel="import" href="/elements/my-element/my-element.html">
  </head>
  <body>
    <my-element></my-element>
  </body>
</html>

遵循Everything is an element的原则，在HTML页面中，咱们会不多看到须要写一些 javascript代码，这样就使得HTML文件代码看起来很清爽。

虽然上面例子看起来只有短短几行简单的代码，可是Polymer支持建立丰富的可复用的组件，其中Polymer官网就提供许多供使用和学习的基础组件core-elements和paper-elements。

更多功能

Shadow DOM

在Polymer可使用Shadow DOM从模板中分离视图内容，建立一个使用Shadow DOM的template十分简单，使用 <content></content>来选择须要替换的元素便可。

<polymer-element name="my-element" noscript>
  <template>
    <span>This is content: </span>
      <content select="q"></content>
  </template>
</polymer-element>

使用的时候，只须要在Polymer标签内部嵌入Light DOM。

<my-element>
  <q>Hello World</q> <!--Light DOM-->
</my-element>

布局属性

Polymer使用CSS Flexbox定义了一系列基础布局样式。具体能够点击这里查看。
只须要简单的在标签上引入布局属性就能够轻松使用。

<div horizontal layout>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

模板表达式

Polymer支持在模板中使用{{}}执行javascript表达式，基础支持有：

标示符和路径。好比：foo 、match.set.game
数组访问。好比：array[i]
非逻辑。好比：!
一元表达式。好比：+i,-a
二进制操做。好比：+,-,*,/,%
比较操做。好比：==,<,>,<=,>=,!=,===,!==
逻辑比较。好比:foo && bar,foo || bar
三元表达式。好比：a ? b : c
分组。好比：(a + b) * (c + d)
字符值（数字、字符，null,undefined）。
数组和对象。如：[foo, 1],{id: 1, foo: bar}
函数。如：reverse(my_list)

Polymer 还支持如下表达式：

计算表达式。能够直接使用相似 {{a + b}}的方式，也可使用以下方式处理比较复杂的计算：

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element" >
    <template>
        <span>The result is {{result}}</span>
    </template>
    <script>
      Polymer({
        computed: {
            result: '1 + 100'
        }
      })
    </script>
</polymer-element>

表达式 Scope。详见
Filter 表达式。使用{{expression | filterName }}执行 Filter表达式，跟 Angular 的Filter有些相似。详见

数据绑定

Polymer 提供多种数据绑定方法。

单模板实例。使用bind属性绑定一个对象到模板实例,详见。

<template>
      <template bind="{{person}}">
        He's name is {{name}}.
      </template>
</template>

还可使用as为对象建立一个命名空间：

<template>
      <template bind="{{person as p}}">
        He's name is {{p.name}}.
      </template>
</template>

模板迭代。使用repeat属性迭代，详见：

<template>
  <template repeat="{{user in users}}">
    {{user.name}}
  </template>
</template>

条件绑定
使用if属性有条件的绑定模板实例：

<template>
      <template if="{{conditional}}">
         The conditional is true
      </template>
</template>

Polymer不只提供以上的方式绑定数据，并且提供了不少其余的方法，使得模板之间的复用十分便利。更多关于数据绑定能够查看官网API

总结

Polymer拥有许多基础模板和很强的组件模型。做为一款还在成长中的Web UI框架，其不少设计思想值得学习和思考。

Coding 是个云端开发协做平台，极简的一站式开发服务包括了项目协做，代码托管，质量检测，演示部署，代码在线阅读等功能。Coding 官方博客，是团队小伙伴在开发过程当中的学习与分享，如需转载，请注明出处与做者哦 !