Polymer 面向未来的Web组件开发PDF电子书下载

第1章 概述 1

什么是Web组件 2

HTML模板 3

HTML引用 3

自定义元素 3

ShadowDOM 3

为什么使用Web组件 4

Ⅰ UI核心概念 8

第2章 基础知识 8

DOM抽象层的重要性 8

控件的API和生命周期 9

继承模式 11

依赖 12

优化 13

Web组件不仅仅是JavaScript 14

示例控件 14

Voltron控件基类 14

对话框类 17

对话框的CSS和HTML 18

总结 18

第3章 文档流与定位 19

文档流 19

定位元素 20

offsetParent 20

定位 22

计算元素的位置 24

相对于视窗 24

相对于文档 25

定位对话框控件 26

总结 27

第4章 理解和操作z-index 28

z-inde×究竟是什么？ 28

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

默认堆叠次序 29

重写默认堆叠次序 31

堆叠上下文 31

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

事情越来越复杂了 32

管理z-index 32

z-index管理者对象 33

转化为jQuery插件 40

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

总结 42

Ⅱ 构建UI 44

第5章 克隆节点 44

使用cloneNode方法 45

使用jQuery.clone 46

对话框控件 48

总结 48

第6章 创建浮层 49

定义API 49

工具 51

检测滚动栏的宽度 51

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

获取元素尺寸和坐标 52

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

更新选项 54

销毁 54

定位 55

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

相对另一个元素定位元素 58

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

总结 61

第7章 拖动元素 62

鼠标事件 62

$.mousemove 62

$.mousedown 63

$.mouseup 63

鼠标事件的最佳实践 63

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

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

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

4.命名所有事件 64

定义API 64

创建拖拽柄 65

拖动起来 66

$.mousedown 响应函数 66

$.mousemove 响应函数 67

$.mouseup事件响应函数 68

销毁可拖拽实例 69

使对话框控件可拖拽 70

总结 71

第8章 调整元素尺寸 72

鼠标事件和最佳实践 72

事件 72

最佳实践 73

调整元素尺寸 73

编写调整尺寸的API 74

拖拽／尺寸调整柄区 75

绑定鼠标事件 76

$.mousedown事件响应函数 76

$.mousemove事件响应函数 78

$.mouseup事件响应函数 79

销毁工作 79

完成调整尺寸功能 79

使对话框控件可调整大小 84

总结 85

第9章 完成对话框控件 86

添加样式 86

添加CSS 86

合并JavaScript文件 87

总结 88

Ⅲ 构建HTML5 Web组件 90

第10章 模板 90

理解模板的重要性 91

延迟加载资源 91

延迟渲染内容 92

从DOM中隐藏内容 92

创建和使用模板 92

检测浏览器支持 92

将模板放到标签中 92

将模板内容插入到DOM中 93

使用模板编写对话框组件 93

创建和包装对话框模板API 94

实例化对话框组件 95

抽象对话框模板包装 95

总结 96

第11章 Shadow DOM 97

什么是Shadow DOM？ 97

Shadow DOM基础概念 98

Shadow宿主 98

Shadow根元素 98

在Shadow DOM中使用模板 99

Shadow DOM的样式 100

样式封装 100

为宿主元素添加样式 101

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

内容映射 105

通过content标签映射 105

通过选择器映射内容 106

节点分发和接入点 107

Shadow接入点 108

事件与Shadow DOM 110

使用Shadow DOM更新对话框模板 110

对话框标签 110

对话框的API 111

更新对话框show方法 112

初始化对话框实例 112

总结 113

第12章 自定义元素 114

自定义元素简介 115

注册自定义元素 115

扩展元素 116

扩展自定义元素 116

扩展自原生元素 117

定义属性和方法 117

解析自定义元素 118

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

createdCallback 119

attachedCallback 119

detachedCallback 120

attributeChangedCallback 120

为自定义元素添加样式 121

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

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

创建对话框自定义元素 123

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

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

显示对话框 126

总结 126

第13章 引入文档 127

声明引入 127

获取引入的内容 128

获取文档 129

应用样式 130

获取模板 131

执行JavaScript 132

理解引入和主文档的关系 132

解析引入 132

跨域 133

二级引入 133

加载自定义元素 133

引入对话框 134

总结 134

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

第14章 Polymer简介 137

Polymer元素 139

添加样式 141

外部资源 142

过滤表达式 143

模板格式 144

数据绑定 144

循环块 145

上下文绑定 145

分支判断 146

复合模板指令 146

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

原生特性 147

公开属性 147

实例方法 148

Polymer的JavaScript API 149

生命周期方法 149

事件 149

处理延迟工作 150

总结 150

第15章 将对话框迁移至Polymer 152

到底为什么要迁移到Polymer 152

“一键”迁移 153

管理依赖 154

使用Bower安装依赖 155

让我们开始吧 157

太简单了吧 167

Polymer世界中的jQuery 167

带来了什么 167

移除jQuery 168

关于jQuery的结论 171

总结 171

第16章 测试Web组件 173

PhantomJS 1 174

PhantomJS 2 175

Selenium WebDriver 175

Karma 175

测试用例 180

运行测试 183

总结 185

第17章 打包和发布 186

Vulcanize 187

Gulp 192

Grunt 192

Gruntfiles 194

Grunt任务 195

注册任务 196

Grunt配置 197

使用Bower发布组件 201

注册组件 203

总结 203

第18章 结语 204

往何处去 204

Polymer 205

Mozilla X-Tag 205

document-register-element 206

WebComponents.org 206

CustomElements.io 206

祝你好运 206

索引 208