編輯推薦
      Web前端開發者的內功修煉秘笈
  4大社區鼎立推薦!
  在這個用戶體驗為王的Web 2.0時代,Web應用所涉及的領域越來越廣,規模越來越大,需求越來越多樣化和復雜化,更新的速度也越來越快。如何纔能讓我們的應用應對規模化、多樣化、復雜化和快速變化帶來的種種問題?編寫高質量的、易於維護的Web前端代碼似乎是解決這些問題的惟一途徑。
  如何纔能編寫齣高質量的、易於維護的Web前端代碼?《編寫高質量代碼:Web前端開發修煉之道》的主要內容圍繞Web前端開發的三大技術要素——HTML、CSS和JavaScript展開,深入地討論瞭編寫高質量的HTML代碼、CSS代碼和JavaScript代碼的方法、技巧、規範和實踐,從而為編寫易於維護的Web前端代碼打下堅實的基礎。希望《編寫高質量代碼:Web前端開發修煉之道》能幫助大傢從一籌莫展的前端維護工作中走齣,從此微笑地麵對需求的“變化”。
  互聯網進入Web 20時代以後,Web應用敲響瞭傳統桌麵應用的喪鍾,它一路摧城拔寨,如今幾乎所有的應用都打上瞭“Web”的烙印。與之相應的,Web開發技術得到瞭空前的發展,尤其是前端技術。近年來,隨著用戶對使用體驗的要求越來越高,前端開發的技術難度越來越大,昔日設計和製作不分的網頁設計師這一職位終於“拆分”成瞭視覺設計師和前端開發工程師兩個職位,分彆嚮著藝術和技術的方嚮縱深發展。
  Web前端開發工程師是一個很新的職業,在國內乃至國際上真正開始受到重視的時間也不超過5年,這類專業人纔一直供不應求。從知識體係上講,前端開發工程師需要掌握和瞭解的知識非常之多,甚至可以用龐雜來形容。作為一名沒有太多經驗的前端開發工程師,我們應該如何去全麵認識自己的工作,如何找準自己的定位,如何從閤格成為優秀,最後邁嚮卓越?《編寫高質量代碼:Web前端開發修煉之道》嘗試從如何編寫易於維護的、高質量的Web前端代碼的角度給齣答案。
  如果你在思考下麵這些問題,也許《編寫高質量代碼:Web前端開發修煉之道》就是你想要的!
  作為一名閤格的web前端開發工程師,究竟需要具備哪些技能和素質?為什麼說如果要精Web前端開發這一行,必須先精通十行?
  在Web應用的實現代碼中,有哪些技術因素會導緻應用難以維護?
  高質量的Web前端代碼應該滿足哪些條件?如何纔能提高Web前端代碼的可讀性和可重用性?
  在HTML代碼中,為何要使用語義化標簽?如何檢查你使用的標簽是否語義良好?語義化標簽時應該注意哪些問題?
  如何編寫CSS代碼和JavaScript代碼可以避免團隊閤作時産生衝突?
  如何組織CSS文件纔能讓它們更易於管理?如何讓CSS模塊化,從而提高代碼的重用率?CSS的命名應該
  注意哪些問題?何謂優良的CSS編碼風格?
  如何在CSS編碼中引入麵嚮對象的編程思想?這樣做有哪些好處?
  原生JavaScript和JavaScript類庫之間有何關係?如何編寫自己的JavaScript類庫?
  JavaScript有哪些常見的跨瀏覽器兼容問題?如何解決這些問題?
  如何組織JavaScript纔能讓代碼的結構更清晰有序,從而更易於維護?如何纔能編寫齣彈性良好的JavaScript
  代碼?編寫過程中應該注意哪些問題?
  JavaScript的對象編程是如何實現的?如何用麵嚮對象的方式重寫原有的代碼?
  編寫高質量的JavaScript代碼有哪些實用的技巧?又有哪些常見的問題需要注意?
  為瞭提高Web前端代碼的可維護性,我們應該遵循哪些規範?
 更多精彩好書推薦,請點擊以下圖片查看:
       內容簡介
     《編寫高質量代碼:Web前端開發修煉之道》以網站重構為楔子,深刻而直接地指齣瞭Web前端開發中存在的重要問題-代碼難以維護。如何纔能提高代碼的可維護性?人是最關鍵的因素!於是《編寫高質量代碼:Web前端開發修煉之道》緊接著全方位地解析瞭作為一名閤格的前端開發工程師應該掌握的技能和承擔的職責,這對剛加入前端開發這一行的讀者來說有很大的指導意義。同時,還解讀瞭製定規範和團隊閤作的重要性。
  《編寫高質量代碼:Web前端開發修煉之道》的核心內容是圍繞Web前端開發的三大技術要素——HTML、CSS和JavaScript來深入地探討編寫高質量的HTML代碼、CSS代碼和JavaScript代碼的方法、技巧、規範和實踐,從而為編寫易於維護的Web前端代碼打下堅實的基礎。這不是一本單純的“技術”書籍,沒有係統地講解Web前端開發的基礎知識,它更專注於“技巧”,探索如何為“技術”提供“技巧”。
  《編寫高質量代碼:Web前端開發修煉之道》包含瞭大量的開發思想和原則,都是作者在長期開發實踐中積纍下來的經驗和心得,不同水平的Web前端開發者都會從中獲得啓發。尤其是對於那些中初級水平的讀者而言,《編寫高質量代碼:Web前端開發修煉之道》是一本不可多得的內功修煉秘籍。     
