Polymer 1.0 浅尝
polymerMaster 2019-06-20
前言
前两天看到 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。
先在 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）
在 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.htmlTips: 鼠标右键点击项目目录，选择
New Directory创建新目录，选择New File创建新文件。
2. 创建 index.html 和 proto-element.html 文件
index.html
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
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 效果，或者直接拷贝相应链接到原生浏览器标签中打开。
资源加载顺序：
从上图可以很清楚的看到，资源是按照 import 关系顺序加载的。
当 proto-element 初始化后，会在 Terminal 中输出：
5. DEMO
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>运行效果：
user-avatar.html 中需要注意的是：
- 其中的
<content></content>标签，这里将会插入<user-avatar></user-avatar>内的 dom，也就是这里的两张图片。 <style></style>标签中的div样式在渲染后的 DOM 都自动加上了类名：div.user-avatar，使得 CSS 样式能够具有类似 namespace 的效用（未使用 ShadowDom），从而防止被其他组件污染。
DEMO
数据绑定
用于动态更新 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
总结
本文只是一次试水，稍微感受一下 WebComponent 的特性。
从上面的三个点： 自定义元素、Local Dom 和 数据绑定 来看，Polymer 提供了一种很简洁的 WebComponent 的使用方式。
- 通过简单的 link import 导入依赖，并按依赖顺序加载资源
- 自定义元素隔离样式以及业务逻辑
- Local Dom 能让自定义元素具有更高的灵活性
- 数据绑定更是轻松的利用 属性 动态改变自定义元素的内容
本文涉及的源码
关于作者
彭博 @ Coding.net / 前端工程师
新的体验总是好的！
本文来自
Coding 官网技术博客: https://blog.coding.net/, 如需转载，请注明作者与出处!
