使用 Polymer 构建你的前端应用
使用 Polymer 构建你的前端应用初识
Polyme 是 Google I/O 201 发布的一个新的Web UI框架。 Polymer 的核心原则是Everything is an element 。它是一款实用、基于事件驱动、封装性和互操作性强的Web UI开发框架。
在了解 Polymer 之前，如果你没有了解过Web Components ，推荐去了解下Web Components 规范。可以通过 Web Components Wiki了解，Polymer 用到的有Shadom Dom ,Custom Element, HTML Imports 等 Web Components 技术。
安装 Polymer
Polyme 提供几种方式安装源码。
Bower 安装，推荐使用此方法安装。如果您对 bower 不熟悉，可以自行 Google 了解。如果已经安 bower ，可以使用命令直接安装： bower install --save Polymer/polymer
直接下载 zip 包， zip下载地址 。
GitHub Polymer 源码，Polymer链接。
构建自己的 Polymer 应用
创建一个 Polymer 元素
Polyer 支持创建自定义元素，在外部看来就像其他的 DOM 元素，但是在内部，提供便利的数据绑定和其他丰富的功能，使用更加少的代码，构建复杂的应用。
创建一个新的 Polye 元素，需要：
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>Polyme 元素主要由俩部分构成, <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 Flexbo 定义了一系列基础布局样式。具体可以点击这里查看。
只需要简单的在标签上引入布局属性就可以轻松使用。<div horizontal layout>
<div>A</div>
<div>B</div>
<div>C</div>模板表达式
Polymer 支持在模板中使用 {{}} 执行 javascript 表达式，基础支持有：
[*]标示符和路径。比如： foo、 match.set.game
[*]数组访问。比如： array
[*]非逻辑。比如： !
[*]一元表达式。比如： +i , -a
[*]二进制操作。比如： + , - , * , / , %
[*]比较操作。比如： == , < , > , <= , >= , != , === , !==
[*]逻辑比较。比如: foo && bar , foo || bar
[*]三元表达式。比如： a ? b : c
[*]分组。比如：`(a + b) * (c + d)`
[*]字符值 （数字、字符，null,undefined） 。
[*]数组和对象。如： , {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详见(请到 blog.coding.net 阅读原文)
[*]Filter表达式。使用 {{expression | filterName }} 执行 Filter表达式，跟Angular 的 Filter 有些类似。详见 (请到 blog.coding.net 阅读原文)
数据绑定
Polymer提供多种数据绑定方法。
[*]单模板实例。使用 bind 属性绑定一个对象到模板实例,详见 。 (请到 blog.coding.net 阅读原文)
<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`属性迭代， 详见 (请到 blog.coding.net 阅读原文) ：<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 官方博客 ( blog.coding.net)，是团队小伙伴在开发过程中的学习与分享，如需转载，请注明出处与作者哦 !
页:
[1]