作者簡介
   曹劉陽,網名阿當,資深Web前端開發工程師,先後就職於中國雅虎和淘寶,現就職於新浪,一直從事Web前端開發工作,實戰經驗非常豐富,在通過提高代碼 質量來增強可維護性方麵頗有心得。精通HTML、CSS、JavaScript等前端開發技術,對ActionScript、Flex、PHP、RoR等 Web開發技術也有較深入的研究。緻力於敏捷開發實踐,喜歡讀書,閱讀過大量技術書籍;擅於總結歸納,能將各種技術融會貫通。     
內頁插圖
          目錄
   推薦序
贊譽
前言
緻謝
第1章 從網站重構說起
1.1 糟糕的頁麵實現,頭疼的維護工作
1.2 Web標準-結構、樣式和行為的分離
1.3 前端的現狀
1.4 打造高品質的前端代碼,提高代碼的可維護性-精簡、重用、有序
第2章 團隊閤作
2.1 揭秘前端開發工程師
2.2 欲精一行,必先通十行
2.3 增加代碼可讀性-注釋
2.4 提高重用性-公共組件和私有組件的維護
2.5 冗餘和精簡的矛盾-選擇集中還是選擇分散
2.6 磨刀不誤砍柴工-前期的構思很重要
2.7 製訂規範
2.8 團隊閤作的最大難度不是技術,是人
第3章 高質量的HTML
3.1 標簽的語義
3.2 為什麼要使用語義化標簽
3.3 如何確定你的標簽是否語義良好
3.4 常見模塊你真的很瞭解嗎
3.4.1 標題和內容
3.4.2 錶單
3.4.3 錶格
3.4.4 語義化標簽應注意的一些其他問題
第4章 高質量的CSS4
4.1 怪異模式和DTD
4.2 如何組織CSS
4.3 推薦的base.css
4.4 模塊化CSS-在CSS中引入麵嚮對象編程思想
4.4.1 如何劃分模塊-單一職責
4.4.2 CSS的命名-命名空間的概念
4.4.3 掛多個class還是新建class-多用組閤,少用繼承
4.4.4 如何處理上下margin
4.5 低權重原則-避免濫用子選擇器
4.6 CSS sprite
4.7 CSS的常見問題
4.7.1 CSS的編碼風格
4.7.2 id和class
4.7.3 CSS hack
4.7.4 解決超鏈接訪問後hover樣式不齣現的問題
4.7.5 hasLayout4
4.7.6 塊級元素和行內元素的區彆
4.7.7 display: inline-block和hasLayout7
4.7.8 relative、absolute和float3
4.7.9 居中4
4.7.10 網格布局
4.7.11 z-index的相關問題以及Flash和IE6下的select元素
4.7.12 插入png圖片
4.7.13 多版本IE並存方案-CSS的調試利器IETester
第5章 高質量的JavaScript
5.1 養成良好的編程習慣
5.1.1 團隊閤作-如何避免JS衝突
5.1.2 給程序一個統一的入口-window.onload和DOMReady
5.1.3 CSS放在頁頭,JavaScript放在頁尾
5.1.4 引入編譯的概念-文件壓縮
5.2 JavaScript的分層概念和JavaScript庫
5.2.1 JavaScript如何分層
5.2.2 base層3
5.2.3 common層
5.2.4 page層4
5.2.5 JavaScript庫
5.3 編程實用技巧7
5.3.1 彈性7
5.3.2 getElementById、getElementsByTagName和getElements-ByClassName3
5.3.3 可復用性
5.3.4 避免産生副作用9
5.3.5 通過傳參實現定製3
5.3.6 控製this關鍵字的指嚮7
5.3.7 預留迴調接口
5.3.8 編程中的DRY規則
5.3.9 用hash對象傳參
5.4 麵嚮對象編程
5.4.1 麵嚮過程編程和麵嚮對象編程
5.4.2 JavaScript的麵嚮對象編程
5.4.3 用麵嚮對象方式重寫代碼
5.5 其他問題
5.5.1 prototype和內置類
5.5.2 標簽的自定義屬性
5.5.3 標簽的內聯事件和event對象
5.5.4 利用事件冒泡機製
5.5.5 改變DOM樣式的三種方式
附錄A 寫在規則前麵的話
附錄B 命名規則
附錄C 分工安排
附錄D 注釋規則
附錄E HTML規範
附錄F CSS規範
附錄G JavaScript規範      
前言/序言
     Web前端開發是從網頁製作演變而來的,名稱上有很明顯的時代特徵。在互聯網的演化進程中,網頁製作是Web 1.0時代的産物,那時網站的主要內容都是靜態的,用戶使用網站的行為也以瀏覽為主。2005年以後,互聯網進入Web 2.0時代,各種類似桌麵軟件的Web應用大量湧現,網站的前端由此發生瞭翻天覆地的變化。網頁不再隻是承載單一的文字和圖片,各種富媒體讓網頁的內容更加生動,網頁上軟件化的交互形式為用戶提供瞭更好的使用體驗,這些都是基於前端技術實現的。
  以前會Photoshop和Dreamweaver就可以製作網頁,現在隻掌握這些已經遠遠不夠瞭。無論是開發難度上,還是開發方式上,現在的網頁製作都更接近傳統的網站後颱開發,所以現在不再叫網頁製作,而是叫Web前端開發。Web前端開發在産品開發環節中的作用變得越來越重要,而且需要專業的前端工程師纔能做好,這方麵的專業人纔近兩年來備受青睞。Web前端開發是一項很特殊的工作,涵蓋的知識麵非常廣,既有具體的技術,又有抽象的理念。簡單地說,它的主要職能就是把網站的界麵更好地呈現給用戶。
  如何纔能做得更好呢?
  第一,必須掌握基本的Web前端開發技術,其中包括:CSS、HTML、DOM、BOM、Ajax、JavaScript等,在掌握這些技術的同時,還要清楚地瞭解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。
  第二,在一名閤格的前端工程師的知識結構中,網站性能優化、SEO和服務器端的基礎知識也是必須掌握的。
  第三,必須學會運用各種工具進行輔助開發。
  第四,除瞭要掌握技術層麵的知識,還要掌握理論層麵的知識,包括代碼的可維護性、組件的易用性、分層語義模闆和瀏覽器分級支持,等等。
  可見,看似簡單的網頁製作,如果要做得更好、更專業,真的是不簡單。這就是前端開發的特點,也是讓很多人睏惑的原因。如此繁雜的知識體係讓新手學習起來無從下手,對於老手來說,也時常不知道下一步該學什麼。
  目前市麵上關於Web前端開發的書主要都是針對單一技術的,本書與這些書有著本質的區彆。它主要想實現兩個目標:第一,為不太有經驗的Web前端開發工程師建立大局觀,讓他們真正瞭解和理解這個職業;第二,幫助有一定Web前端開發經驗的工程師修煉內功,通過編寫高質量的代碼來提高前端代碼的可維護性。這是很多前端開發工程師感興趣的內容。
  本書的前兩章討論瞭網站重構和團隊閤作,這是很有必要的。網站重構的目的僅僅是為瞭讓網頁更符閤Web標準嗎?不是!重構的本質應該是構建一個前端靈活的MVC框架,即HTML作為信息模型(Model),CSS控製樣式(View),JavaScript負責調度數據和實現某種展現邏輯(Controller)。同時,代碼需要具有很好的復用性和可維護性。這是高效率、高質量開發以及協作開發的基礎。建立瞭這種大局觀後,學習具體技術的思路就更清晰瞭。
  代碼質量是前端開發中應該重點考慮的問題之一。例如,實現一個網站界麵可能會有無數種方案,但有些方案的維護成本會比較高,有些方案會存在性能問題,而有些方案則更易於維護,而且性能也比較好。這裏的關鍵影響因素就是代碼質量。CSS、HTML、JavaScript這三種前端開發語言的特點是不同的,對代碼質量的要求也不同,但它們之間又有著韆絲萬縷的聯係。本書中包含著很多開發的思想和經驗,都是在長期的開發實踐中積纍下來的,不同水平的Web前端工程師都會從中獲得啓發。
  張剋軍(著名Web前端開發工程師)
  2010年4月     
				
 
				
				
					《精益代碼:打造穩健、高效的Web前端基石》  在瞬息萬變的數字浪潮中,Web前端開發已不再是簡單的頁麵搭建,而是構建用戶體驗、驅動業務增長的戰略前沿。從靜態展示到高度交互的動態應用,前端工程師麵臨的挑戰日益嚴峻:如何在保證性能的同時,實現卓越的用戶體驗?如何在快速迭代中,維持代碼的健壯性和可維護性?《精益代碼:打造穩健、高效的Web前端基石》正是為應對這些挑戰而生,它將帶您深入探索前端開發的精髓,為您提供一套係統、實用的方法論,助您從容駕馭現代Web前端開發的復雜性。  本書並非僅僅羅列技術棧或框架用法,而是迴歸到代碼的本質——如何編寫齣“好”的代碼。我們認為,“好”的代碼是可讀的、可維護的、可擴展的、高性能的,並且能夠有效傳達開發者的意圖。在本書中,我們將以一種“由內而外”的視角,剖析高質量前端代碼的構成要素,並提供切實可行的實踐指南。  第一部分:代碼的基石——理解與實踐  在現代Web開發中,JavaScript作為核心語言,其重要性不言而喻。但僅僅掌握語法遠不足以寫齣高質量的代碼。《精益代碼》將從JavaScript的底層機製齣發,深入講解其異步編程模型、原型鏈繼承、事件循環等核心概念。我們不會止步於錶麵的API調用,而是引導讀者理解“為什麼”是這樣設計的,從而能夠寫齣更具洞察力、更少齣錯的代碼。     理解JavaScript的異步哲學: 迴調地獄的睏擾,Promise的優雅,async/await的直觀,本書將係統梳理JavaScript異步編程的演進曆程,並教授如何利用現代化的異步模式,編寫齣清晰、可控的異步代碼,有效避免迴調嵌套,提升代碼的可讀性和可維護性。我們將深入講解Promise的內部機製,以及async/await如何通過Generator函數實現,幫助讀者建立對異步執行流程的深刻理解。    掌握原型與繼承的精髓: JavaScript獨特的原型繼承模型,是理解其動態性和靈活性的關鍵。本書將清晰地闡述原型鏈的工作原理,以及`__proto__`、`prototype`、`constructor`之間的關係。我們將探討如何利用原型繼承,實現高效的代碼復用,以及避免常見的繼承陷阱,編寫齣結構清晰、易於理解的對象模型。    事件循環與執行上下文的奧秘: JavaScript的單綫程模型與事件循環機製,是理解其非阻塞I/O和異步操作的關鍵。本書將深入剖析事件循環的運作流程,以及調用棧、作用域鏈、變量環境等執行上下文的概念。理解這些底層原理,將幫助您更準確地預測代碼的執行順序,診斷棘手的異步問題,並寫齣性能更優的代碼。  第二部分:架構與設計——構建可維護的係統  隨著項目規模的增長,良好的架構設計成為保證代碼質量和團隊協作效率的關鍵。《精益代碼》將引導您思考前端項目的結構化設計,從模塊化到組件化,再到整體的項目組織,提供一套可藉鑒的設計原則和模式。     模塊化與組件化: 現代前端開發離不開模塊化和組件化的思想。本書將深入探討CommonJS、AMD、ES Modules等模塊化規範,以及它們在項目中的應用。我們將著重講解組件化開發的核心理念,如何設計齣可復用、可組閤、高內聚、低耦閤的UI組件,以及如何構建清晰的組件通信機製,從而構建齣易於管理和擴展的前端應用。    狀態管理的設計之道: 在復雜的單頁麵應用中,管理應用的狀態是一項艱巨的任務。本書將跳齣具體框架的限製,從通用原則齣發,探討各種狀態管理策略,包括局部狀態、全局狀態、數據流管理等。我們將分析不同狀態管理方案的優劣,並提供設計高效、可預測狀態管理係統的指導,幫助您規避狀態不同步、數據混亂等常見問題。    設計模式在前端的應用: 藉鑒後端開發的成熟經驗,設計模式是提升代碼復用性、可維護性和可擴展性的利器。《精益代碼》將精選幾種在前端開發中尤為實用的設計模式,如工廠模式、觀察者模式、單例模式、模塊模式等,並結閤實際場景,通過生動的代碼示例,演示它們如何幫助我們解決具體問題,寫齣更優雅、更健壯的代碼。  第三部分:性能優化——追求極緻的用戶體驗  在追求功能豐富的同時,性能始終是Web前端的生命綫。用戶對響應速度的期待越來越高,任何一個性能瓶頸都可能導緻用戶流失。《精益代碼》將從多個維度,為您揭示前端性能優化的奧秘。     加載性能的飛躍: 首屏加載速度是用戶對應用的第一印象,至關重要。本書將深入剖析瀏覽器渲染原理,並提供一係列行之有效的加載優化策略,包括代碼分割、懶加載、圖片優化、資源壓縮、HTTP/2等。我們將講解如何利用Webpack等構建工具,實現精細化的代碼分割,以及如何通過服務端渲染(SSR)和預渲染(Pre-rendering)技術,顯著提升首屏加載體驗。    運行時性能的打磨: 即使加載完成,卡頓、掉幀等問題也會嚴重損害用戶體驗。本書將聚焦於JavaScript執行性能、DOM操作優化、事件處理機製等方麵。我們將講解如何避免不必要的重排與重繪,如何優化循環和算法,以及如何閤理使用requestAnimationFrame,實現流暢的動畫效果。    網絡請求的極緻壓縮: 網絡是前端性能的瓶頸之一。本書將從HTTP協議的底層原理齣發,深入講解如何優化網絡請求,包括HTTP緩存策略、CDN加速、API設計、數據傳輸格式等。我們將探討如何在客戶端與服務端之間,構建高效、低延遲的數據通信通道。  第四部分:工具與實踐——提升開發效率與質量  高效的工具鏈和良好的開發實踐,能夠極大地提升開發效率,並保證代碼質量。《精益代碼》將為您介紹一係列現代前端開發中不可或缺的工具和方法。     構建工具與模塊打包: Webpack、Rollup、Vite等構建工具,是現代前端項目的基石。本書將深入講解這些工具的核心概念和配置技巧,幫助您搭建高效的開發環境,實現代碼的自動化構建、壓縮、混淆、打包等。我們將重點講解如何利用構建工具,優化項目結構,提升打包效率,並支持各種前端特性。    代碼規範與靜態分析: 統一的代碼風格和靜態分析工具,是團隊協作和代碼質量保障的關鍵。本書將詳細介紹ESLint、Prettier等工具的使用,以及如何配置和遵循一套可執行的代碼規範。我們將闡述靜態分析在早期發現代碼錯誤、提升代碼可讀性方麵的巨大價值。    版本控製與協作流程: Git作為分布式版本控製係統的翹楚,在現代開發中不可或缺。本書將深入講解Git的核心命令和工作流程,以及如何與其他開發者高效協作。我們將探討分支策略、代碼審查(Code Review)等最佳實踐,確保項目的穩定性和可追溯性。  第五部分:測試與部署——保障應用的穩健上綫  高質量的代碼不僅要寫得好,更要經過嚴格的測試,並能夠穩定部署。《精益代碼》將為您提供一套完整的測試與部署策略。     前端測試的藝術: 測試是保證代碼質量的最後一道防綫。本書將全麵介紹單元測試、集成測試、端到端測試等不同層級的測試方法,並講解Jest、Cypress等主流測試框架的使用。我們將引導您編寫更具測試價值的代碼,並建立一套完善的自動化測試體係。    持續集成與持續部署(CI/CD): CI/CD流程是實現自動化、高效率部署的關鍵。本書將為您講解CI/CD的基本概念和工作原理,並介紹GitHub Actions、GitLab CI等主流CI/CD工具的使用。我們將幫助您搭建一個自動化構建、測試、部署的流程,極大地縮短開發周期,提高交付效率。    生産環境的穩定守護: 應用上綫後,監控與日誌是保證其穩定運行的重要手段。本書將探討生産環境的常見問題,並提供相應的解決方案,包括性能監控、錯誤追蹤、日誌分析等。我們將幫助您建立一套有效的生産環境監控體係,及時發現和解決問題。  《精益代碼:打造穩健、高效的Web前端基石》不僅僅是一本技術書籍,更是一本關於“工程思維”的書籍。它鼓勵開發者們跳齣“實現功能”的思維定勢,深入理解代碼的內在價值,用更精益、更嚴謹的態度去對待每一次編碼。通過本書的學習,您將能夠:     寫齣更易讀、更易懂、更易維護的代碼, 降低溝通成本,提升團隊協作效率。    構建更具擴展性、更易復用的代碼模塊, 應對不斷變化的需求。    打造更穩定、更高性能的應用, 為用戶提供卓越的體驗。    掌握現代前端開發的先進工具和流程, 提升個人競爭力。    培養嚴謹的工程思維, 成為一名真正“懂代碼”的開發者。  無論您是剛入行的新手,還是經驗豐富的開發者,本書都將為您提供寶貴的啓示和實用的方法。讓我們一起踏上精益代碼的修煉之路,共同打造更加美好的Web世界!