　　Web组件仍然在技术的边缘——仅有先进的浏览器才支持这项技术——Web组件的发展和变化也极为迅速。这本实践参考书籍帮助你理解 W3C这项新兴标准，教会你如何构建可重用的、自定义的HTML5 Web组件。
　　无论以往使用的是jQuery还是Polymer，又或是其他的库，这本书都可以教会JavaScript开发者，这些库背后对DOM的操作。你将学会，如何编写出一个基本的代码优雅的控件，然后将其转化为语义化、声明式、完全封装、开箱即用、可维护的Web组件，而Web必将受益于Web组件的特性，最终成为一个原生的应用平台。这本书将传授以下内容：
　　■ 理解核心概念（诸如文档流、定位、z-index 等等），以及实现定位、拖拽、移动大小
　　■ 探索UI的概念，以及Dojo、jQuery UI、Kendo UI和一些其他库中抽象出的典型模式
　　■ 深入理解W3C标准，将自己的控件转化为一个功能齐备的Web组件
　　■ 学习如何利用Google的Polymer框架封装、打包、部署你的Web组件

内容简介

　　《Polymer：面向未来的Web组件开发》包含了构建常用JavaScript组件的基础知识，并通过实例带领你学习组件的概念化、设计和实施，后半部分则涵盖了封装、打包和部署的相关知识。无论你是缺乏组件使用经验的JavaScript开发人员，还是具有组件库的丰富使用经验、想创建出定制组件的前端开发人员，《Polymer：面向未来的Web组件开发》都适合你阅读。

作者简介

　　Jarrod Overson，在Web开发领域有15年以上的经验，曾在创业公司工作，也曾经供职于全球性的大公司。目前他在Shape Security工作。Jarrod 是开源社区和JavaScript语言工具的活跃贡献者和布道师，他创建了Plato和许多其他的工具和库。

　　Jason Strimpel，是一名具有15年以上经验的软件工程师。目前，他供职于WalmartLabs，主要工作是编写软件，以支持 UI 应用的开发。Jason同样也活跃于开源社区，他维护着诸如 LazoJS 等框架。

精彩书评

　　“Jarrod和Jason的这本书，使Web组件技术对大量开发者而言，变得触手可得。自定义元素和Shadow DOM的相关章节帮助我们加深了对新Web平台特性（构建、封装）的理解，能帮助你编写出更健壮的组件和应用。”
　　—— Addy Osmani
　　专精于Chrome与Polymer的Google工程师

　　“Jarrod和Jason的这本书让我感到很兴奋，它帮助新的开发者开启组件化Web的旅程。”
　　—— Rob Dodson
　　Google软件开发布道师

