Polymer：麵嚮未來的Web組件開發下載 mobi epub pdf 電子書 2025

簡體網頁||繁體網頁

☆☆☆☆☆

[美] Jarrod Overson，[美] Jason Strimpel 著，謝光磊譯

下載連結在頁面底部

facebook linkedin mastodon messenger pinterest reddit telegram twitter viber vkontakte whatsapp 複製連結

想要找書就要到圖書大百科

book.qciss.net

立刻按 ctrl+D收藏本頁

你會得到大驚喜!!

齣版社：電子工業齣版社

ISBN：9787121271724

版次：1

商品編碼：11790523

品牌：Broadview

包裝：平裝

開本：16開

齣版時間：2015-10-01

用紙：膠版紙

頁數：256

正文語種：中文

具體描述

編輯推薦

　　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/