第1章 Web Component简介 1
WebComponent是什么? 1
WebComponent的使用动机和困境 2
WebComponent架构 2
模板元素 3
模板元素的细节 3
检测是否支持模板特性 4
延迟加载的模板 6
激活模板 7
HTMLImport 11
HTMLImport特性检测 11
访问引入的文档 13
HTMLImport的事件 15
ShadowDOM 16
ShadowDOM特性检测 17
Shadowtree 19
自定义元素 24
自定义元素特性检测 24
自定义元素的开发 26
示例:自定义元素 29
节点分布 31
内容插入点 31
Shadow插入点 33
为Web Component添加样式 35
构建时钟组件 39
时钟模板 39
时钟元素注册脚本 40
组件的使用 41
X-Tag 43
X-Tag元素生命周期 43
开发X-Tag自定义元素 44
Polymer 48
MozillaBrick 48
ReactJS 48
Bosonic 48
总结 49
第2章 Polymer简介 50
什么是Polymer? 50
安装和配置Polymer 50
下载ZIP文件 51
使用GIT克隆 51
使用Bower 52
PolymerJS结构 53
包含polyfill的WebComponent 54
Polymer库 56
元素 56
Core元素 56
core-tooltip元素 62
paper元素 64
MaterialDesign 65
PolymerDesigner工具 72
使用设计工具开发 73
获取GitHub令牌 73
开发E-mail订阅表单 74
YeomanPolymer生成器 75
Polymer生成器命令 76
Polymer应用生成器 77
Polymer元素生成器 77
Polymer种子生成器 78
PolymerGithub页面生成器 78
总结 78
第3章 使用Polymer开发Web Component 79
PolymerJS的ready事件 79
Polymer表达式 80
Polymer模板的自动绑定 82
过滤器表达式 86
内建的过滤器表达式 86
自定义过滤器表达式 89
全局的过滤器表达式 91
开发Polymer自定义元素 92
定义自定义元素 93
定义元素属性 93
定义默认属性 94
定义公共属性和方法 94
发布属性 95
定义生命周期方法 95
注册自定义元素 97
开发一个自定义元素示例 97
扩展自定义元素 99
Polymer方法 101
Polymer的mixin方法 101
Polymer的import方法 103
Polymer的waitingFor方法 104
Polymer的forceReady方法 106
异步任务执行 107
开发一个数显时钟 109
使用Yeoman 111
Yeoman元素生成器 111
Yeoman种子生成器 114
YeomanGitHub页面生成器 115
为生产环境下使用vulcanize做准备 116
安装vulcanize 116
运行vulcanize进程 116
总结 117
第4章 探索Web Component开发工具Bosonic 118
Bosonic是什么? 118
浏览器支持情况 119
配置Bosonic 119
Bosonic包 119
内建元素 120
b-sortable元素 120
b-toggle-button元素 122
开发自定义元素 124
第1步创建red-message元素目录 124
第2步进入到red-message目录 125
第3步为<red-message>生成一个框架 125
第4步验证目录结构 125
第5步定义<red-message>元素的代码 126
第6步修改index…html示例文件 127
第7步使用Grunt生成分发文件 127
第8步运行index…html文件 130
Bosonic生命周期 130
生命周期示例 130
开发一个数显时钟 136
总结 140
第5章 使用Mozilla Brick开发Web Component 141
Brick库是什么? 141
MozillaBrick1.0 142
MozillaBrick2.0 142
安装MozillaBrick 143
配置MozillaBrick 144
内置组件 145
brick-calendar元素 145
brick-flipbox元素 145
brick-deck元素 148
brick-tabbar元素 151
brick-action元素 154
brick-menu元素 157
X-Tag库 158
使用X-Tag来开发一个数显时钟 159
总结 164
第6章 使用ReactJS开发Web Component 165
走近React 165
Flux架构 165
Flux的关键特性 166
安装ReactJS 167
配置ReactJS 168
使用ReactJS 168
JSX是什么 170
使用JSX创建自定义组件 170
ReactJS行内样式 172
ReactJS事件处理 174
使用非DOM属性 176
ReactJS组件生命周期 179
ReactJS初始化 179
ReactJS存在期 180
ReactJS销毁期 181
ReactJS生命周期示例 181
有状态的自定义组件 184
生产环境预编译JSX 186
JSX文件监听 190
使用ReactJS开发一个数显时钟 190
第1步开发脚本定义数显时钟组件生命周期 190
第2步定义数显时钟组件的CSS样式 191
调试ReactJS 192
总结 194
附录Web Component参考文献 195