編寫高質(zhì)量代碼

出版時(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

評論、評分、閱讀與下載


    編寫高質(zhì)量代碼 PDF格式下載


用戶評論 (總計(jì)71條)

 
 

  •   這本書就是一本胡說八道的書,簡單點(diǎn)說,就是吭爹的書。先說CSS部分:他在第50頁上面有一長段代碼:body,div,dl,dt,dd,ul.....{margin:0px;padding:0px},然后解釋說,為什么不用*{},理由是這個*號會同時(shí)將一些老的不用的標(biāo)簽也重置。真服了他了,你寫了這么一大堆標(biāo)簽的重置,難道你在頁面中會全部用到。你師娘沒告訴你,瀏覽器是在頁面處理時(shí),才進(jìn)行標(biāo)簽解釋的,并不會去解析所有未在頁面中出現(xiàn)的標(biāo)簽。另外,作者用了大量HACK代碼,如<!-- if ie6-->,這種代碼早就為許多人不屑一顧了。真想親自問一下作者,你認(rèn)真研究過這些代碼嗎?你在全部六個主流瀏覽器上真實(shí)測試過這些代碼嗎?我相信,如果你真的試過,你自己都會抽自己的耳光。再說他的高質(zhì)量javascript部分,我再舉一個例子(第135頁);(function (){ var a=123;})他說這個變量a是全局可見的。真想抽作者的耳光,你師娘教你,也不能教成這個樣。誰告訴你這個變量是全局可見的。至于作者非常鐘情的匿名函數(shù),真的希望作者去看一本書,《高級javascript編程>,里面對于匿名函數(shù)的利弊,以及作者以一個高深陌測專家身份大談特談的作用域問題有一個非常精確的解釋。...凡此種種,這本書上的錯誤,如果有誰愿意去買下來做為反面教材的話,還是非常不錯的。真的不要說什么高質(zhì)量代碼,四大社區(qū)鼎力推薦。真的不想用更損人的話來說你。搞技術(shù)的,還是踏踏實(shí)實(shí)的,真的不要自己都似懂非懂的就出來教人了。 閱讀更多 ›
  •   內(nèi)容還沒看,但是不知道紙張漲價(jià)還是怎樣,以前的價(jià)格不是這樣的紙張。太差勁。幾張白紙夾雜幾張草紙。希望內(nèi)容會好吧
  •   從公司的圖書館借到的,感覺非常不錯~~~前兩章集中介紹前端開發(fā)需要注意的事項(xiàng),后三章分別介紹了html,css,js,總之,對于剛?cè)胄械男氯硕?,這是不可多得的一本好書~~~都說老外寫的書好,但是我現(xiàn)在真是不習(xí)慣看清華出版的那些老外的書,不曉得是翻譯問題,還是觀念問題,理解起來總是有難度,國人開始寫一些原創(chuàng)的好書,對我們而言未嘗不是一件好事
  •   非常不錯,非常推薦購買,標(biāo)簽語義化方面作者介紹了一個很好的方法學(xué)習(xí),模塊化CSS也是非常不錯的經(jīng)驗(yàn)和技巧介紹,第五章介紹了javascript方面的多經(jīng)驗(yàn)和技巧。各位看官如果結(jié)合實(shí)際肯定會有不小的收獲。不足的是在第四章的css hack部分瀏覽器專有hack方法介紹不全 只介紹了IE中的 if endif 其他幾種瀏覽器的專有hack方法沒有提及。其中提及的其他hack建議還是最好少用,因?yàn)槌袚?dān)著向后兼容的風(fēng)險(xiǎn)。由于非ie需要使用hack的情況比較少,我的意見是將需要hack的樣式集中起來使用各個瀏覽器專有的hack方法避免向后兼容的風(fēng)險(xiǎn),同時(shí)采用專人獨(dú)立管理以便維護(hù)。需要指出的是第54頁末提到詳見4.3.3節(jié),我對正本書模糊搜索和精確查找也沒找到這個章節(jié),但是從頁碼上又是連續(xù)不缺頁的。糾結(jié)了一下又看了一遍上下文 發(fā)現(xiàn)4.4節(jié) (可能)就是4.3.3節(jié)所指內(nèi)容。
  •   本人對js雖然不是很了解,但是后面的js部分估計(jì)都能看下去,我覺得比看厚厚的權(quán)威指南好多了,不知道是不是不習(xí)慣國外的一本正經(jīng)和嚴(yán)肅。談css吧。買這本書的那段時(shí)間也在研究css模塊化以及如何減少冗余代碼的問題。作者提出的“多用組合,少用繼承”的認(rèn)識估計(jì)很多人也有。但是我在深思熟慮后,覺得還是得看實(shí)際情況。畢竟這會給維護(hù)帶來很大的麻煩。假如我們極端到把結(jié)構(gòu)中只留下類名,那么,在內(nèi)容不變的前提下,基本可以隨心所欲的更改樣式,而不必去動結(jié)構(gòu)了。所以說,這得看情況。如果網(wǎng)站更改不頻繁,布局基本固定,那么你可以考慮這種做法,否則,要注意類庫中類的粒度不能太細(xì)了。另外,css森林的鬼鬼有對css模塊化的討論,如何去減少冗余的css代碼,大家可以去深究下,并總結(jié)下規(guī)律。思維會更開闊些,而不是隨便就給標(biāo)簽加載類。
  •   加急送貨還挺快的,仔細(xì)地翻了翻,內(nèi)容確實(shí)非常好,但是封面被送貨的人劃傷了,美中不足,希望卓越的包裝能好點(diǎn)。
  •   前端開發(fā)越來越重要,但是其復(fù)雜和“漫長”的知識體系讓很多前端開發(fā)者傷透腦筋,也是因?yàn)檫@些原因,專門講前端開發(fā)的書幾乎沒有,這本書算是首創(chuàng)了,從內(nèi)容上看,這本書不僅能給前端開發(fā)者軟(職業(yè)規(guī)劃和學(xué)習(xí)方法)的指導(dǎo),還能給予硬(HTML、CSS和JavaScript方面的編碼技巧)的指導(dǎo),算得上是佳品了。尤為值得一提的是,這本書也非常適合做Web開發(fā)的人看,因?yàn)檫@里面總結(jié)的編碼技巧都很實(shí)用。
  •   算是它帶領(lǐng)我進(jìn)入前端的領(lǐng)域,雖然回頭看看比較淺顯~
  •   我讀了前幾章,不錯的,適合提升,不適合入門。后面js部分沒讀,因?yàn)槲疫€沒學(xué)js。
  •   國內(nèi)書籍,關(guān)于代碼閱讀,擴(kuò)展,組織結(jié)構(gòu)
  •   看完javascript和css突飛猛進(jìn)
  •   工作兩年左右的絕對不會看此書的,作者應(yīng)該玩過YUI,里面是YUI的一些思想,例子也有YUI的影子,工作一個月的同學(xué)可以看看此書,會對前端有幫助的。
  •   適合工作有2左右的同學(xué)看看。
  •   如今前端工程師必讀之書,有作者日常工作的經(jīng)驗(yàn)總結(jié),非常好
  •   適合前端開發(fā)學(xué)習(xí),呵呵,我都快讀完了
  •   很實(shí)用,改正了很多。
  •   此書是本人在網(wǎng)上買的第一本書,購買時(shí)間是2011年6月1日(拿到書的時(shí)間),購買地點(diǎn)是南昌,在當(dāng)當(dāng)網(wǎng)買的,后來兩年我又在亞馬遜買了不下于30本技術(shù)類書。... 閱讀更多
  •   紙張顏色不一致,有黃有白
  •   書質(zhì)量不錯,很多人推薦的書
  •   非常不錯,實(shí)用,是一本好書。
  •   Web前端開發(fā)修煉之道
  •   DIV CSS前端開發(fā)經(jīng)常遇到的問題
  •     都是以照顧IE7,8為主,順便兼容W3C標(biāo)準(zhǔn)。
      比如:e=window.event || e;
      el=e.srcElement || e.target;
      所以在chrome及眾“國內(nèi)自主研發(fā)處理器”大行其道的年代,這本書顯得過時(shí)了。
      
      這部分的組織也比較混亂,比如上面的瀏覽器事件兼容處理放到了“JS分層”這小節(jié)里。
      
      正本書有彩頁和黑白頁無規(guī)律混在一起,讀起來很怪異。目錄的頁碼緊跟在章節(jié)后面,剛開始看的時(shí)候還以為沒帶頁碼。
  •     Object.prototype.say = function(){alert(1)}
      function fun(){}
      fun.say(); //1
      var li = document.getElementsByTagName("li");
      alert(typeof li[0]); //Object
      li[0].say(); //IE6-8不支持
      
      所以想知道原因,和解決辦法(如何兼容:獲取到的DOM對象可以使用Object擴(kuò)展的方法)
      
      說明白點(diǎn),我想自己寫一個像jQuery的$(),獲取到的DOM對象能繼承一些統(tǒng)一的方法,求大牛指點(diǎn)
  •     1、大面積的代碼和截圖有湊篇幅之嫌
      2、校訂不認(rèn)真很多印刷/書寫錯誤
      3、像是自己的wiki整理后給出版了
      4、現(xiàn)在很多前端工程師是從后端轉(zhuǎn)過來的~
      
      我的結(jié)論:如果想看借來或蹲書店花幾個小時(shí)過一遍就行了
  •     作者推薦的bass.css文件,本人是僅有3個月經(jīng)驗(yàn)的前端,想問關(guān)于這個文件一些代碼的意思;
      感覺這個文件中最需要弄懂的一段代碼(因?yàn)樯婕安欢臇|西基本是最多的,但用處其實(shí)對我來說應(yīng)該是比較大的)是:
      .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
      .clearfix {display:inline-block;}
      *html .clearfix {height:1%;}
      .Clearfix {display:block;}
      其中
      1 .clear:after 是否和a:hover是類似于偽類的標(biāo)簽~?
      2 content:"." 這個屬性和值是表示什么意思~?
      3 visibility:hidden 這個屬性和值和display:none除了前者還占據(jù)著頁面上的位置以外還有什么本質(zhì)的區(qū)別~?
      4 display:inline-block是由內(nèi)聯(lián)元素轉(zhuǎn)化為塊元素的意思么~?
      5 *html .clearfix {height:1%;}的意思是在ie中給這個屬性設(shè)置了height:1%這個意思嗎~?
      6 .Clearfix {display:block;}中的class名"C"是不是印刷有誤導(dǎo)致大寫的~?
      如果是,之前的由第一個display:block到visibility:hidden再到display:inline-block;最后到現(xiàn)在的這個display:block這樣一層層的拼權(quán)重嵌套是一個什么意思呢~?
      等各路大俠和高手說明~....
  •     前幾月買了這本書
      覺得還是不較實(shí)在
      帶 書本的代碼一直沒找到 在書本的地址自帶網(wǎng)址用打不開
      后來還是在http://www.chengxuyuans.com 找到的
      真的感謝配合代碼才有事半功倍的效果
  •     P143 頁,命名空間的函數(shù)
       GLOBAL.namespace=function(str){
       var arr=str.split("."),o=GLOBAL;
       for (var i=(arr[0]="GLOBAL") ? 1 : 0;i<arr.length;i++){
       o[arr[i]]=o[arr[i]] || {};
       o=o[arr[i]];
       }
       }
      
      第三行var i=(arr[0]="GLOBAL")少了一個"="號,應(yīng)該是var i=(arr[0]=="GLOBAL")。
      
      P195那個也是錯的,但P179那個是對的。
      
      書出版時(shí)要好好勘查啊。編程一個符號之差,謬之千里啊!
  •     最近要做一個很復(fù)雜的配置項(xiàng)頁面,元素超多,聯(lián)動復(fù)雜,邏輯復(fù)雜
      要用js在前臺 建模
      由于以前只是寫了年把java代碼,前端水平很初級,寫的代碼比較土,于是上網(wǎng)弄了幾本書回來
      今天下午收到書,下班回來從122頁k到基本結(jié)束
      k到現(xiàn)在覺得很有收獲,四十幾的定價(jià),在京東買三十幾,哎三十幾請個人吃頓飯都嫌少,何況一頓飯人家也不會跟你講這么多 這么系統(tǒng),
      值
      作者將技術(shù)與經(jīng)驗(yàn)分享出來
      我覺得我需要將看書的感受分享出來,所以k到現(xiàn)在,開電腦寫書評,,
  •     將面向?qū)ο蟮乃枷霊?yīng)用在前端開發(fā)我也是看了這本書才知道,老實(shí)說,我十分的佩服,對于CSS分離,分離到什么程度是一直沒有一個知道思想,起碼用這種思想我能得到一些啟發(fā)
  •     1.主要是講關(guān)于前端開發(fā)流程的思考。
      2.前端不只單是技術(shù)。某些習(xí)慣和方式也很重要。
      3.在某些結(jié)構(gòu)安排和代碼寫法上的確很有啟發(fā)。
  •     今天到的書,兩天半就到了,送貨速度還不錯!
      隨便翻了翻,發(fā)現(xiàn)有些是彩頁,內(nèi)容大概有了解一下,感覺一般。。。
  •     無論底層技術(shù)的支持上,還是跨平臺兼容的需求上,都為迎來前端的繁榮局面做好了準(zhǔn)備。預(yù)計(jì)前端主導(dǎo)的產(chǎn)品會越來越多,前端工程師的位置會越來越重要。(來自互動)
  •     前端的門檻低、前端的應(yīng)用多為小的效果、前端的應(yīng)用很零散、前端主導(dǎo)的產(chǎn)品少——這是前端開發(fā)工作不受重視的主要原因。(來自卓越)
  •     2007年以前,網(wǎng)頁設(shè)計(jì)師是典型的多面手,負(fù)責(zé)設(shè)計(jì)、制作、js、flash甚至server端;2007年之后才有UED的說法,什么交互設(shè)計(jì)師、UI設(shè)計(jì)師、前端開發(fā)工程師之類。(來自當(dāng)當(dāng))
  •     這本書的重點(diǎn)不在于講解“技術(shù)”,而是更側(cè)重于“技巧”的講解。
      融入了作者一線工作中的體會,實(shí)用性很強(qiáng)!
     ?。▉碜宰吭剑?/li>
  •     P48 原文說(CSS中的)common層等于MVC中的M
      這何必...CSS又不是什么可程序化的東西, 何必非要跟這個詞去套近乎.
      
      P53~54
      雙倍margin的現(xiàn)象是: IE6中左浮動那么左margin會雙倍, 右浮動那么右margin會雙倍. 原文沒有明確說明左右.
      
      P81~82
      CSS的權(quán)重不能簡單地說"HTML選擇符是1, 類選擇符是10, ID選擇符是100"
      因?yàn)檫@里并沒有10進(jìn)制的進(jìn)位關(guān)系, 亦即, 即使10個類選擇符一起也不抵一個ID選擇符的權(quán)重.
      
      P89~91
      利用CSS解析的怪異之處, 讓一些css規(guī)則僅適用于某些瀏覽器, 這叫CSS Filter而不叫CSS Hack
      向后兼容這個詞的使用似乎也不太正確. `為盡量滿足/適應(yīng)新版本`應(yīng)該叫做向前兼容吧.
      http://en.wikipedia.org/wiki/Forward_compatibility
      
      P94
      hasLayout雖說是IE的私有實(shí)現(xiàn), 但其效果可以說完全是照著CSS規(guī)范中的Block formatting context來的. 提一嘴有益于理解.
      
      P112~P122
      網(wǎng)格布局(至少在相對廣泛的認(rèn)識中)不是簡單地指按百分比布局的CSS框架, 而是平面設(shè)計(jì)的概念
      簡單說就是用分欄+欄間的槽來確定頁面中各個元素的橫向尺寸(塊寬度, 橫向間距, 表單域?qū)挾鹊?.
      這本書對網(wǎng)格布局有介紹: http://book.douban.com/subject/2345964/
      這本書也有一章講到 http://book.douban.com/subject/3042031/
      
      P165
      用document.all來檢測瀏覽器是否為IE? 這顯然是邏輯錯誤.
      如果是IE, 那么有document.all, 前者是后者的充分而非必要條件
      如果是IE, 那么需要用e.cancelBubble=false來完成取消冒泡, 邏輯關(guān)系同上.
      如此, 并不能確定document.all是使用cancelBubble的充分條件.
      比如面對opera這里: http://dev.opera.com/articles/view/using-capability-detection/
      
      P176
      這幾個類型檢測函數(shù), 多數(shù)只是簡單的typeof封裝, 意義不大(當(dāng)然不排除是為了應(yīng)對未來的JS語言改進(jìn)而設(shè));
      有些不夠嚴(yán)謹(jǐn), 比如isFunction會在Webkit系瀏覽器中把正則表達(dá)式判斷為函數(shù), isArray只是簡單應(yīng)用instanceof, 不能正確檢測另一個window環(huán)境中的數(shù)組.
      
      P183
      一個JS庫中的Cookie與Ajax通信部分都是在重新定義瀏覽器API, 抹平瀏覽器間差異, 按照作者的觀點(diǎn)似乎更適合放在Base層而不應(yīng)放在Common層.
      
      P190
      對詞法作用域的解釋不夠詳盡.
      P207
      對this關(guān)鍵字的解釋也感覺不夠深入
      (考慮到本書更多關(guān)注的是前端架構(gòu)規(guī)劃與團(tuán)隊(duì)協(xié)作, 技術(shù)層面的不深入可以稍微原諒一點(diǎn)么?)
      
      P217
      電話簿的例子, 作者分明用非OO的語法寫出了OO思想的代碼, 卻說這是面向過程的代碼.
      PHP中的curl庫(嗯其實(shí)就是C中的curl庫)就是典型的非OO語言實(shí)現(xiàn)了OO. 與書中的電話簿例子何其相似.
      另外面向過程編碼與OOP也并不是非此即彼的分類關(guān)系吧..?
      
      總之神經(jīng)如我者慎讀.
  •     邏輯分明,結(jié)構(gòu)清晰,深入淺出:
      “Web標(biāo)準(zhǔn)由一系列標(biāo)準(zhǔn)組合而成,其核心理念就是將網(wǎng)頁的結(jié)構(gòu)、樣式和行為分離開來,所以它可以分為三大部分:結(jié)構(gòu)標(biāo)準(zhǔn)、樣式標(biāo)準(zhǔn)和行為標(biāo)準(zhǔn)...”
      
  •     “工程師往往都是更專注于技術(shù)的,不太善于處理人際關(guān)系。比起復(fù)雜的人,大多數(shù)工程師往往更喜歡非黑即白,非0即1,非true即false的代碼。學(xué)會與人相處也是工程師們必要的一個課程,它的重要性甚至超過技術(shù)本身?!?br />   ——深有同感,有的時(shí)候人際交往大于技術(shù)本身!
      
  •     CSS、HTML、JavaScript這三種前端開發(fā)語言的特點(diǎn)是不同的,對代碼質(zhì)量的要求也是不同的,但它們之間又有著千絲萬縷的聯(lián)系。
      這本書離有很多開發(fā)的思想和原則,應(yīng)該都是在長期開發(fā)實(shí)踐中積累下來的。
     ?。▉碜宰吭剑?br />   
  •     看似簡單的網(wǎng)頁制作,如果要做得更好、更專業(yè),真的是不簡單。讓很多人困惑!
      
      這么紛雜的知識體系讓新手學(xué)習(xí)起來無從下手,對于老手來說,也時(shí)常不知道下一步該學(xué)什么。
      
      這本書幫到了我。推薦一下!
      
     ?。▉碜援?dāng)當(dāng))
  •     目前市面關(guān)于Web前端開發(fā)的書主要都是針對單一技術(shù)的,而本書是以打造高質(zhì)量的Web前端為目標(biāo),講解如何通過編寫高質(zhì)量的前端代碼來實(shí)現(xiàn)這一目標(biāo)。這其實(shí)才是前端開發(fā)工程師真正想學(xué)的。
      ——這也正是我看這本書的原因!
      (來自當(dāng)當(dāng))
  •     這本書的寫作思路不錯,從編寫高質(zhì)量的前端代碼的角度來探討如何提高前端代碼的可維護(hù)性,僅從這一點(diǎn)上就能看得出來作者的確是有經(jīng)驗(yàn)之人,因?yàn)槲覀冏銮岸碎_發(fā)的都知道,編寫易于維護(hù)的前端代碼有多么的重要。
      
      這本書拿到手里一口氣讀完了,書不算太厚,言語也寫得很平實(shí)流暢,所以讀起來比較快,也比較輕松。從內(nèi)容上講,這本書寫得不錯,雖然HTML、CSS和JavaScript的編碼技巧有千千萬,這本書沒有將這些全部列舉出來,但是本書的內(nèi)容卻能很好地圍繞”如何編寫高質(zhì)量前端代碼“這個主題展開,很能給人啟發(fā)。
      
      這本書的品相和氣質(zhì)也不錯,還有幾個部分是彩色印刷,很nice。
      
      正如Fenng一樣,可以把這本書收藏起來或者推薦給做前端開發(fā)的朋友。
  •    
      1. 這本書前段時(shí)間已經(jīng)重印了,修正了其中的一些瑕疵,使之更接近完美;
      
      2. 這本書的作者憑借這本書獲得著名社區(qū)51CTO 2010評選的最佳原創(chuàng)圖書作者虛榮。
      
  •   這個XX社區(qū)XX評選..是中國的吧?
  •   snoopy啊...國人寫的書慎讀啊...
  •   另外,你站書店翻書是有做筆記的習(xí)慣么...
  •   嗯本來就是想去免費(fèi)讀一遍的 - -
  •   你是個神仙!
  •   您好,目前為此,您的意見是所有反饋中提得最細(xì)致的,看得出來您很用心地讀了本書,非常感謝您提的意見。
    如您所說“ (考慮到本書更多關(guān)注的是前端架構(gòu)規(guī)劃與團(tuán)隊(duì)協(xié)作, 技術(shù)層面的不深入可以稍微原諒一點(diǎn)么?)
    ”,本書的關(guān)注點(diǎn)在于前端架構(gòu)規(guī)劃和團(tuán)隊(duì)協(xié)作,所以一些并不太實(shí)用的地方我沒打算過于糾結(jié),不得不承認(rèn),為了突出主線和重點(diǎn),在一些細(xì)節(jié)方面我選擇了放棄處理。例如“CSS選擇符權(quán)重”,“用document.all”來檢測瀏覽器類型等。事實(shí)上,我們很難會遇到套用10層class進(jìn)行選擇的情況,而對于瀏覽器檢測,更好的做法當(dāng)然是為瀏覽器類型封裝一個getBrowser()函數(shù),這樣才最安全。
    我寫本書的目的在于“分享一種思路”,讓還沒有這種思路的讀者,可以建立起這樣的思路。我很喜歡《don't make me think》這本書,它盡量控制自己的篇幅,希望讀者能在幾個小時(shí)內(nèi)看完它,我也希望自己的書能夠像它一樣,薄,但很有營養(yǎng)。一個合適的讀書過程應(yīng)該是薄厚薄,我對本書的定位在第三階段的薄,所以對于知識點(diǎn)會有一定的取舍,重要的地方我會詳述,在我看來不太實(shí)用的地方,我會略寫。如書的前言所說,我會假設(shè)讀者已經(jīng)有一定基礎(chǔ),所以不會對一些基本概念糾結(jié)。
    您提的問題幾乎全是技巧問題,而非技術(shù)問題,而技巧不是用對和錯來說的,見仁見智。也許有為自己開脫之嫌,對于技巧性問題,盡信書不如無書,取您認(rèn)為對的地方吸收,認(rèn)為不對的地方保留您自己的意見,對您,也對其他讀者。
    再次感謝您對本書的關(guān)注,謝謝。
  •   oh~~~snoopy,你要紅了么
  •   @阿當(dāng): 那么你的簡略是以犧牲技術(shù)嚴(yán)謹(jǐn)性為代價(jià)的么, 這我無法支持.
    至于說我提的問題更多是技巧性還是技術(shù)性的, 我寧愿不解釋.
  •   打住吧....snoopy ...
    [我不愿看到熟悉的人發(fā)生狗血的劇情...]
  •   好了,大家就此打住吧,以討論技術(shù)為主,不要發(fā)生口角。
  •   書我也看了。確實(shí)不錯~如果你有經(jīng)驗(yàn)就像CSS的特殊性。啊當(dāng)完全是為了更好的讓其他人理解才去那樣寫的,寫書的人有自己的想法,如果我們揣摩一下他的想法,我想讀起來不會自己給自己找事~這書傳達(dá)的的確是一種思想。而不是技巧。我1天就看完了。但是我能感覺到這是作者工作經(jīng)驗(yàn)中的實(shí)踐來的東西,而不是抄來的!對我是有幫助的而不是沒用處~沒有完美的書,只有不完美的讀者苛刻的要求。挑刺誰都會,尚且任何事物都可以去調(diào)毛病~何必呢?樓主上面舉出的例子,我不知道你是正的為了大家好?還是有什么想法?想證明什么?作者都說了是面向有基礎(chǔ)的前端人員的,我想基礎(chǔ)起碼起碼能明白作者書中一筆帶過的東西吧~不明白何必讀此書? 最后我再說幾句,我不認(rèn)識 啊當(dāng)。 當(dāng)我是他書的讀者。我學(xué)到的東西,我應(yīng)該分享! 最后說句流氓的話,差之毫厘謬以千里~你看起來這本書簡單,讓你去寫。你就知道自己基礎(chǔ)有多爛了。
  •   這書其實(shí)挺好的。不過不管是技巧還是技術(shù)多番溝通也利于進(jìn)步。呵呵
  •   我承認(rèn),我水平不高,但這書對我啟發(fā)很大。
  •   團(tuán)隊(duì)合作和代碼維護(hù)方面給我很大的啟發(fā),對于沒經(jīng)驗(yàn)的我來說值了
  •   @離譜
    這位兄臺的意見我極為贊同,如果以這樣的心態(tài)去讀書,是作者之幸,也是自己之幸,正如你所說,沒有不能找出毛病的書,也沒有完美的書,書究竟有幾分用,關(guān)鍵看自己的心態(tài)。
  •   這書簡單卻確實(shí)很不錯。那么多長處不學(xué),非找短處的人不讀也罷。讀了可能也學(xué)不到什么。
  •   我買了這本書,看到CSS權(quán)重那里發(fā)現(xiàn)了問題,就是樓主說的:
    P81~82的問題。
    這個問題太嚴(yán)重了?。?!希望看此書的人注意?。?/li>
  •   我沒買過也沒看過。。我就不發(fā)言了。
    不過我就覺得史努比說的對,對待一些問題,不能模糊,尤其對于入門者來說,模糊等于犯罪,如果有人拿你的書來入門,后果有時(shí)候會很嚴(yán)重,尤其是幾年之后。。價(jià)值觀都會被顛覆的= =。
  •   要有鑒別事物好和不好的能力
  •   差評??! 太坑爹了
  •   里面很多內(nèi)容確實(shí)需要加強(qiáng)一下 特別是 那些“不知道為什么。。?!?之類的 然后針對這個不知道 hack一下 另外 書里面介紹的namespace的那個js程序 有錯誤是比較操作 而不是賦值
    這本書可以看的很快 有點(diǎn)像checklist 可以看看
  •   噗。。snoopy+Michael, 有意思。路過,留個爪印。
  •   樓主人品有問題,站在書店把書白看了,然后吹毛求疵撿出一些所謂的問題,真是神經(jīng)??!
  •   書看了,第一反應(yīng)是不錯,為自己提供了一些思路和借鑒。不過那個CSS權(quán)重有點(diǎn)誤導(dǎo)我了...
  •   我頂下snoopy,寫書確實(shí)要嚴(yán)謹(jǐn)些,畢竟是技術(shù)類的書,作者完全可以在新印刷版里面更正,錯誤就是錯誤
  •   比如P165 document.all 的問題 作者該虛心接受吧 webkit內(nèi)核都有這個對象的
  •   .CSS又不是什么可程序化的東西, 何必非要跟這個詞去套近乎.
    同意!
 

250萬本中文圖書簡介、評論、評分,PDF格式免費(fèi)下載。 第一圖書網(wǎng) 手機(jī)版

京ICP備13047387號-7