初识
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 Imports
等 Web Components
技术。
安装 Polymer
Polymer
提供几种方式安装源码。
Bower 安装,推荐使用此方法安装。如果您对
bower
不熟悉,可以自行Google
了解。如果已经安装bower
,可以使用命令直接安装:bower install --save Polymer/polymer
直接下载
zip
包,zip下载地址。GitHub Polymer
源码,Polymer链接。
构建自己的 Polymer 应用
创建一个 Polymer 元素
Polyer
支持创建自定义元素,在外部看来就像其他的 DOM 元素,但是在内部,提供便利的数据绑定和其他丰富的功能,使用更加少的代码,构建复杂的应用。
创建一个新的 Polyer
元素,需要:
- 引入
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>
数据绑定
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 官方博客,是团队小伙伴在开发过程中的学习与分享,如需转载,请注明出处与作者哦 !
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。