具体描述
随着前端技术的发展，组件化和模块化的思想越来越深入人心。早在 2013 年，WebComponent 就被写入了 W3C 工作草案中。Google、Facebook、Yahoo、Mozilla 等走在前端的公司均对 Web Component 标准进行了具体实现。《Web Component实战：探索PolymerJS、Mozilla Brick、Bosonic与ReactJS框架》详细讲解了 Web Component 规范，并且结合具体的类库阐述了所有可以构建 Web Component 规范的关键特性。适用于每一位对Web Component 规范感兴趣的开发者。
Web Component 实战：探索现代前端组件化开发 这本书并非关于 PolymerJS、Mozilla Brick、Bosonic 或 ReactJS 框架本身，而是聚焦于一个更基础、更具通用性的前端开发理念：Web Components。在当今快速演进的前端技术浪潮中，组件化已成为构建复杂、可维护、可复用用户界面的核心策略。Web Components，作为浏览器原生支持的标准，为开发者提供了一种声明式、封装性强的构建可重用 UI 组件的方式，它独立于任何特定的框架，能够与现有项目平滑集成，并为未来的前端生态奠定坚实的基础。 本书旨在带领读者深入理解 Web Components 的核心概念、实现机制以及在实际项目中的应用。我们将从 Web Components 的历史背景和发展意义出发，阐述其为何成为前端开发的必然趋势。随后，我们将逐一剖析 Web Components 的四大关键技术： Custom Elements (自定义元素)：学习如何定义全新的 HTML 标签，赋予它们自定义的行为和语义。我们将演示如何注册、生命周期回调，以及如何利用自定义元素来封装复杂的 UI 逻辑，使其成为具有独立功能的组件。 Shadow DOM (影子 DOM)：深入探讨 Shadow DOM 的封装能力，理解其如何实现组件的样式和 DOM 结构的隔离，从而避免全局 CSS 的冲突和 DOM 污染。我们将讲解 Shadow DOM 的创建、挂载，以及如何通过模板和插槽（Slots）来实现灵活的组件内容定制。 HTML Templates (HTML 模板)：学习如何使用 `` 和 `` 元素来定义可复用的 HTML 结构。我们将展示如何通过模板来声明式地构建组件的 UI，以及如何利用插槽来实现父组件向子组件注入内容，从而提高组件的灵活性和可配置性。 HTML Imports (HTML 导入)：虽然 HTML Imports 的标准化进程有所调整，但其最初提出的思想——将组件及其相关资源打包成独立的 HTML 文件，并在需要时导入——仍然对我们理解组件化模块化部署有着重要的启发意义。本书将讨论其设计理念及其在实际应用中的替代方案和演变。 在掌握了 Web Components 的基础知识后，我们将进入更具实战性的环节，探索如何将这些原生技术应用于实际的前端开发场景。本书将通过一系列精心设计的案例，展示 Web Components 在不同场景下的应用价值： 构建可复用 UI 组件库：学习如何利用 Web Components 来开发一系列独立、封装良好的 UI 组件，如按钮、输入框、模态框、卡片等，并将其集成到不同项目中，实现代码的极致复用。 实现跨框架的组件共享：Web Components 的最大优势之一在于其框架无关性。本书将探讨如何利用 Web Components 来创建可以在 React、Vue、Angular 等任何前端框架中无缝使用的组件，打破框架壁垒，提升开发效率。 提升现有项目的可维护性与模块化：对于已有的复杂项目，可以逐步引入 Web Components 来对现有模块进行组件化重构，降低代码耦合度，提高可维护性。 设计响应式与自适应的组件：结合 CSS 媒体查询和 JavaScript，我们将展示如何利用 Web Components 构建能够适应不同屏幕尺寸和设备特性的响应式组件。 与后端服务集成：探讨如何设计 Web Components 来与后端 API 进行数据交互，实现前端与后端的解耦，构建更健壮的应用架构。 性能优化与最佳实践：在 Web Components 的开发过程中，性能是不可忽视的因素。我们将分享关于性能优化的技巧，如懒加载、代码分割、高效的 DOM 操作等，以及 Web Components 在实际开发中的一些最佳实践和常见陷阱。 本书强调的是“实战”二字。我们不会止步于理论的讲解，而是通过大量的代码示例、清晰的图示和循序渐进的讲解，帮助读者将抽象的概念转化为具体的实践能力。每一章节都将提供可运行的代码片段，并引导读者动手尝试，从而加深理解。 尽管本书不深入探讨 PolymerJS、Mozilla Brick、Bosonic 和 ReactJS 等具体框架，但理解 Web Components 的原理，将为读者在选择和使用这些框架时提供更深层次的洞察。例如，了解 Shadow DOM 的隔离机制，将有助于理解 React 中的 CSS-in-JS 方案，以及 Vue 中的 Scoped CSS 的设计思路。同时，掌握 Custom Elements 的生命周期，也能帮助更好地理解 React 组件的生命周期。 这本书面向的对象是所有关注前端技术发展，希望提升代码复用性、可维护性，并为构建下一代 Web 应用打下坚实基础的前端开发者、技术爱好者以及架构师。无论您是初学者还是经验丰富的工程师，都能从中获得宝贵的知识和实践经验，掌握构建现代化、可组合 Web 应用的关键技能。通过本书的学习，您将能够自信地拥抱 Web Components 标准，并将其有效地应用于您的日常开发工作中，开创更高效、更灵活的前端开发新时代。
作者简介
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/ 查看到他的文章。
译者介绍：范洪春，阿里巴巴（中国）网络技术有限公司前端工程师。
目录信息
前言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
第 1 章 Web Component 简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Web Component 是什么？ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Web Component 的使用动机和困境 . . . . . . . . . . . . . . . . . . . . . . . . . 2
Web Component 架构. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
模板元素 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
模板元素的细节. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
检测是否支持模板特性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
延迟加载的模板. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
激活模板. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
HTML Import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
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
ReactJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Bosonic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
总结. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
第 2 章 Polymer 简介 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
什么是 Polymer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
安装和配置 Polymer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . 50
下载 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 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
Yeoman GitHub 页面生成器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . 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
Mozilla Brick 1.0. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Mozilla Brick 2.0. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
安装 Mozilla Brick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
配置 Mozilla Brick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . 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
· · · · · · (收起)
第 1 章 Web Component 简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Web Component 是什么？ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Web Component 的使用动机和困境 . . . . . . . . . . . . . . . . . . . . . . . . . 2
Web Component 架构. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
模板元素 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
模板元素的细节. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
检测是否支持模板特性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
延迟加载的模板. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
激活模板. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
HTML Import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
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
ReactJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Bosonic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
总结. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
第 2 章 Polymer 简介 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
什么是 Polymer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
安装和配置 Polymer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . 50
下载 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 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
Yeoman GitHub 页面生成器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . 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
Mozilla Brick 1.0. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Mozilla Brick 2.0. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
安装 Mozilla Brick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
配置 Mozilla Brick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . 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
· · · · · · (收起)
读后感
用户评价
这本书的实战部分做得非常到位。它没有停留在理论层面，而是大量使用了实际项目中的场景来演示如何运用Web Components。我特别喜欢它在代码组织和模块化方面的讲解，这直接关系到大型项目的可维护性。书中对组件设计原则的讨论，比如组件的封装性、可重用性和互操作性，都结合了具体的代码片段进行剖析。读完之后，我感觉自己对如何构建健壮、可扩展的前端组件系统有了更系统化的认识。这种注重工程实践的写作风格，让这本书的价值远超一般的技术手册。
拿到这本书的时候，我最期待的是它对PolymerJS的讲解深度。毕竟在Web Components的早期发展中，Polymer扮演了非常重要的角色。这本书没有仅仅停留在API的介绍上，而是深入探讨了Polymer的生命周期管理、数据绑定机制以及如何利用它来构建可复用的组件。通过书中提供的实际案例，我能清晰地看到这些概念是如何在真实场景中落地的。尤其是它对影子DOM（Shadow DOM）和自定义元素（Custom Elements）的讲解，结合了大量的代码示例，让人印象深刻。很多时候，官方文档写得过于枯燥，而这本书的叙述方式更像是一位经验丰富的开发者在手把手地教学，使得原本晦涩的知识点变得易于理解和掌握。
这本书的封面设计挺吸引人的，那种简洁中带着科技感的风格，很容易让人对其中的内容产生好奇。我尤其喜欢它在排版上的用心，字里行间透露着对技术细节的尊重。 虽然我对前端技术栈有一定的了解，但深入研究Web Components这个领域，一直觉得有些门槛。这本书的结构安排得很巧妙，循序渐进地引导读者从基础概念入手，逐步深入到具体的框架实现。它并没有一开始就堆砌复杂的代码，而是先花篇幅解释Web Components的核心思想和它们能解决的痛点，这一点非常关键，能帮助读者建立扎实的理论基础。特别是对于初学者来说，这种由浅入深的引导方式，无疑是降低了学习曲线的一大助力。而且，书中对不同框架的对比分析，也让我对它们各自的优劣有了更清晰的认识。
作为一本探讨前端前沿技术的书籍，这本书的行文流畅度也值得称赞。作者的语言风格既专业又不失亲和力，阅读起来完全没有晦涩难懂的感觉。它成功地将Web Components这个听起来略显“高冷”的技术，以一种非常接地气的方式呈现出来。特别是对于那些习惯于使用React等流行框架的开发者，书中关于Web Components如何与现有生态协同工作的讨论，提供了很多启发性的视角。这本书无疑为我打开了一扇新的技术大门，让我对未来前端组件化的发展方向有了更乐观的预期。
这本书的深度和广度都令人称赞。它不仅涵盖了Web Components的基础技术栈，还触及了像Mozilla Brick和Bosonic这样的社区驱动项目，这在我看来是非常难得的。很多技术书籍往往只聚焦于一两个主流框架，而这本书的包容性体现了作者对整个技术生态的全面视野。通过阅读不同框架的实现方式，我能更好地理解Web Components在不同上下文中的适用性。这种多角度的审视，对于希望在项目中做出明智技术选型的开发者来说，无疑提供了宝贵的参考。它不仅仅是一本“如何做”的书，更是一本“为什么这么做”的思考指南。
适合走马观花
书有点开发文档的意思，感觉不是很好
书有点开发文档的意思，感觉不是很好
适合走马观花
很多勘误，其实也算不上勘误，只是当时的 Web Component 草案以及上个世纪的 ReactJS，现在真的过气了，还有什么 Bosonic 的，感觉真的是在麦广告。Web Component 和 React 的章节写得还行，其它的就算了。