前言i
第 1 章概述
什么是 Web 组件
HTML 模板
HTML 引用
自定义元素
Shadow DOM
为什么使用 Web 组件
I UI 核心概念
第 2 章基础知识
DOM 抽象层的重要性
控件的 API 和生命周期
继承模式
依赖
优化
Web 组件不仅仅是 JavaScript
示例控件
Voltron 控件基类
对话框类
对话框的 CSS 和 HTML
ix
总结
第 3 章文档流与定位
文档流
定位元素
offsetParent
定位
计算元素的位置
相对于视窗
相对于文档
定位对话框控件
总结
第 4 章理解和操作 z-index
z-index 究竟是什么？
渲染层、堆叠次序与 z-index
默认堆叠次序
重写默认堆叠次序
堆叠上下文
堆叠上下文是怎么创建的？
事情越来越复杂了
管理 z-index
创建对象管理 z-index
转化为 jQuery 插件
向对话框控件类添加 z-index 管理功能
总结
II 构建 UI
第 5 章克隆节点
使用 cloneNode 方法
使用 jQuery．clone
对话框控件
总结
x | 目录
第 6 章创建浮层
定义 API
工具
检测滚动栏的宽度
计算容器宽度时考虑滚动条
获取元素尺寸和坐标
监听尺寸改变事件和滚动事件
更新选项
销毁
定位
相对视窗或相对另一个元素定位
相对另一个元素定位元素
向对话框控件添加浮层功能
总结
第 7 章拖动元素
鼠标事件
$．mousemove
$．mousedown
$．mouseup
鼠标事件的最佳实践
1在 $．mousedown 事件中绑定 $．mousemove 事件
2在 $．mouseup 事件中解除 $．mousemove 的绑定
3将 $．mouseup 事件响应函数绑定到＜body＞上
4命名所有事件
定义 API
创建拖拽柄
拖动起来
$．mousedown 响应函数
$．mousemove 响应函数
$．mouseup 事件响应函数
销毁可拖拽实例
使对话框控件可拖拽
总结
目录 | xi
第 8 章调整元素尺寸
鼠标事件和最佳实践
事件
最佳实践
调整元素尺寸
编写调整尺寸的 API
拖拽/尺寸调整柄区
绑定鼠标事件
$．mousedown 事件响应函数
$．mousemove 事件响应函数
$．mouseup 事件响应函数
销毁工作
完成调整尺寸功能
使对话框控件可调整大小
总结
第 9 章完成对话框控件
添加样式
添加 CSS
合并 JavaScript 文件
总结
III 构建 HTML5 Web 组件
第 10 章模板
理解模板的重要性
延迟加载资源
延迟渲染内容
从 DOM 中隐藏内容
创建和使用模板
检测浏览器支持
将模板放到标签中
将模板内容插入到 DOM 中
使用模板编写对话框组件
创建和包装对话框模板 API
xii | 目录
实例化对话框组件
抽象对话框模板包装
总结
第 11 章 Shadow DOM ．
什么是 Shadow DOM?
Shadow DOM 基础概念
Shadow 宿主
Shadow 根元素
在 Shadow DOM 中使用模板
Shadow DOM 的样式
样式封装
为宿主元素添加样式
在文档中设置 shadow 子树根节点样式
内容映射
通过 content 标签映射
通过选择器映射内容
节点分发和接入点
Shadow 接入点
事件与 Shadow DOM
使用 Shadow DOM 更新对话框模板
对话框标签
对话框的 API
更新对话框 show 方法
初始化对话框实例
总结
第 12 章自定义元素．
自定义元素简介
注册自定义元素
扩展元素
扩展自定义元素
扩展自原生元素
定义属性和方法
解析自定义元素
目录 | xiii
参与自定义元素的生命周期
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback
为自定义元素添加样式
在自定义元素中使用模板和 Shadow DOM
将对话框组件实现为一个自定义元素
创建对话框自定义元素
实现对话框自定义元素的回调函数
实现对话框自定义元素的 API
显示对话框
总结
第 13 章引入文档．
声明引入
获取引入的内容
获取文档
应用样式
获取模板
执行 JavaScript
理解引入和主文档的关系
解析引入
跨域
二级引入
加载自定义元素
引入对话框
总结
IV 使用 Polymer 测试，构建，部署 Web 组件
第 14 章 Polymer 简介．
Polymer 元素
添加样式
外部资源
过滤表达式
xiv | 目录
模板格式
数据绑定
循环块
上下文绑定
分支判断
复合模板指令
特性（attribute）和属性（peoperty）：元素的 API
原生特性
公开属性
实例方法
Polymer 的 JavaScript API
生命周期方法
事件
处理延迟工作
总结
第 15 章将对话框迁移至 Polymer ．
到底为什么要迁移到 Polymer
直接接口
管理依赖
使用 Bower 安装依赖
让我们开始吧
太简单了吧
Polymer 世界中的 jQuery
带来了什么
移除 jQuery
关于 jQuery 的结论
总结
第 16 章测试 Web 组件．
PhantomJS 1
PhantomJS 2
Selenium WebDriver
Karma
测试用例
目录 | xv
运行测试
总结
第 17 章打包和发布．
Vulcanize
Gulp
Grunt
Gruntfiles
Grunt Tasks
注册任务
Grunt 配置
使用 Bower 发布组件
注册组件
总结
第 18 章结语．
往何处去
Polymer
Mozilla X-Tag
document-register-element
WebComponents．org
CustomElements．io
祝你好运
索引

前言/序言

