Web Component实战 探索PolymerJS、Mozilla Brick、Bosonic与ReactJS框架PDF电子书下载

第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