Polymer 前端开发框架学习教程

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 的元素:

<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官网就提供许多供使用和学习的基础组件

3、 更多功能

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表达式,基础支持有:

 

标示符和路径。比如: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不仅提供以上的方式绑定数据,而且提供了很多其他的方法,使得模板之间的复用十分便利。更多关于数据绑定可以查看官网

总结

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

 

 

 

 

原文来自:好JSER

在2013年的Google I/O大会上,Google发布了Polymer,它是一个使用Web组件构建Web应用的类库,同时也使用了为Web构建可重用组件的新的HTML 5标准。Polymer为大部分Web组件技术提供了polyfills功能,它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。此外,Polymer提供了一系列的部件的例子,其中包括天气、时钟、股票行情和线型图。 鉴于许多Web框架通过暴露JavaScript API来构建用户界面,而构建用户界面实际上就是生成一堆div和spans标记,Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此,与现在的一般依赖某个Javscript框架的HTML组件相比,Web组件希望能减少碎片。尽管Web组件是一项有趣的新技术,但在浏览器们都支持它们(并且大部分用户都开始使用这些浏览器们)之前,其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills(译者注:polyfills原指一种墙面填料)。polyfill指的是一段代码,它能实现期望最终由浏览器自身实现的功能。如果浏览器本身已经实现了该功能,则polyfill什么都不做。否则,它模拟其实现而不依赖API。例如,webshims库实现了HTML5中各种功能,包括canvas、HTML5表格和在某些尚不支持地理位置定位的浏览器中实现地理位置定位功能。Polymer中的polyfills为需要使用Web组件成功构建应用提供了多种Web技术,包括:    HTML imports:种在其他HTML document中引入和重用HTML document的方法。    自定义元素:让开发者定义和使用自定义DOM元素。    Shadow DOM:在DOM中提供的封装。    模型驱动视图(Model Driven Views):提供象AngularJS的数据绑定。    ·Web动画:实现复杂动画的API。    ·Pointer事件:对鼠标触摸和手写笔事件的封装这些polyfills可以分开使用而不需要使用Polymer的其他部分。此外,Polymer提供:    polymer.js: Polymer的核心运行引擎,能轻易创建自定义属性和事件。    一系列可重用的可视和非可视元素。 标签:Polymer  Web框架
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值