出版時(shí)間:2010年7月 出版社:機(jī)械工業(yè)出版社 作者:曹劉陽 頁數(shù):281
Tag標(biāo)簽:無
前言
Web前端開發(fā)是從網(wǎng)頁制作演變而來的,名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中,網(wǎng)頁制作是Web 1.0時(shí)代的產(chǎn)物,那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的,用戶使用網(wǎng)站的行為也以瀏覽為主。2005年以后,互聯(lián)網(wǎng)進(jìn)入Web 2.0時(shí)代,各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn),網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片,各種富媒體讓網(wǎng)頁的內(nèi)容更加生動,網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn),這些都是基于前端技術(shù)實(shí)現(xiàn)的。以前會Photoshop和Dreamweaver就可以制作網(wǎng)頁,現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無論是開發(fā)難度上,還是開發(fā)方式上,現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā),所以現(xiàn)在不再叫網(wǎng)頁制作,而是叫Web前端開發(fā)。Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要,而且需要專業(yè)的前端工程師才能做好,這方面的專業(yè)人才近兩年來備受青睞。Web前端開發(fā)是一項(xiàng)很特殊的工作,涵蓋的知識面非常廣,既有具體的技術(shù),又有抽象的理念。簡單地說,它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。如何才能做得更好呢?第一,必須掌握基本的Web前端開發(fā)技術(shù),其中包括:CSS、HTML、DOM、BOM、Ajax、JavaScript等,在掌握這些技術(shù)的同時(shí),還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。第二,在一名合格的前端工程師的知識結(jié)構(gòu)中,網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識也是必須掌握的。第三,必須學(xué)會運(yùn)用各種工具進(jìn)行輔助開發(fā)。第四,除了要掌握技術(shù)層面的知識,還要掌握理論層面的知識,包括代碼的可維護(hù)性、組件的易用性、分層語義模板和瀏覽器分級支持,等等。可見,看似簡單的網(wǎng)頁制作,如果要做得更好、更專業(yè),真的是不簡單。這就是前端開發(fā)的特點(diǎn),也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學(xué)習(xí)起來無從下手,對于老手來說,也時(shí)常不知道下一步該學(xué)什么。目前市面上關(guān)于Web前端開發(fā)的書主要都是針對單一技術(shù)的,本書與這些書有著本質(zhì)的區(qū)別。它主要想實(shí)現(xiàn)兩個目標(biāo):第一,為不太有經(jīng)驗(yàn)的Web前端開發(fā)工程師建立大局觀,讓他們真正了解和理解這個職業(yè);第二,幫助有一定Web前端開發(fā)經(jīng)驗(yàn)的工程師修煉內(nèi)功,通過編寫高質(zhì)量的代碼來提高前端代碼的可維護(hù)性。這是很多前端開發(fā)工程師感興趣的內(nèi)容。本書的前兩章討論了網(wǎng)站重構(gòu)和團(tuán)隊(duì)合作,這是很有必要的。網(wǎng)站重構(gòu)的目的僅僅是為了讓網(wǎng)頁更符合Web標(biāo)準(zhǔn)嗎?不是!重構(gòu)的本質(zhì)應(yīng)該是構(gòu)建一個前端靈活的MVC框架,即HTML作為信息模型(Model),CSS控制樣式(View),JavaScript負(fù)責(zé)調(diào)度數(shù)據(jù)和實(shí)現(xiàn)某種展現(xiàn)邏輯(Controller)。同時(shí),代碼需要具有很好的復(fù)用性和可維護(hù)性。這是高效率、高質(zhì)量開發(fā)以及協(xié)作開發(fā)的基礎(chǔ)。建立了這種大局觀后,學(xué)習(xí)具體技術(shù)的思路就更清晰了。代碼質(zhì)量是前端開發(fā)中應(yīng)該重點(diǎn)考慮的問題之一。例如,實(shí)現(xiàn)一個網(wǎng)站界面可能會有無數(shù)種方案,但有些方案的維護(hù)成本會比較高,有些方案會存在性能問題,而有些方案則更易于維護(hù),而且性能也比較好。這里的關(guān)鍵影響因素就是代碼質(zhì)量。CSS、HTML、JavaScript這三種前端開發(fā)語言的特點(diǎn)是不同的,對代碼質(zhì)量的要求也不同,但它們之間又有著千絲萬縷的聯(lián)系。本書中包含著很多開發(fā)的思想和經(jīng)驗(yàn),都是在長期的開發(fā)實(shí)踐中積累下來的,不同水平的Web前端工程師都會從中獲得啟發(fā)。張克軍(著名Web前端開發(fā)工程師)2010年4月
內(nèi)容概要
本書以網(wǎng)站重構(gòu)為楔子,深刻而直接地指出了Web前端開發(fā)中存在的重要問題—代碼難以維護(hù)。如何才能提高代碼的可維護(hù)性?人是最關(guān)鍵的因素!于是本書緊接著全方位地解析了作為一名合格的前端開發(fā)工程師應(yīng)該掌握的技能和承擔(dān)的職責(zé),這對剛加入前端開發(fā)這一行的讀者來說有很大的指導(dǎo)意義。同時(shí),還解讀了制定規(guī)范和團(tuán)隊(duì)合作的重要性?! ”緯暮诵膬?nèi)容是圍繞Web前端開發(fā)的三大技術(shù)要素——HTML、CSS和JavaScript來深入地探討編寫高質(zhì)量的HTML代碼、CSS代碼和JavaScript代碼的方法、技巧、規(guī)范和最佳實(shí)踐,從而為編寫易于維護(hù)的Web前端代碼打下堅(jiān)實(shí)的基礎(chǔ)。這不是一本單純的“技術(shù)”書籍,沒有系統(tǒng)地講解Web前端開發(fā)的基礎(chǔ)知識,它更專注于“技巧”,探索如何為“技術(shù)”提供最佳“技巧”?! ”緯舜罅康拈_發(fā)思想和原則,都是作者在長期開發(fā)實(shí)踐中積累下來的經(jīng)驗(yàn)和心得,不同水平的Web前端開發(fā)者都會從中獲得啟發(fā)。尤其是對于那些中初級水平的讀者而言,本書是一本不可多得的內(nèi)功修煉秘籍。
作者簡介
曹劉陽,網(wǎng)名阿當(dāng),資深Web前端開發(fā)工程師,先后就職于中國雅虎和淘寶,現(xiàn)就職于新浪,一直從事Web前端開發(fā)工作,實(shí)戰(zhàn)經(jīng)驗(yàn)非常豐富,在通過提高代碼 質(zhì)量來增強(qiáng)可維護(hù)性方面頗有心得。精通HTML、CSS、JavaScript等前端開發(fā)技術(shù),對ActionScript、Flex、PHP、RoR等 Web開發(fā)技
書籍目錄
推薦序 贊譽(yù) 前言 致謝 第1章 從網(wǎng)站重構(gòu)說起 1.1 糟糕的頁面實(shí)現(xiàn),頭疼的維護(hù)工作 1.2 Web標(biāo)準(zhǔn)—結(jié)構(gòu)、樣式和行為的分離 1.3 前端的現(xiàn)狀 1.4 打造高品質(zhì)的前端代碼,提高代碼的可維護(hù)性—精簡、重用、有序 第2章 團(tuán)隊(duì)合作 2.1 揭秘前端開發(fā)工程師 2.2 欲精一行,必先通十行 2.3 增加代碼可讀性—注釋 2.4 提高重用性—公共組件和私有組件的維護(hù) 2.5 冗余和精簡的矛盾—選擇集中還是選擇分散 2.6 磨刀不誤砍柴工—前期的構(gòu)思很重要 2.7 制訂規(guī)范 2.8 團(tuán)隊(duì)合作的最大難度不是技術(shù),是人 第3章 高質(zhì)量的HTML 3.1 標(biāo)簽的語義 3.2 為什么要使用語義化標(biāo)簽 3.3 如何確定你的標(biāo)簽是否語義良好 3.4 常見模塊你真的很了解嗎 3.4.1 標(biāo)題和內(nèi)容 3.4.2 表單 3.4.3 表格 3.4.4 語義化標(biāo)簽應(yīng)注意的一些其他問題3 第4章 高質(zhì)量的CSS4 4.1 怪異模式和DTD 4.2 如何組織CSS 4.3 推薦的base.css 4.4 模塊化CSS—在CSS中引入面向?qū)ο缶幊趟枷? 4.4.1 如何劃分模塊—單一職責(zé) 4.4.2 CSS的命名—命名空間的概念 4.4.3 掛多個class還是新建class —多用組合,少用繼承 4.4.4 如何處理上下margin 4.5 低權(quán)重原則—避免濫用子選擇器 4.6 CSS sprite 4.7 CSS 的常見問題 4.7.1 CSS的編碼風(fēng)格 4.7.2 id和class 4.7.3 CSS hack 4.7.4 解決超鏈接訪問后hover樣式不出現(xiàn)的問題 4.7.5 hasLayout4 4.7.6 塊級元素和行內(nèi)元素的區(qū)別 4.7.7 display:inline-block 和 hasLayout7 4.7.8 relative、absolute和float3 4.7.9 居中4 4.7.10 網(wǎng)格布局 4.7.11 z-index的相關(guān)問題以及Flash和IE 6下的select元素 4.7.12 插入png圖片 4.7.13 多版本IE并存方案—CSS的調(diào)試?yán)鱅ETester 第5章 高質(zhì)量的JavaScript 5.1 養(yǎng)成良好的編程習(xí)慣 5.1.1 團(tuán)隊(duì)合作—如何避免JS沖突 5.1.2 給程序一個統(tǒng)一的入口—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 編程實(shí)用技巧7 5.3.1 彈性7 5.3.2 getElementById、getElementsByTagName和getElements-ByClassName3 5.3.3 可復(fù)用性 5.3.4 避免產(chǎn)生副作用9 5.3.5 通過傳參實(shí)現(xiàn)定制3 5.3.6 控制this關(guān)鍵字的指向7 5.3.7 預(yù)留回調(diào)接口 5.3.8 編程中的DRY規(guī)則 5.3.9 用hash對象傳參 5.4 面向?qū)ο缶幊? 5.4.1 面向過程編程和面向?qū)ο缶幊? 5.4.2 JavaScript的面向?qū)ο缶幊? 5.4.3 用面向?qū)ο蠓绞街貙懘a 5.5 其他問題 5.5.1 prototype和內(nèi)置類 5.5.2 標(biāo)簽的自定義屬性 5.5.3 標(biāo)簽的內(nèi)聯(lián)事件和event對象 5.5.4 利用事件冒泡機(jī)制 5.5.5 改變DOM樣式的三種方式 附錄A 寫在規(guī)則前面的話 附錄B 命名規(guī)則 附錄C 分工安排附錄D 注釋規(guī)則 附錄E HTML規(guī)范 附錄F CSS規(guī)范 附錄G JavaScript規(guī)范
章節(jié)摘錄
插圖:
編輯推薦
《編寫高質(zhì)量代碼:Web前端開發(fā)修煉之道》:Web前端開發(fā)者的內(nèi)功修煉秘笈4大社區(qū)鼎立推薦!在這個用戶體驗(yàn)為王的Web 2.0時(shí)代,Web應(yīng)用所涉及的領(lǐng)域越來越廣,規(guī)模越來越大,需求越來越多樣化和復(fù)雜化,更新的速度也越來越快。如何才能讓我們的應(yīng)用應(yīng)對規(guī)模化、多樣化、復(fù)雜化和快速變化帶來的種種問題?編寫高質(zhì)量的、易于維護(hù)的Web前端代碼似乎是解決這些問題的唯一途徑。如何才能編寫出高質(zhì)量的、易于維護(hù)的Web前端代碼?《編寫高質(zhì)量代碼:Web前端開發(fā)修煉之道》的主要內(nèi)容圍繞Web前端開發(fā)的三大技術(shù)要素——HTML、CSS和JavaScript展開,深入地討論了編寫高質(zhì)量的HTML代碼、CSS代碼和JavaScript代碼的方法、技巧、規(guī)范和最佳實(shí)踐,從而為編寫易于維護(hù)的Web前端代碼打下堅(jiān)實(shí)的基礎(chǔ)。希望《編寫高質(zhì)量代碼:Web前端開發(fā)修煉之道》能幫助大家從一籌莫展的前端維護(hù)工作中走出,從此微笑地面對需求的“變化”?;ヂ?lián)網(wǎng)進(jìn)入Web 20時(shí)代以后,Web應(yīng)用敲響了傳統(tǒng)桌面應(yīng)用的喪鐘,它一路摧城拔寨,如今幾乎所有的應(yīng)用都打上了“Web”的烙印。與之相應(yīng)的,Web開發(fā)技術(shù)得到了空前的發(fā)展,尤其是前端技術(shù)。近年來,隨著用戶對使用體驗(yàn)的要求越來越高,前端開發(fā)的技術(shù)難度越來越大,昔日設(shè)計(jì)和制作不分的網(wǎng)頁設(shè)計(jì)師這一職位終于“拆分”成了視覺設(shè)計(jì)師和前端開發(fā)工程師兩個職位,分別向著藝術(shù)和技術(shù)的方向縱深發(fā)展。Web前端開發(fā)工程師是一個很新的職業(yè),在國內(nèi)乃至國際上真正開始受到重視的時(shí)間也不超過5年,這類專業(yè)人才一直供不應(yīng)求。從知識體系上講,前端開發(fā)工程師需要掌握和了解的知識非常之多,甚至可以用龐雜來形容。作為一名沒有太多經(jīng)驗(yàn)的前端開發(fā)工程師,我們應(yīng)該如何去全面認(rèn)識自己的工作,如何找準(zhǔn)自己的定位,如何從合格成為優(yōu)秀,最后邁向卓越?《編寫高質(zhì)量代碼:Web前端開發(fā)修煉之道》嘗試從如何編寫易于維護(hù)的、高質(zhì)量的Web前端代碼的角度給出答案。如果你在思考下面這些問題,也許《編寫高質(zhì)量代碼:Web前端開發(fā)修煉之道》就是你想要的!作為一名合格的web前端開發(fā)工程師,究竟需要具備哪些技能和素質(zhì)?為什么說如果要精Web前端開發(fā)這一行,必須先精通十行?在Web應(yīng)用的實(shí)現(xiàn)代碼中,有哪些技術(shù)因素會導(dǎo)致應(yīng)用難以維護(hù)?高質(zhì)量的Web前端代碼應(yīng)該滿足哪些條件?如何才能提高Web前端代碼的可讀性和可重用性?在HTML代碼中,為何要使用語義化標(biāo)簽?如何檢查你使用的標(biāo)簽是否語義良好?語義化標(biāo)簽時(shí)應(yīng)該注意哪些問題?如何編寫CSS代碼和JavaScript代碼可以避免團(tuán)隊(duì)合作時(shí)產(chǎn)生沖突?如何組織CSS文件才能讓它們更易于管理?如何讓CSS模塊化,從而提高代碼的重用率?CSS的命名應(yīng)該注意哪些問題?何謂優(yōu)良的CSS編碼風(fēng)格?如何在CSS編碼中引入面向?qū)ο蟮木幊趟枷??這樣做有哪些好處?原生JavaScript和JavaScript類庫之間有何關(guān)系?如何編寫自己的JavaScript類庫?JavaScript有哪些常見的跨瀏覽器兼容問題?如何解決這些問題?如何組織JavaScript才能讓代碼的結(jié)構(gòu)更清晰有序,從而更易于維護(hù)?如何才能編寫出彈性良好的JavaScript代碼?編寫過程中應(yīng)該注意哪些問題?JavaScript的對象編程是如何實(shí)現(xiàn)的?如何用面向?qū)ο蟮姆绞街貙懺械拇a?編寫高質(zhì)量的JavaScript代碼有哪些實(shí)用的技巧?又有哪些常見的問題需要注意?為了提高Web前端代碼的可維護(hù)性,我們應(yīng)該遵循哪些規(guī)范?
圖書封面
圖書標(biāo)簽Tags
無
評論、評分、閱讀與下載