第1章 概述

什么是Web组件

HTML模板

HTML引用

自定义元素

ShadowDOM

为什么使用Web组件

Ⅰ UI核心概念

第2章 基础知识

DOM抽象层的重要性

控件的API和生命周期

继承模式

依赖

优化

Web组件不仅仅是JavaScript

示例控件

Voltron控件基类

对话框类

对话框的CSS和HTML

总结

第3章 文档流与定位

文档流

定位元素

offsetParent

定位

计算元素的位置

相对于视窗

相对于文档

定位对话框控件

总结

第4章 理解和操作z-index

z-inde×究竟是什么？

渲染层、堆叠次序与z-index

默认堆叠次序

重写默认堆叠次序

堆叠上下文

堆叠上下文是怎么创建的？

事情越来越复杂了

管理z-index

z-index管理者对象

转化为jQuery插件

向对话框控件类添加 z-index管理功能

总结

Ⅱ 构建UI

第5章 克隆节点

使用cloneNode方法

使用jQuery.clone

对话框控件

总结

第6章 创建浮层

定义API

工具

检测滚动栏的宽度

计算容器宽度时考虑滚动条

获取元素尺寸和坐标

监听尺寸改变事件和滚动事件

更新选项

销毁

定位

相对视窗或相对另一个元素定位

相对另一个元素定位元素

向对话框控件添加浮层功能

总结

第7章 拖动元素

鼠标事件

$.mousemove

$.mousedown

$.mouseup

鼠标事件的最佳实践

1.在$.mousedown事件中绑定$.mousemove事件

2.在$.mouseup事件中解除$.mousemove的绑定

3.将$.mouseup事件响应函数绑定到＜body＞上

4.命名所有事件

定义API

创建拖拽柄

拖动起来

$.mousedown 响应函数

$.mousemove 响应函数

$.mouseup事件响应函数

销毁可拖拽实例

使对话框控件可拖拽

总结

第8章 调整元素尺寸

鼠标事件和最佳实践

事件

最佳实践

调整元素尺寸

编写调整尺寸的API

拖拽／尺寸调整柄区

绑定鼠标事件

$.mousedown事件响应函数

$.mousemove事件响应函数

$.mouseup事件响应函数

销毁工作

完成调整尺寸功能

使对话框控件可调整大小

总结

第9章 完成对话框控件

添加样式

添加CSS

合并JavaScript文件

总结

Ⅲ 构建HTML5 Web组件

第10章 模板

理解模板的重要性

延迟加载资源

延迟渲染内容

从DOM中隐藏内容

创建和使用模板

检测浏览器支持

将模板放到标签中

将模板内容插入到DOM中

使用模板编写对话框组件

创建和包装对话框模板API

实例化对话框组件

抽象对话框模板包装

总结

第11章 Shadow DOM

什么是Shadow DOM？

Shadow DOM基础概念

Shadow宿主

Shadow根元素

在Shadow DOM中使用模板

Shadow DOM的样式

样式封装

为宿主元素添加样式

在文档中设置shadow子树根节点样式

内容映射

通过content标签映射

通过选择器映射内容

节点分发和接入点

Shadow接入点

事件与Shadow DOM

使用Shadow DOM更新对话框模板

对话框标签

对话框的API

更新对话框show方法

初始化对话框实例

总结

第12章 自定义元素

自定义元素简介

注册自定义元素

扩展元素

扩展自定义元素

扩展自原生元素

定义属性和方法

解析自定义元素

参与自定义元素的生命周期

createdCallback

attachedCallback

detachedCallback

attributeChangedCallback

为自定义元素添加样式

在自定义元素中使用模板和Shadow DOM

将对话框组件实现为一个自定义元素

创建对话框自定义元素

实现对话框自定义元素的回调函数

实现对话框自定义元素的API

显示对话框

总结

第13章 引入文档

声明引入

获取引入的内容

获取文档

应用样式

获取模板

执行JavaScript

理解引入和主文档的关系

解析引入

跨域

二级引入

加载自定义元素

引入对话框

总结

Ⅳ 使用Polymer测试、构建、部署Web组件

第14章 Polymer简介

Polymer元素

添加样式

外部资源

过滤表达式

模板格式

数据绑定

循环块

上下文绑定

分支判断

复合模板指令

特性（attribute）和属性（peoperty）：元素的API

原生特性

公开属性

实例方法

Polymer的JavaScript API

生命周期方法

事件

处理延迟工作

总结

第15章 将对话框迁移至Polymer

到底为什么要迁移到Polymer

“一键”迁移

管理依赖

使用Bower安装依赖

让我们开始吧

太简单了吧

Polymer世界中的jQuery

带来了什么

移除jQuery

关于jQuery的结论

总结

第16章 测试Web组件

PhantomJS 1

PhantomJS 2

Selenium WebDriver

Karma

测试用例

运行测试

总结

第17章 打包和发布

Vulcanize

Gulp

Grunt

Gruntfiles

Grunt任务

注册任务

Grunt配置

使用Bower发布组件

注册组件

总结

第18章 结语

往何处去

Polymer

Mozilla X-Tag

document-register-element

WebComponents.org

CustomElements.io

祝你好运

索引