《Polymer：面向未來的Web組件開發》是2015年10月電子工業出版社出版的圖書，作者是Jarrod Overson, Jason Strimpel。
基本介紹
- 書名：Polymer：面向未來的Web組件開發
- 作者：Jarrod Overson, Jason Strimpel 著
- 譯者：謝光磊 譯
- ISBN：978-7-121-27172-4
- 頁數：256頁
- 定價：65.00元
- 出版社：電子工業出版社
- 出版時間：2015年10月出版
- 開本：16
內容簡介,目錄,
內容簡介
《Polymer：面向未來的Web組件開發》包含了構建常用JavaScript組件的基礎知識，並通過實例帶領你學習組件的概念化、設計和實施，後半部分則涵蓋了封裝、打包和部署的相關知識。無論你是缺乏組件使用經驗的JavaScript開發人員，還是具有組件庫的豐富使用經驗、想創建出定製組件的前端開發人員，《Polymer：面向未來的Web組件開發》都適合你閱讀。
目錄
前言. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
總結 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
第 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 事件回響函式綁定到 <body> 上 71
4. 命名所有事件 71
定義 API 72
創建拖拽柄 73
拖動起來 73
$.mousedown 回響函式 73
$.mousemove 回響函式 74
$.mouseup 事件回響函式 75
銷毀可拖拽實例 76
使對話框控制項可拖拽 77
總結 78
第 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
實例化對話框組件 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
參與自定義元素的生命周期 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
模板格式 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
運行測試 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
