Polymer 前端开发框架学习教程

来源：互联网发布：知乎分享你刚编的经历编辑：程序博客网时间：2024/04/30 06:57

Polymer 是在 Google I/O 2013 发布的一个新的 Web UI 框架。2015-5-29日在Google I/O 2015将Polymer升级到了1.0版本。Polymer的核心原则是 “Everything is an element”。它是一款实用、基于事件驱动、封装性和互操作性强的 Web UI 开发框架。如果你还不了解，建议你从这篇文章开始学习Polymer 。

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

1、安装 POLYMER

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

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

直接下载zip包，zip 下载地址。

GitHub Polymer源码，Polymer 链接。

2、构建自己的 POLYMER 应用

创建一个 POLYMER 元素

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

创建一个新的 Polyer 元素，需要：

引入 Polymer 核心组件，polymer.html

使用<polymer-element>声明自定义元素

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

<polymer-element name="my-element">

<span>This is element content</span>

</template>

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>

</head>

<body>

<my-element></my-element>

</body

</html>

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

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

3、更多功能

SHADOW DOM

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

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

<span>This is content: </span>

</template>

</polymer-element>

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

<my-element>

<q>Hello World</q>

</my-element>

布局属性

Polymer使用CSS Flexbox定义了一系列基础布局样式。
只需要简单的在标签上引入布局属性就可以轻松使用。

</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 }}的方式，也可以使用如下方式处理比较复杂的计算：

<polymer-element name="my-element" >

<span>The result is {{result}}</span>

</template>

Polymer({

computed: {

result: '1 + 100'

}

})

</script>

</polymer-element>

表达式 Scope

Filter 表达式。使用 {{expression | filterName }}执行 Filter 表达式，跟 Angular 的Filter有些类似.

数据绑定

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

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

He's name is /{/{name/}/}.

</template>

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

He's name is /{/{p.name/}/}.

</template>

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

</template>

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

The conditional is true

</template>

Polymer不仅提供以上的方式绑定数据，而且提供了很多其他的方法，使得模板之间的复用十分便利。更多关于数据绑定可以查看官网

总结

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

原文来自：好JSER

0 0