Polymer:面向未来的Web组件开发
  • 推荐0
  • 收藏1
  • 浏览486

Polymer:面向未来的Web组件开发

Jarrod Overson, Jason Strimpel (作者)  谢光磊 (译者)

  • 书  号:978-7-121-27172-4
  • 出版日期:2015-10-23
  • 页  数:256
  • 开  本:16(178*233)
  • 出版状态:上市销售
  • 原书名: Developing Web Components: UI from jQuery to Polymer
  • 原书号:9781491949023
  • 维护人:张春雨
本书包含了构建常用JavaScript组件的基础知识,并通过实例带领你学习组件的概念化、设计和实施,后半部分则涵盖了封装、打包和部署的相关知识。无论你是缺乏组件使用经验的JavaScript开发人员,还是具有组件库的丰富使用经验、想创建出定制组件的前端开发人员,这本书都适合你阅读。
√ 全球首部关于Google Polymer 新型UI构建框架的技术书籍
√ Web组件技术是前端开发的大势所趋,所有新技术都由此发端,关于这个话题也只有本书涉及
√ 本书提供详尽实战案例,介绍了全新Web组件开发的思路和流程
前言
为什么写这本书
13年前,我进入了Web开发领域。这13年来,Web开发技术的进化一刻都未停止过,而且,其进化的速度正在逐渐加快。如果你了解一下,Google 在 Polymer 和 Web 组件技术中的投入,你多半会认为,在不久的将来,随着浏览器技术的进步,Web 组件将在 Web开发领域占据一席之地。虽然目前 Web 组件还有一些需要解决的问题,比如搜索引擎优化(SEO)等,但我认为这不会阻碍 Web 组件的发展,我甚至认为这不是一件坏事。在Web 开发领域,Web 组件技术(或具有类似关于继承、构建、封装、依赖的标准的技术)已经被期盼已久。即使你不太关心 Web 组件,那么看看这个领域的牛人们是如何实现自己的 UI 库(比如,使一个元素可拖拽之类),也没有坏处。
GlennVanderburg说:“开发者应该理解自己日常工作之下的抽象层。”我赞同这句话,而且我认为,对于大部分前端工程师,这一层抽象层通常就是指控件库,以及 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)、jQueryUI (http://jqueryui.com)、KendoUI (http://www.kendoui.com)、TwitterBootstrap (http://getbootstrap.com)遵循的概念和模式。你日常工作中用到的UI组件,可能就是遵循这些概念和模式实现出来的。
如果不深入其中,这些抽象和UI组件提供的好处是很难理解的。我强烈建议前端工程师使用一个提供了良好生命周期、继承模式、工具函数和工具类的基础库,比如jQueryUI。
如果你想追寻一个更轻量级的库,那么你可以了解一下 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 组件标准制定好之后,会再出一版新版。我将尽最大的可能紧紧跟随标准。
致谢
Jason Strimpel
首先,我要感谢我的妻子Lasca对我的鼓励和理解。我无法想象比她更好的人生伴侣,也没有见过另一个像他这样聪慧、美丽和特别的人。我爱你,你是我的一切。
我还要感谢我的老板 Claude Jones,他帮助和指导我完成了本书。没有他,就没有这本书的存在。
我还要感谢本书的另一位作者 Jarrod Overson,他答应编写本书的第 IV 部分。如果本书有什么不恰当的地方,那一定是我的责任。跟我相比,你是一位更有天赋的作者、演说家和工程师。
此外,我还要感谢 Simon St.Laurent,他倾听了我的不成熟的想法,并给出了很好的建议,这些建议帮助我把这些想法最终转化为了本书。同样,本书的编辑 Brian Anderson,他是我见过的最耐心的人。如果没有他,本书只会是一堆没有上下文,无法被其他人理解的手稿。谢谢你,Brian。
最后,我还要感谢本书的“隐秘合伙人”:社区中的那些编程牛人。他们的编程水平远超于我,教会了我无数的知识和经验。他们从公众视野中为我们选择出了最精华的部分。
如果你足够幸运,能够与他们共事,那么请相信我,你一定会马上发现(他们是真正的牛人),并听从他们的经验。正是因为他们,我才能够从一个资质平平的开发者成长为一名工程师,才能够分享我拥有的这些知识。
Jarrod Overson
如果没有我耐心的妻子,Kate Lane,我在本书中的工作根本无法完成。这些年,她已经习惯于听我唠唠叨叨地讲述那些关于JavaScript体系和物理模拟的话题,默默支持我,还能保持好奇心。是你的支持,使我能够安心出国演、写代码到深夜、花费很多时间组织社区事务。没有你的支持,就没有我所拥有的一切,包括我们的两个可爱的孩子。
谢谢你 Finn,你为我的生活带来了太多的乐趣。作为你的父亲,我常常被你的天才想法所惊讶和激动。同样谢谢你 Norah,你总能够让我抛却烦恼。你们两个是我的骄傲和前进的动力。
最后,谢谢你 Jason。你在编写本书的时候想到了我,你是 San Diego 最优秀的开发者之一,与你共事是我的荣耀。希望在将来,能够与你有更多的合作。

目录

前言. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
第 1 章 概述. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
什么是 Web 组件 2
HTML 模板 3
HTML 引用 3
自定义元素 3
Shadow DOM 3
为什么使用 Web 组件 4
I UI 核心概念
第 2 章 基础知识 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
DOM 抽象层的重要性 9
控件的 API 和生命周期 10
继承模式 12
依赖 13
优化 14
Web 组件不仅仅是 JavaScript 15
示例控件 15
Voltron 控件基类 16
对话框类 18
对话框的 CSS 和 HTML 19
ix
总结 20
第 3 章 文档流与定位 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
文档流 21
定位元素 22
offsetParent 22
定位 24
计算元素的位置 26
相对于视窗 27
相对于文档 27
定位对话框控件 28
总结 29
第 4 章 理解和操作 z-index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
z-index 究竟是什么? 31
渲染层、堆叠次序与 z-index 32
默认堆叠次序 32
重写默认堆叠次序 33
堆叠上下文 34
堆叠上下文是怎么创建的? 34
事情越来越复杂了 35
管理 z-index 35
创建对象管理 z-index 36
转化为 jQuery 插件 43
向对话框控件类添加 z-index 管理功能 45
总结 45
II 构建 UI
第 5 章 克隆节点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
使用 cloneNode 方法 50
使用 jQuery.clone 51
对话框控件 53
总结 53
x | 目录
第 6 章 创建浮层 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
定义 API 55
工具 57
检测滚动栏的宽度 57
计算容器宽度时考虑滚动条 58
获取元素尺寸和坐标 59
监听尺寸改变事件和滚动事件 60
更新选项 60
销毁 61
定位 61
相对视窗或相对另一个元素定位 62
相对另一个元素定位元素 64
向对话框控件添加浮层功能 66
总结 67
第 7 章 拖动元素 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
鼠标事件 69
$.mousemove 69
$.mousedown 70
$.mouseup 70
鼠标事件的最佳实践 70
1. 在 $.mousedown 事件中绑定 $.mousemove 事件 70
2. 在 $.mouseup 事件中解除 $.mousemove 的绑定 71
3. 将 $.mouseup 事件响应函数绑定到 上 71
4. 命名所有事件 71
定义 API 72
创建拖拽柄 73
拖动起来 73
$.mousedown 响应函数 73
$.mousemove 响应函数 74
$.mouseup 事件响应函数 75
销毁可拖拽实例 76
使对话框控件可拖拽 77
总结 78
目录 | xi
第 8 章 调整元素尺寸 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
鼠标事件和最佳实践 79
事件 79
最佳实践 80
调整元素尺寸 80
编写调整尺寸的 API 81
拖拽/尺寸调整柄区 82
绑定鼠标事件 83
$.mousedown 事件响应函数 83
$.mousemove 事件响应函数 85
$.mouseup 事件响应函数 85
销毁工作 86
完成调整尺寸功能 86
使对话框控件可调整大小 91
总结 92
第 9 章 完成对话框控件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
添加样式 93
添加 CSS 93
合并 JavaScript 文件 94
总结 95
III 构建 HTML5 Web 组件
第 10 章 模板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
理解模板的重要性 100
延迟加载资源 101
延迟渲染内容 101
从 DOM 中隐藏内容 101
创建和使用模板 101
检测浏览器支持 101
将模板放到标签中 102
将模板内容插入到 DOM 中 102
使用模板编写对话框组件 102
创建和包装对话框模板 API 103
xii | 目录
实例化对话框组件 104
抽象对话框模板包装 104
总结 105
第 11 章 Shadow DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107
什么是 Shadow DOM? 107
Shadow DOM 基础概念 108
Shadow 宿主 108
Shadow 根元素 108
在 Shadow DOM 中使用模板 109
Shadow DOM 的样式 110
样式封装 110
为宿主元素添加样式 111
在文档中设置 shadow 子树根节点样式 113
内容映射 115
通过 content 标签映射 116
通过选择器映射内容 116
节点分发和接入点 118
Shadow 接入点 118
事件与 Shadow DOM 120
使用 Shadow DOM 更新对话框模板 121
对话框标签 121
对话框的 API 122
更新对话框 show 方法 122
初始化对话框实例 123
总结 123
第 12 章 自定义元素 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125
自定义元素简介 126
注册自定义元素 126
扩展元素 127
扩展自定义元素 127
扩展自原生元素 128
定义属性和方法 128
解析自定义元素 129
目录 | xiii
参与自定义元素的生命周期 130
createdCallback 130
attachedCallback 130
detachedCallback 131
attributeChangedCallback 131
为自定义元素添加样式 132
在自定义元素中使用模板和 Shadow DOM 132
将对话框组件实现为一个自定义元素 134
创建对话框自定义元素 134
实现对话框自定义元素的回调函数 135
实现对话框自定义元素的 API 136
显示对话框 137
总结 137
第 13 章 引入文档 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
声明引入 139
获取引入的内容 140
获取文档 141
应用样式 142
获取模板 143
执行 JavaScript 144
理解引入和主文档的关系 144
解析引入 145
跨域 145
二级引入 145
加载自定义元素 145
引入对话框 146
总结 147
IV 使用 Polymer 测试,构建,部署 Web 组件
第 14 章 Polymer 简介 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Polymer 元素 154
添加样式 155
外部资源 156
过滤表达式 157
xiv | 目录
模板格式 159
数据绑定 159
循环块 159
上下文绑定 160
分支判断 160
复合模板指令 161
特性(attribute)和属性(peoperty):元素的 API 161
原生特性 162
公开属性 162
实例方法 163
Polymer 的 JavaScript API 163
生命周期方法 163
事件 164
处理延迟工作 165
总结 165
第 15 章 将对话框迁移至 Polymer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167
到底为什么要迁移到 Polymer 167
直接接口 168
管理依赖 169
使用 Bower 安装依赖 170
让我们开始吧 173
太简单了吧 181
Polymer 世界中的 jQuery 182
带来了什么 182
移除 jQuery 183
关于 jQuery 的结论 186
总结 187
第 16 章 测试 Web 组件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189
PhantomJS 1 190
PhantomJS 2 190
Selenium WebDriver 191
Karma 191
测试用例 196
目录 | xv
运行测试 199
总结 201
第 17 章 打包和发布 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .203
Vulcanize 204
Gulp 209
Grunt 209
Gruntfiles 211
Grunt Tasks 212
注册任务 213
Grunt 配置 214
使用 Bower 发布组件 218
注册组件 220
总结 220
第 18 章 结语 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221
往何处去 221
Polymer 222
Mozilla X-Tag 222
document-register-element 223
WebComponents.org 223
CustomElements.io 223
祝你好运 224
索引. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .225

读者评论

电子书版本

  • Epub
  • Mobi

相关图书

写给大忙人的现代JavaScript

(德国)HORSTMANN, CAY S. (作者) 浙江阿里巴巴聚橙技术发展有限公司 (译者)

本书是一本简明的现代 JavaScript 教程,不仅涵盖函数式编程、JS 语法、JS 库等基础性内容,还介绍了国际化、异步编程、标准模块系统、元编程等较为复杂...

¥109.00

JavaScript 二十年

王译锋 (作者)

本书主要讲述了从 1995 年到 2015 年这20年间,JavaScript在创建、设计和演变方面所经历的过程。全书分为4个部分,每个部分都涵盖了 JavaS...

¥79.00

JavaScript语言精髓与编程实践(第3版)

周爱民 (作者)

本书详细讲述JavaScript作为一种混合式语言的各方面特性,包括过程式、面向对象、函数式和动态语言特性等,在动态函数式语言特性方面有着尤为细致的讲述。本书主...

¥144.00

狼书(卷2):Node.js Web应用开发

桑世龙 (作者)

目前市面的nodejs书籍基于0.10的为多,而基于最新4.X的非常少,本书是唯一一本基于node.js 4.0以上版本的书。而Koa是下一代node web的...

¥69.30

狼书(卷1):更了不起的Node.js

狼叔 桑世龙 (作者)

Node.js开发简单,性能极好,一经发布便成了明星级项目。随着大前端领域的蓬勃发展,跨平台开发、API构建、Web应用开发等场景愈加常见,Node.js也成为...

¥55.30

Koa与Node.js开发实战

Node.js 10已经进入LTS时代!其应用场景已经从脚手架、辅助前端开发(如SSR、PWA等)扩展到API中间层、代理层及专业的后端开发。Node.js在企...

¥49.00