使用 Polymer 构建你的前端应用
发布在Coding 技术博客2015年3月3日view:4095
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

使用 Polymer 构建你的前端应用

初识

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

在了解 Polymer 之前,如果你没有了解过 Web Components ,推荐去了解下 Web Components 规范。可以通过 Web Components Wiki了解,Polymer 用到的有 Shadom Dom,Custom Elements,HTML ImportsWeb Components 技术。

安装 Polymer

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

  • Bower 安装,推荐使用此方法安装。如果您对bower不熟悉,可以自行Google了解。如果已经安装bower,可以使用命令直接安装:bower install --save Polymer/polymer

  • 直接下载zip包,zip下载地址

  • GitHub Polymer源码,Polymer链接

构建自己的 Polymer 应用

创建一个 Polymer 元素

Polyer支持创建自定义元素,在外部看来就像其他的 DOM 元素,但是在内部,提供便利的数据绑定和其他丰富的功能,使用更加少的代码,构建复杂的应用。 创建一个新的 Polyer 元素,需要:

  1. 引入 Polymer 核心组件,polymer.html
  2. 使用<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>

你可以在这里查看PolymerAPI

使用自定义的 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-elementspaper-elements

更多功能

Shadow DOM

Polymer可以使用Shadow DOM从模板中分离视图内容,创建一个使用Shadow DOMtemplate十分简单,使用 <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表达式,基础支持有:

  • 标示符和路径。比如:foomatch.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表达式,跟 AngularFilter有些类似。详见

数据绑定

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 官方博客,是团队小伙伴在开发过程中的学习与分享,如需转载,请注明出处与作者哦 !

评论
发表评论
3年前

@时光Emit 是不是看错啦? AngularJS 应用身份认证的技巧 是这篇哦! http://www.html-js.com/article/2891

3年前

文不对题,看见首页标题“AngularJS 应用身份认证的技巧”点进来的。

3年前

very good

3年前
添加了一枚【评注】:凤飞飞
3年前
添加了一枚【评注】:erer
3年前
添加了一枚【评注】:f
3年前
添加了一枚【评注】:c
3年前
添加了一枚【评注】:稍等
WRITTEN BY
Coding
云端开发平台 > https://Coding.net/
TA的新浪微博
PUBLISHED IN
Coding 技术博客

Coding.net 为软件开发者提供基于云计算技术的软件开发平台,包括项目管理,代码托管,运行空间和质量控制等等。目前,Coding.net 的核心业务包括:

代码托管平台 通过代码版本控制系统 git 进行公开项目或者私有项目的源码托管。

在线运行环境 无需重复搭建配置环境,一键部署,在云端进行项目展示。

代码质量监控 通过自动化静态代码分析等管理工具,发现代码问题,获取代码度量信息,及时了解代码质量状况,保证项目管理质量。

项目管理平台 通过社会化项目协作管理平台,开发团队成员之间可自由进行信息交流、知识分享、任务管理和项目讨论,让远程协作和云端管理变得简单高效。

Coding 官方技术博客 : http://blog.coding.net/

我的收藏