Web Component实战

Web组件正在快速成熟，本书将针对架构、配置及工作选择进行具体详细的介绍。读者将接触到web组件发展的核心工具和文件库，包括Polymer、Bosonic、 Mozilla Brick、和ReactJS，并通过实例讲解Web组件的发展、运用JavaScript创建功能性Web组件，以及建立自己的Web组件工具箱。

帕特尔，Sandeep Kumar Patel，是一位高级web工程师，技术博客tutorialsavvy的创始人，该博客自 2012 年创建以来一直被广泛阅读。他在面向对象的 JavaScript 和基于JSON 的 web 应用开发上，有超过5年的经验；曾获 GATE-2005 信息技术（IT）资格认证及印度韦洛尔理工大学硕士学位。你可以在 LinkedIn上了解到更多关于他的个人信息。DZone 曾在 web 技术出版方向上授予他具价值博主（MVB）奖项。此外，他还获得过 JCG（Java Code Geeks）颁发的 JCG 徽章。

前言xiii
第1章Web Component简介1
Web Component是什么？ 1
Web Component的使用动机和困境2
Web Component架构 2
模板元素 3
模板元素的细节 3
检测是否支持模板特性 4
延迟加载的模板 6
激活模板7
HTML Import11
HTML Import特性检测11
访问引入的文档 13
HTML Import的事件 15
Shadow DOM16
Shadow DOM特性检测 17
Shadow tree19
自定义元素24
自定义元素特性检测 24
自定义元素的开发 26
示例：自定义元素 29
节点分布 31
内容插入点31
Shadow插入点 33
为Web Component添加样式35
构建时钟组件39
时钟模板39
时钟元素注册脚本 40
组件的使用 41
X—Tag43
X—Tag元素生命周期43
开发X—Tag自定义元素 44
Polymer48
Mozilla Brick 48
ReactJS48
Bosonic48
总结 49
第2章Polymer 简介50
什么是Polymer 50
安装和配置Polymer50
下载ZIP文件51
使用GIT克隆 51
使用Bower52
PolymerJS结构 53
包含polyfill的Web Component54
Polymer库56
元素 56
Core元素56
core—tooltip元素62
paper元素 64
Material Design 65
Polymer Designer工具72
使用设计工具开发73
获取GitHub令牌73
开发E—mail订阅表单 74
Yeoman Polymer生成器 75
Polymer生成器命令76
Polymer应用生成器77
Polymer元素生成器77
Polymer种子生成器78
Polymer Github页面生成器 78
总结 78
第3章使用 Polymer 开发 Web Component79
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
Yeoman GitHub页面生成器 115
为生产环境下使用vulcanize做准备 116
安装vulcanize116
运行vulcanize进程 116
总结 117
第4章探索Web Component开发工具 Bosonic118
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步修改indexhtml示例文件 127
第7步使用Grunt生成分发文件 127
第8步运行indexhtml文件 130
Bosonic生命周期 130
生命周期示例130
开发一个数显时钟136
总结140
……
第5章使用Mozilla Brick开发Web Component 141
第6章使用ReactJS开发Web Component 165
附录 Web Component参考文献195