06月15日
Polymer 1.0 浅尝

前言

前两天看到 Polymer 1.0 发布了,出于好奇,来试试水,体验下,感受下 WebComponent 的酷炫。

Requirements

node
bower
浏览器: Chrome, Safari or Firefox

Extras :

Maroon 5 Top 50 Playlist (外放音量 5)
空调温度: 26°C

Before Install

考虑到有些同学可能是第一次使用 node,或者电脑上没有安装过,为了能够让这次 “浅尝” 的目标是 Polymer 1.0 而不是 node.js 或者 bower 之类的,环境这一步,我打算直接使用 Coding WebIDE,这样不需要考虑本地开发环境问题,直接开始玩 Polymer。

  1. 先在 Coding 创建一个项目,公开私有都由你,或者你可以直接 Fork 我的项目来完成下面的所有 DEMO, 点击进入我的项目

    图片

  2. 在项目页找到 WebIDE 标签,并进入 WebIDE,WebIDE 基本使用教程可以随便看下: WebIDE 教程

  3. 点击右上角头像旁边最左边的 Terminal 图标,打开一个 Linux 终端。

    图片

好,现在我们可以正式开始撸代码了!

安装 Polymer 1.0 (Bower

在 Terminal 中运行如下命令:

# 在全局下安装 bower
sudo npm install -g bower
# 初始化 bower 配置,跟着向导走就好了
bower init
# 安装 polymer 1.0 以及相关依赖
bower install --save Polymer/polymer#^1.0.0

安装过后,目录结构看起应该是这样的:

polymer-1.0-demo/
├── bower.json
└── bower_components
    ├── polymer
    └── webcomponentsjs

创建自定义元素

1. 创建如下目录结构

demo/
└── proto-element
    ├── index.html
    └── proto-element.html

Tips: 鼠标右键点击项目目录,选择 New Directory 创建新目录,选择 New File 创建新文件。

图片

2. 创建 index.html 和 proto-element.html 文件

index.html

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>Prototype Element</title>
    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>

proto-element.html

<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<style>
    proto-element {
        color: #A00;
    }
    proto-element b {
        font-size: 2em;
        font-weight: 500;
        border: 1px solid #EEE;
        padding: 5px;
    }
</style>
<dom-module id="proto-element">
    <template>
        <span>I'm <b>proto-element</b>. Checkout my prototype.</span>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'proto-element',
        ready: function () {
            console.log('proto-element is ready!');
        }
    });
</script>

3. 运行

在 Terminal 中运行下面的命令,会安装一个方便好用的静态文件服务器。

# 安装 anywhere 静态文件服务器
sudo npm install -g anywhere

根目录 下运行:

# 以静默方式在 8080 端口启动一个静态文件服务器
anywhere -p 8080 -s

会在 8080 端口启动一个静态文件服务器。

Running at http://172.17.0.84:8080/

4. 访问页面

打开一个新的 Terminal 标签,并在 Terminal 中输入命令:

# 在 WebIDE 中自动生成 Access Url,并打开模拟浏览器标签
open 8080

WebIDE 将自动打开一个模拟浏览器标签:

图片

点击 demo 进入 proto-element 目录即可查看 Demo 效果,或者直接拷贝相应链接到原生浏览器标签中打开。

资源加载顺序:

proto-element 资源加载顺序

从上图可以很清楚的看到,资源是按照 import 关系顺序加载的。
proto-element 初始化后,会在 Terminal 中输出:

proto-element is ready

5. DEMO

点击查看 Proto Element 演示

Local Dom

proto-element.html 中的下面标签即 Local Dom
<span>I'm <b>proto-element</b>. Checkout my prototype.</span>

使用 Local Dom 来排版

demo 目录下创建 local-dom 目录,并分别创建 index.htmluser-avatar.html 文件:
index.html

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>Prototype Element</title>
    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="user-avatar.html">
</head>
<body>
<user-avatar>
    <img src="https://dn-coding-net-production-static.codehub.cn/512b2a62-956b-4ef8-8e84-        b3c66e71468f.png?imageMogr2/auto-orient/format/png/crop/!300x300a0a0"/>
</user-avatar>
<hr/>
<user-avatar>
    <img src="https://dn-coding-net-production-static.codehub.cn/e3438bf4-8e93-4a6d-b116-683b9a30c992.jpg?imageMogr2/auto-orient/format/jpeg/crop/!640x640a0a0/thumbnail/80"/>
</user-avatar>
</body>
</html>

user-avatar.html

<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<dom-module id="user-avatar">
    <style>
        div {
            display: inline-block;
            background-color: #DDD;
            border-radius: 8px;
            padding: 10px;
        }
    </style>
    <template>
        <div>
            <content></content>
        </div>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'user-avatar'
    });
</script>

运行效果:

local dom 排版效果

user-avatar.html 中需要注意的是:

  1. 其中的 <content></content> 标签,这里将会插入 <user-avatar></user-avatar> 内的 dom,也就是这里的两张图片。
  2. <style></style> 标签中的 div 样式在渲染后的 DOM 都自动加上了类名: div.user-avatar,使得 CSS 样式能够具有类似 namespace 的效用(未使用 ShadowDom),从而防止被其他组件污染。

DEMO

点击查看 Local Dom 演示

数据绑定

用于动态更新 Local Dom,使用 {{}} 双括号引用属性

我在 上一个 user-avatar 的示例代码上做了一些扩展,让它能够动态显示用户的姓名。

index.html <user-avatar> 标签上添加 name 属性

<user-avatar>
    <img width="80" height="80" src="..."/>
</user-avatar>
<hr/>
<user-avatar name="彭博">
    <img width="80" height="80" src="..."/>
</user-avatar>

user-avatar.html

<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<dom-module id="user-avatar">
    <style>
        div {
            display: inline-block;
            background-color: #DDD;
            border-radius: 8px;
            padding: 10px;
        }
        p {
            color: #333;
            max-width: 80px;
            margin: 3px 0 0 0;
            padding: 0;
            text-align: center;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap
        }
    </style>
    <template>
        <div title="{{ name }}">
            <content></content>
            <p>{{ name }}</p>
        </div>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'user-avatar',
        properties: {
            name: {
                type: String,
                value: "Coding" //default value
            }
        }
    });
</script>

使用 properties 在 组件中定义属性,并使用 {{}} 引用属性
其中属性的 value 值可充当 默认值,也可不设置。

DEMO

点击查看 Data Binding 演示

总结

本文只是一次试水,稍微感受一下 WebComponent 的特性。
从上面的三个点: 自定义元素、Local Dom 和 数据绑定 来看,Polymer 提供了一种很简洁的 WebComponent 的使用方式。

  1. 通过简单的 link import 导入依赖,并按依赖顺序加载资源
  2. 自定义元素隔离样式以及业务逻辑
  3. Local Dom 能让自定义元素具有更高的灵活性
  4. 数据绑定更是轻松的利用 属性 动态改变自定义元素的内容

本文涉及的源码

polymer-1.0 demo

关于作者


彭博 @ Coding.net / 前端工程师
新的体验总是好的!

24735

5条评论

nice!

匿名5 年前回复
开放了哦
匿名5 年前回复
nihao
匿名5 年前回复
nihao
匿名5 年前回复
开放sudo吗 。。
匿名5 年前回复