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

　　范洪春，阿里巴巴（中国）网络技术有限公司前端工程师。

　　随着前端技术的发展，组件化和模块化的思想越来越深入人心。早在 2013 年，WebComponent 就被写入了 W3C 工作草案中。Google、Facebook、Yahoo、Mozilla 等走在前端的公司均对 Web Component 标准进行了具体实现。《Web Component实战：探索PolymerJS、Mozilla Brick、Bosonic与ReactJS框架》详细讲解了 Web Component 规范，并且结合具体的类库阐述了所有可以构建 Web Component 规范的关键特性。适用于每一位对Web Component 规范感兴趣的开发者。

　　★“创建一个大型应用的秘诀就是不去创建大型应用，而把应用切分成组件。然后组装测

　　试，由多个组件组合而成一个应用。”

　　——Justin Meyer，JavaScript MVC 作者

前言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 DOM 16

Shadow DOM 特性检测 17

Shadow tree 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

Mozilla Brick 48

ReactJS48

Bosonic48

总结 49

第 2 章 Polymer 简介50

什么是 Polymer 50

安装和配置 Polymer50

下载 ZIP 文件 51

使用 GIT 克隆 51

使用 Bower  52

PolymerJS 结构53

包含 polyfill 的 Web Component 54

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

使用 Yeoman111

Yeoman 元素生成器 111

Yeoman 种子生成器 114

Yeoman GitHub 页面生成器 115

为生产环境下使用 vulcanize 做准备 116

安装 vulcanize  116

运行 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 步 为 生成一个框架125

第 4 步 验证目录结构125

第 5 步 定义 元素的代码  126

第 6 步 修改 indexhtml 示例文件 127

第 7 步 使用 Grunt 生成分发文件 127

第 8 步运行 indexhtml 文件130

Bosonic 生命周期 130

生命周期示例 130

开发一个数显时钟 136

总结140

第 5 章 使用 Mozilla Brick 开发 Web Component 141

Brick 库是什么？141

Mozilla Brick 10142

Mozilla Brick 20 142

安装 Mozilla Brick143

配置 Mozilla Brick144

内置组件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