Web Component實戰：探索PolymerJS、Mozilla Brick、Bosonic與ReactJS框架 ( 簡體 字) |
| 作者：范洪春 等 | 類別：1. -> 程式設計 -> 網路編程 -> React |
| 譯者： |
| 出版社：電子工業出版社 |  3dWoo書號： 42699
詢問書籍請說出此書號！【有庫存】
NT售價： 325 元 |
| 出版日：10/1/2015 |
| 頁數：216 |
| 光碟數：0 |
|
站長推薦：   |
| 印刷：黑白印刷 | 語系： ( 簡體 版 ) |
| |
加入購物車  │加到我的最愛
(請先登入會員) |
| ISBN：9787121273827 |
| 作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
| (簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
| 作者序： |
| 譯者序： |
前言：前言
歡迎你來到《WebComponent實戰》。如果你想學習和理解W3C提出的WebComponent
規范，使用 Polymer、Bosonic、Mozilla Brick 及 ReactJS 開發自己的 Web Component，那這本
書一定很適合你。它提供了一個系統化的方法來構建響應式 web 應用程序。這本書會闡述
所有可以幫助構建 Web Component 規范的關鍵特性，并附有所需的完整源代碼。
本書概覽
第 1 章 Web Component 簡介
本章主要介紹 Web Component，囊括了創建 Web Component 單元的詳細說明。
第 2 章 Polymer 簡介
本章主要介紹關于 Google 的 Polymer 類庫。解釋了該類庫的架構體系。同樣也探索了
core 和 paper 元素。
第 3 章 使用 Polymer 開發 Web Component
本章主要介紹關于如何使用 PolymerJS 開發自己的 Web Component。同樣也提供了使用
該類庫創建自定義組件的詳細指南。
第 4 章 探索 Web Component 開發工具 Bosonic
本章側重于講解 Bosnic 工具。闡述了如何使用這些工具創建自定義組件。
第 5 章 使用 Mozilla Brick 開發 Web Component
在本章你會接觸到 Mozilla Brick 類庫，囊括了 Brick 類庫的簡明介紹。同樣也包含了使
用 Brick 創建各類組件的代碼示例。
第 6 章 使用 ReactJS 開發 Web Component
本章側重于講解 ReactJS，解釋了什么是 React 方式。包含了使用 ReactJS 創建 Web
Component 的代碼示例。
附錄 Web Component 參考文獻
列出了進一步學習 Web Component 可能用到的站點和論壇。
閱讀本書可能用到的工具
本書所需的工具和類庫如下。
? WebStorm IDE
? 最新的 Chrome
? GIT
? npm
? Bower
? Yeoman
? Grunt
面向讀者
本書適用于有意向學習和開發 Web Component 的開發者，對于那些想要學習市場上各
類框架來開發 Web Component 的開發者同樣適用。當然，這本書對于每一個有興趣深入了
解 Web Component，想要開發屬于自己的自定義組件的開發者也很適用。
本書約定
在本書中，會有不同的文本樣式用于區分不同類別的信息。下面是這些樣式的部分示
例，并且解釋了它們的含義。
文本段中的代碼、數據表名、文件夾名、文件名、文件擴展名、路徑名、URL、用戶輸
入的文本及 Twitter 賬號會按照下面的方式展示：
“我們可以通過使用 include 指令來包含其他的上下文。”
代碼塊會遵循下面的方式：
xiv 前言
＜!DOCTYPE html＞
＜html＞
＜head lang="en"＞
＜meta charset="UTF-8"＞
＜title＞Web Component: template support＜/title＞
＜/head＞
＜body＞＜/body＞
＜/html＞
如果想強調代碼塊的某一特定部分，會加粗相應的行或者項：
＜body＞
＜div id="container"＞＜/div＞
＜template id="aTemplate"＞
＜h1＞Template is activated using importNode method.＜/h1＞
＜/template＞
＜script＞
所有的輸入或者輸出命令行遵照下面的方式書寫：
npm install --save b-sortable
新的術語和關鍵字加粗顯示。在屏幕上出現的單詞，比如在菜單或者彈窗中，會以類
似這樣的文本出現：“現在，單擊 Delete SayHello Element，可以從 DOM 樹中移除該元素”。
彈窗中會有類似這樣的警示或者重要提示。
類似這樣的小提示或小技巧。
讀者反饋
我們永遠歡迎讀者的反饋。告訴我們你覺得這本書怎么樣——喜歡或者不喜歡什么。
讀者反饋對我們來說非常珍貴，它會幫助我們改進，相信你也會從中受益的。
僅僅需要將反饋內容通過 broadview@phei.com.cn 發送給我們，并且在郵件的主
題中指明書籍的名稱。
如果你在哪一方面有專長并且對撰寫或者貢獻一本書很有興趣，可以在http://www.
broadview.com.cn 參閱我們的作者向導。
前言 xv
示例代碼下載
你可以在登錄后從 https://www.packtpub.com/ 下載你所購買的所有 Packt 書籍
對應的示例代碼。如果你在別處購買了這本書，你可以訪問 https://www.packtpub.
com/books/content/support 并且完成注冊，我們會將代碼以文件的形式直接發送到
你的郵件中。
本書勘誤
盡管我們已經盡全力確保內容的準確性，但錯誤還是可能會出現。如果你在我們的書
籍中發現了錯誤（或許是文本或者代碼中的錯誤），如果能將其告知我們，感激不盡。這樣，
你可以挽回其他讀者的沮喪心情并且幫助我們提升這本書的后續版本。如果有任何勘誤信
息，請訪問 http://www.broadview.com.cn，找到本書并按提示提交勘誤信息。一旦
你的勘誤信息被核實，你的提交將被接收并且勘誤信息會被上傳到我們站點或者被添加到
這本書新印次的版本中。 |
內容簡介：Web組件正在快速成熟，本書將針對架構、配置及工作選擇進行具體詳細的介紹。讀者將接觸到web組件發展的核心工具和文件庫，包括Polymer、Bosonic、 Mozilla Brick、和ReactJS，并通過實例講解Web組件的發展、運用JavaScript創建功能性Web組件，以及建立自己的Web組件工具箱。 |
目錄：目錄
前言 . . . . 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
viii 目錄
使用設計工具開發 . . . . 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
目錄 ix
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
x 目錄
第 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
目錄 xi
ReactJS 生命周期示例 . . . . 181
有狀態的自定義組件 . . . . 184
生產環境預編譯 JSX . . . . 186
JSX 文件監聽 . . . . . 190
使用 ReactJS 開發一個數顯時鐘 . . . 190
第 1 步 開發腳本定義數顯時鐘組件生命周期 . . 190
第 2 步 定義數顯時鐘組件的 CSS 樣式 . . . 191
調試 ReactJS . . . . . 192
總結 . . . . . 194
附錄 Web Component 參考文獻 . . 195 |
| 序： |
