Web Component實戰：探索PolymerJS、Mozilla Brick、Bosonic與ReactJS框架 @ 3dWoo大學簡體電腦書店

Web Component實戰：探索PolymerJS、Mozilla Brick、Bosonic與ReactJS框架 ( 簡體字)
作者：范洪春等	類別：1. -> 程式設計 -> 網路編程 -> React
出版社：電子工業出版社	3dWoo書號： 42699 詢問書籍請說出此書號！有庫存 NT售價： 325 元
出版日：10/1/2015
頁數：216
光碟數：0
站長推薦：
印刷：黑白印刷	語系： ( 簡體字 )
ISBN：9787121273827	加入購物車 │加到我的最愛 (請先登入會員)
(簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證, 繁體書的下載亦請直接連絡出版社)
目錄前言內容簡介目錄前言 . . . . 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 Web組件正在快速成熟，本書將針對架構、配置及工作選擇進行具體詳細的介紹。讀者將接觸到web組件發展的核心工具和文件庫，包括Polymer、Bosonic、 Mozilla Brick、和ReactJS，并通過實例講解Web組件的發展、運用JavaScript創建功能性Web組件，以及建立自己的Web組件工具箱。前言歡迎你來到《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，找到本書并按提示提交勘誤信息。一旦你的勘誤信息被核實，你的提交將被接收并且勘誤信息會被上傳到我們站點或者被添加到這本書新印次的版本中。