Polymer创建Web组件

Polymer创建Web组件

浏览:79

现在要构建一个主流的Web应用需要很多的工具。包括预处理器,JavaScript框架,测试工具等等各种各样的工具。随着应用的复杂度越来越高,有越来越多的工具涌现出来。要不这么复杂就好了!

Web Component技术的出现就是为了解决这些问题。它提供了一种统一的方式创建新元素,这些元素包含丰富的功能,而且不需要使用而外的工具。Web组件由四个规范(Custom Elements、Templates、Shadow DOM和HTML imports)组成,这四个规范已经由W3C具体化了。

为了填补空隙,让开发者现在就可以使用这些丰富的功能,Google创建了Polymer,提供了一系列的polyfills,让你今天就可以使用Web Component。让我们来深入了解一下吧。

什么是Polymer

就像上面提到的,Polymer包括了一系列的polyfills,这些polyfills帮助你创建可以运行在所有主流浏览器中的Web Component。它提供了用来定义、创建并渲染复杂的自定义元素的框架,使用的标记都是你熟知的简单标记。我想说的是,它从下面这几方面简化了我们使用复杂组件的方式: 

  • 封装复杂的代码和结构
  • 允许开发者使用简单易用的命名约定
  • 提供一套预定义的UI元素,用来扩展

最重要一点别忘了,这个框架本身是基于那些独立规范所指方向开发的,这些规范由W3C来制定,因此它提供的基础会根据规范内容的演化而演化。

这个类库所能做的就是允许你创建可重用的组件,这些组件像正真的DOM元素一样工作,除此之外它还能减少我们对JavaScript依赖,避免了复杂的来渲染出复杂的UI界面。

举个来自Polymer站点上的例子。比如说我想在网页中渲染一个可以工作的时钟,过去的话我需要包含大量难看的JavaScript代码,但是现在如果使用Polymer,我可以使用下面这样的语法:

<polymer-ui-clock></polymer-ui-clock>

这和我们之前熟知的HTML标记很像,比起JavaScript更易编写、阅读和维护。结果看起来像下面这样:


而且,既然它本身是一个普通的DOM元素,你可以使用CSS来定义它的样式:

polymer-ui-clock {
  width: 320px;
  height: 320px;
  display: inline-block;
  background: url("../assets/glass.png") no-repeat;
  background-size: cover;
  border: 4px solid rgba(32, 32, 32, 0.3);
}

它一定不是最漂亮的时钟,但这不重要。关键是你可以按照自己的喜好自定义这个组件,在其他地方通过简单并容易维护的语法来使用它。

安装Polymer

有三种方式安装使用Polymer: 

  • 使用Bower包管理器(推荐)
  • 使用CloudFare cdnjs提供服务的类库
  • 通过Git安装

在这三种方式中,最简单也是最推荐的是使用Bower来安装。它不但简单,而且还可以管理Polymer有可能用到的各种依赖。即,如果你选择安装某个特殊的UI组件,这个组件还依赖于其他组件,Bower可以帮助你管理它们。


Bower是一个Node模块,因此你需要安装Node.js。在命令行中输入:

npm install -g bower

这会把Bower从npm registry中拉下来安装好,你可以全局使用Bower命令。接下来,使用Bower来安装,像下面这样:

bower install

最起码,你需要安装Polymer平台以及几个核心的组件,因为它们为你提供了基础,你可以基于它们创建并运动你自定义的元素:

bower install --save Polymer/platform
bower install --save Polymer/polymer

简化输入:

bower install --save Polymer/platform Polymer/polymer

Polymer同时提供了一系列丰富的预定义元素,你可以直接利用它们。它们由UI和非UI基础元素组成,提供了如下功能:

  • 动画
  • Accordion
  • 网格布局
  • Ajax
  • 菜单
  • Tab

这只是一点皮毛而已。在官网上还有很多,包括完整的代码,作为一个学习工具提供出来,你还可以根据自己的需要定制它们的功能。

你可以选择如何安装这些组件。只安装你需要的,或者全部安装:

bower install Polymer/core-elements
bower install Polymer/polymer-ui-elements

这可能大动干戈了。不过当你开始学习Polymer,这应该是最简单的方法,帮助你认识它可以做些什么。
一旦你足够熟悉这个框架之后,你可以单独挑选你想使用的组件,安装它们:

bower install Polymer/polymer-ui-accordion

这就是Bower的优美之处。每个组件都包含了一个bower.json文件,在这个文件中标明了组件的依赖。因此,如果你正在安装Accordion,查看配置,可以发现它不但依赖于mainpolymer,还依赖于selector和colapsible组件。

{
  "name": "polymer-ui-accordion",
  "private": true,
  "dependencies": {
    "polymer": "Polymer/polymer#0.2.0",
    "polymer-selector": "Polymer/polymer-selector#0.2.0",
    "polymer-ui-collapsible": "Polymer/polymer-ui-collapsible#0.2.0"
  },
  "version": "0.2.0"
}

关键是你无须担心这些依赖,Bower已经帮你管理好了,这夜正式推荐使用它来安装Polymer的原因。

通过Bower来安装,会在你的项目中创建一个bower_compoments的文件夹,所有Polymer需要东西都存放在这里。

创建一个新的Polymer元素

Polymer官网上对自定义元素的描述很简单:

