JavaScript Polymer 1.0 浅尝

coding · 发布于 2015年6月17日 · 最后由 happypeter 回复于 2015年8月01日 · 3337 次阅读
15469
本帖已被设为精华帖!

前言

前两天看到 Polymer 1.0 发布了,出于好奇,来试试水,体验下,感受下 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。

  1. 先在 Coding 创建一个项目,公开私有都由你,或者你可以直接 Fork 我的项目来完成下面的所有 DEMO, 项目地址: https://coding.net/u/bluishoul/p/polymer-1.0-demo/git图片

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

  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.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 排版效果

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. 数据绑定更是轻松的利用 属性 动态改变自定义元素的内容

本文涉及的源码

https://coding.net/u/bluishoul/p/polymer-1.0-demo/git

关于作者

在这里输入图片描述 彭博 @ Coding.net / 前端工程师 新的体验总是好的!

本文来自

Coding 官网技术博客: https://blog.coding.net/, 如需转载,请注明作者与出处!

共收到 4 条回复
2474

不错。。。还挺时髦的。。。

1553

来来来,Polymer,Dart 和 AngularJS 打一架

9800

虽然有很大的广告成分,但我还是觉得很赞。。。

96

web component 是未来!

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册