JavaScript Polymer 1.0 浅尝

coding · June 17, 2015 · Last by happypeter replied at August 01, 2015 · 5730 hits

Topic has been selected as the excellent topic by the admin.

前言

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

Requirements

node bower 浏览器：Chrome, Safari or Firefox

Extras :

Maroon 5 Top 50 Playlist (外放音量 5): http://music.163.com/#/m/playlist?id=75449895 空调温度：26°C

Before Install

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

先在 Coding 创建一个项目，公开私有都由你，或者你可以直接 Fork 我的项目来完成下面的所有 DEMO，项目地址： https://coding.net/u/bluishoul/p/polymer-1.0-demo/git。
在项目页找到 WebIDE 标签，并进入 WebIDE，WebIDE 基本使用教程可以随便看下： https://coding.net/help/webide/webide_video_tutorial。
点击右上角头像旁边最左边的 Terminal 图标，打开一个 Linux 终端。

好，现在我们可以正式开始撸代码了！

安装 Polymer 1.0（[Bower][2]）

在 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 资源加载顺序][3]

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

![proto-element is ready][4]

5. DEMO

[点击查看 Proto Element 演示][5]

Local Dom

proto-element.html 中的下面标签即 Local Dom

<span>I'm <b>proto-element</b>. Checkout my prototype.</span>

使用 Local Dom 来排版

在 demo 目录下创建 local-dom 目录，并分别创建 index.html 和 user-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.qbox.me/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.qbox.me/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 排版效果][6]

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

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

DEMO

[点击查看 Local Dom 演示][7]

数据绑定

用于动态更新 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>