自定义元素是构建Polymer应用的基础组件。你通过组合自定元素来创建应用。这些自定义组件可能来自于Polymer,你自己创建的,或者是第三方的元素,没关系。

Polymer给了我们这样的能力,从无到有创建自定义元素,甚至重用其他元素来扩展我们自定义的。首先我们必须先创建自定义元素的模板,总之,这个模板是HTML、CSS和JavaScript的集合,包含了所有你使用这个元素是所提供的功能。它基于WhatWG HTML模板规范,意味着,它将提供对客户端模板的原生支持。

让我们来看一个简单的Polymer模板的例子:

<link rel="import" href="../bower_components/polymer/polymer.html">
 
<polymer-element name="lorem-element">
  <template>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </template>
</polymer-element>

你可以使用下面的标记,快速地向你的代码插入 Lorem Ipsum文本:

<lorem-element></lorem-element>

首先,需要包含Polymer core,它包含了允许你自定义元素的核心API:

<link rel="import" href="../bower_components/polymer/polymer.html">

下一步,使用Polymer的polymer-element命令,定义新元素的标签名:

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

我将新元素起名为lorem-element。必须包含name属性,而且必须包含一个短横线”-”。
接下来,我们使用template命令来包裹标记的主体部分和JavaScript代码,它们将组成我们新的元素。在这个简单的例子中,我包裹了一些 Lorem Ipsum文本,将它们放在一个段落标记中。
我的自定义元素做好了,现在我可以使用它了。

使用自己新定义的Polymer元素

记住,组件需要导入到你的那些想使用它的Web应用中。这可以实现,因为Polymer已经实现了HTML Imports规范,这个规范允许你其他HTML文档中包含并重用HTML标记。
首先,你需要引入platform.js,它提供了对原生API的支持:

<script src="bower_components/platform/platform.js"></script>

接着,在页面中引用我们自定义的元素:

<link rel="import" href="lorem-element.html">

现在,新的自定义元素就可用了,你可这么写:

<div><lorem-element></lorem-element></div>

你还完全可以定制元素的外观:

<style>
      div { width: 300px;}
      lorem-element { font: bold 16px cursive;}
</style>

这个例子非常简单,让我们看点更复杂的。

为你的元素添加更多的功能

别忘了,我提过你可以利用现有的元素来增强你自定的元素。让我看看下面这个例子:

假设,我需要一个这样的元素,从Reddit的一个子站中抓取数据。我可以利用Polymer提供的Ajax组件来实现,将其导入到自定义组件中:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
 
<polymer-element name="reddit-element">
  <template>
    <core-ajax url="http://www.reddit.com//r/aww/about.json" auto response="{{resp}}"></core-ajax>
    <p>{{resp.data.public_description}}</p>
  </template>
</polymer-element>

看,我把Polymer的Ajax组件导入进来,将其放到我的template中。现在,我新的元素可以很容易地使用XHR获取JSON数据,然后将其填入到段落标记中,即子站的描述:

Things that make you go AWW! Like puppies. And bunnies... and so on... A place for really cute pictures, videos and stories!

响应返回,Polymer建立的双向绑定使得,我可以通过像{{resp.data.public_description}}这样双花括号包裹的方式来使用数据。

这很酷,但通常我们不会把URL地址硬写在代码里。我们继续扩展这个元素,为其添加属性。添加的方法很简单,首先,你需要更新polymer-element命令,标明你需要为自定义元素添加的属性:

<polymer-element name="reddit-element" attributes="subreddit">

在本例中,我想把Reddit子站地址传递给自定义元素,元素通过这个地址来获取数据。现在我把调用polymer-ajax改成这样:

<core-ajax url="reddit.com: over 18?{{subreddit}}/about.json" auto response="{{resp}}"></core-ajax>

注意我是如何使用Polymer的数据绑定使用{{subreddit}}来动态地创建URL地址的。现在,我可以更新自定义元素的使用方式,传递一个我想要的子站给它:

<reddit-element subreddit="aww"></reddit-element>

最后,为了保证代码出问题,我给自定义属性添加个默认值。在元素的template中添加如下代码: 

<script>
  Polymer('reddit-element', {
    subreddit: "aww"
  });
</script>

这保证自定义元素暴露的属性一定会有一个值。最终的代码是这样的:
reddit.com: over 18?{{subreddit}}/about.json" auto response="{{resp}}">

{{resp.data.public_description}}

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
 
<polymer-element name="reddit-element" attributes="subreddit">
  <template>
    <core-ajax url="reddit.com: over 18?{{subreddit}}/about.json" auto response="{{resp}}"></core-ajax>
    <p>{{resp.data.public_description}}</p>
  </template>
  <script>
    Polymer('reddit-element', {
      // These default values are overridden
      // by the user's attribute values.
      subreddit: "aww"
    });
  </script>
</polymer-element>

还有其他一些事情可以做。例如,添加自定义的回调处理器,处理用户事件,创建Mutation Observers(变化监视器)来更改DOM元素等等。

未来决于此刻

Web Component将改变我们创建Web应用的方式,而Polymer让这成为现实。现在你可以创建自定义的可维护的组件,满足你应用的特殊需要。你可以很容易地将组件分享给其他团队或者社区,大家可以很轻松地分享和受益这些封装好的组件。

原文:Using Polymer to Create Web Components


频道:Web