　　为什么写这本书
　　13 年前，我进入了Web 开发领域。这13 年来，Web 开发技术的进化一刻都未停止过，而且，其进化的速度正在逐渐加快。如果你了解一下，Google 在Polymer 和Web 组件技术中的投入，你多半会认为，在不久的将来，随着浏览器技术的进步，Web 组件将在Web开发领域占据一席之地。虽然目前Web 组件还有一些需要解决的问题，比如搜索引擎优化（SEO）等，但我认为这不会阻碍Web 组件的发展，我甚至认为这不是一件坏事。在Web 开发领域，Web 组件技术（或具有类似关于继承、构建、封装、依赖的标准的技术）已经被期盼已久。即使你不太关心Web 组件，那么看看这个领域的牛人们是如何实现自己的UI 库（比如，使一个元素可拖拽之类），也没有坏处。
　　Glenn Vanderburg 说：“开发者应该理解自己日常工作之下的抽象层。”我赞同这句话，而且我认为，对于大部分前端工程师，这一层抽象层通常就是指控件库，以及jQuery 插件甚至jQuery 本身，因为大部分前端工程师的日常工作就是跟这些工具打交道。这一层抽象层中，包含控件库所进行的DOM 操作、DOM 本身及其原生API。理解这些库是怎么工作的，会帮助你写出高效的代码，帮助你提升。
　　有时候，这些常用的库并不能很好地适用你面临的具体情形（你的产品经理或信息技术官将此情形抛给你处理），这时，如果你不会“游泳”，就会“溺水而亡”。我想，提前学习一些“游泳”课程（也就是本书了），会让你在那一天到来之时不那么手忙脚乱。而我，就没你那么幸运了。
　　我曾经负责制作一个定宽的门户产品，其中每一个门户组件都是可以调整大小的。听上去很简单，是吗？首先，我被告知在我之前的Web 开发者曾经尝试完成这个功能，但是都失败了，他们说这是不可完成的。好吧，听上去很挑战。当时IE9 刚刚进入市场，因为之前的“技术债”，我们运行着三个不同版本的jQuery 和两套不同版本的jQuery UI，没有一个组合能够很好地适配IE9。于是，我工作的第一步，就是将站点使用的jQuery统一到一个版本，并适配IE9。你也许认为，统一jQuery 的版本非常简单，但刚刚接手，我就意识到为什么我们欠下了那么多的“技术债”。我们的站点上运行着大量新旧混杂、良莠不齐的jQuery 插件。升级jQuery 伴随着对这些插件的升级，以及打破了现有的代码体系。我对一些插件进行了升级或者修补，而更换了另外一些插件。这个过程需要对DOM 的深入了解，当时我并不具备。我在控制台输出日志进行调试，在Stack Overflow（http://stackoverflow.com）寻求帮助，甚至进行逆向工程，最终解决了每一个问题。而这，仅仅是在开始开发新功能（门户组件可调整尺寸）之前所做的准备工作。
　　接下来，我收到了一个可笑的需求，就是门户组件列的调整，只能精确地调整为某些预设好的尺寸，而不能随意调整。当时并没有一个插件能够满足这个要求，于是我编写了自己的插件。
　　当我把（意大利面条似的）插件代码写完之后，我就需要应用插件使每一个门户组件可被调整大小。各种鼠标事件必须协同起来，保证拖拽的时候不会从外层容器中溢出。从此我爱上了setTimeout ，直至今天。
　　如果你对我的故事感同身受，那么你自己一定也有类似的故事。就像我一样，你把各种Stack Overflow 上获得的代码片段、各式jQuery 插件，用自己的“胶水代码”粘在一起，你需要100 个不同的分支，处理各种各样的异常，这些异常均因为你对内在机制缺乏了解而造成的。我也曾经处于那种情境下，那一点都不好玩。所以，我用自己的经验写下了这本书。
　　这本书除了能让你避免“溺水而亡”，还能帮助你了解UI 组件功能的底层细节。
　　? 本书允许你定义对自己有意义的API，因为jQuery 插件并不适用每一个人。
　　? 让你拥有整个技术栈的控制，方便你调试，允许你自己决定某些变化发生在哪个层面。
　　? 允许你自己决定哪些特性是重要的，哪些是不必要的，以控制代码的体积。这在对代码体积比较关心的场合（如手机应用）很有用。
　　? 允许你针对自己的应用和用户场景做额外的优化。
　　最后，我认为每个前端工程师都应该理解原生DOM 和JavaScript。这份理解，和设计方案的能力，是优秀的前端工程师所必须的。
　　本书包含什么
　　本书编写的最初目的，是向读者传授基础知识，用以开发和部署Web 组件。本书更像是入门教程，而不是详尽、彻底的教科书。本书中的知识被分为四个部分，每个部分为一篇，每一篇又分几个章节，全部是围绕一份项目代码编写的。
　　第I 部分UI 核心概念
　　第I 部分的内容包含了诸如克隆节点、渲染图层、堆叠上下文，以及z-index 的相关知识，理解这些知识能帮助我们对页面上的元素进行定位、拖拽和尺寸调整。这些概念经常被开发者误解（或不完全理解），进而导致不佳的软件设计和实现，影响应用的性能与代码的可维护性。如果你对这些概念已经了如指掌，那么也可以跳过第I 部分。
　　第I 部分，我们将引入一个组件基类（它会派生出对话框控件类）。组件基
　　类和对话框将贯穿本书的其余部分。如果你跳过了第I 部分，但又想了解一
　　下组件基类的细节，可以快速回顾一下第 2 章。
　　第II 部分构建UI
　　本书第II部分介绍了当下前端类库，如Dojo（http://dojotoolkit.org）、jQueryU（I http://jqueryui.com）、KendoU（I http://www.kendoui.com）、Twitter Bootstrap（http://getbootstrap.com）遵循的概念和模式。你日常工作中用到的UI 组件，可能就是遵循这些概念和模式实现出来的。如果不深入其中，这些抽象和UI 组件提供的好处是很难理解的。我强烈建议前端工程师使用一个提供了良好生命周期、继承模式、工具函数和工具类的基础库，比如jQuery UI。如果你想追寻一个更轻量级的库，那么你可以了解一下jQuery++（http://jquerypp.com），这个库提供了拖拽、调整尺寸等功能，代码体积仅为162KB。它也允许你挑选其中的部分特性生成一份代码，以进一步减少库的代码体积。
　　本书将实现一个对话框组件，实现该组件的过程就是实践上述概念和模式的过程。
　　如果你对这些模式都非常清楚，想更深入地研究Web 组件，那么也可以从第 III 部分开始。
　　第III 部分构建HTML5 Web 组件
　　本书的第III 部分，介绍了由W3C 定义、浏览器实现的Web 组件技术。这一部分使用了前两部分编写的对话框控件，将其转化为一个功能全面的Web 组件。
　　第IV 部分使用Polymer 测试，构建，部署Web 组件
　　本书的第IV 部分涵盖了如何使用Google 的Polymer（http://www.polymer-project.org）桥接Web 组件技术与当前浏览器环境。Polymer 提供了方便的API，便于你创建可扩展的Web组件。这一部分，还将指导你将第 III 部分编写的对话框Web 组件转化为一个Polymer组件。最后，本书还会介绍如何使用构建工具和包管理工具打包和部署Web 组件（包括Polymer 化版本的组件）。
　　本书不包含什么
　　本书的目的不是成为一份开发Web 组件的“权威指南”，教会你在任何能够访问互联网的设备上开发Web 组件。因为以下两个原因，这几乎是不可能的。
　　首先，这几年浏览器性能正在飞速的提升，而Internet 也从一个“文档传递”网络逐渐变成了一个准应用平台。在这个转变的过程中，浏览器变得更加稳定，具有了更多丰富的特性。在编写表格布局的页面和使用Netscape 4 进行测试的年代里，这是不敢想象的事情。很多原本需要使用JavaScript 实现的功能，现在只需要CSS 就能够完成了。然而问题是，虽然Web 的标准在进化，但浏览器并没能完全跟上，或者说不同浏览器对新特性的实现进度并不一致。浏览器的引擎，是浏览器厂商自己基于W3C 标准而实现的，不同厂商的实现细节自然不一样。这些新的特性，对于Web 组件开发来说尤为重要，但是浏览器世界是一个新的主题，一本书也不一定说得完，更不可能在本书中讨论清楚浏览器问题的细节了。而且当你开发Web 组件的时候，哪些浏览器支持哪些不支持，这些也不是最重要的。
　　其次，这五年来，能够访问互联网的设备，其数量和种类（手机，平板电脑等）也在飞速增长。新设备的进化和增长，以及设备厂商的努力，使得之前的诸如有限的处理器性能、有限的存储空间、较小的屏幕、较差的网络连接等问题得到了解决。新设备给Web开发领域的影响是有趣的，也带来了一些新概念和新模式，如响应式布局设计、触摸和手势事件，等等。但是，每个设备都有自己的“怪癖”，不断增长的移动设备市场，也会给Web 开发领域带来新的课题。但是，这个课题本书也并不会涉及。
　　试图在一本书中同时解释清楚这些复杂的问题，几乎是不可能的。本书的内容比《计算机编程艺术》还要宽泛，但是在第一章写完之前，也许就过时了。
　　除了关于市场上设备数量和功能的问题，你还需要知道的是，W3C 制定的Web 组件标准仍然在发展中。因此，本书中包含的内容，也许很快就会过时。等Web 组件标准制定好之后，会再出一版新版。我将尽最大的可能紧紧跟随标准。
　　如何使用代码范例
　　你可以在https://github.com/ Polymer：面向未来的Web组件开发下载 mobi epub pdf txt 电子书格式