做前端開發(fā)

做前端開發(fā)快有3年時間，今天跟大家談?wù)剛�人對WEB前端開發(fā)的一些經(jīng)驗（當然都是個人的一些理解，有什么地方說的欠妥或不對的地方還請包含和指正），這里我就從WEB標準開始吧。WEB標準是什么？

呵呵，說是WEB標準，不過我這里主要是對XHTML1.1和CSS2.1的一些經(jīng)驗總結(jié)。因為WEB含蓋的內(nèi)容實在是太多了，“WEB標準”是一系列標準的總稱，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以這里要跟大家指出來一下，WEB標準不是我們所說的DIV+CSS。剛剛上面提到了DIV+CSS，呵呵，這里要說明下，這樣說其實是不正確的。DIV+CSS準確的說法（個人的理解）應(yīng)該是：采用W3C推薦的WEB標準中的XHTML1.1結(jié)合CSS2.0樣式表制作頁面的方法，DIV應(yīng)該指的是XHTML標簽，而CSS顯示是指的CSS樣式表了。采用WEB標準開發(fā)的好處

那么W3C為什么會推薦這樣的頁面制作方法呢？下面我們就簡單的看看采用WEB標準開發(fā)（個人理解的）相對以前TABLE布局的優(yōu)勢有哪些？1、節(jié)約運營成本，省錢��！

呵呵，能幫你省錢的東西，你會不會有興趣？當然是十分的有興趣了�？纯次覀兊腤EB標準制作方法是如何做到的？

采用WEB標準制作，我們可以做到表現(xiàn)很形式的分離，我們用XHTML來表現(xiàn)（數(shù)據(jù)），用CSS來控制（頁面元素呈現(xiàn)的）形式。寫的好的頁面，XHTML代碼中基本上都是用戶要看的數(shù)據(jù)，還其他修飾性的東西，全部由我們的CSS來控制。這樣一來我們的（XHTML）頁面的體積就大大減小了，這樣你在帶寬上的費用就會大家降低了，這個怎么降低的，你可以想象一下，YAHOO的首頁小1K，100W個人一起訪問，那么帶寬節(jié)約了多少？而且可以更充分的利用帶寬。

而我們的CSS控制了，所有的頁面元素的樣式，現(xiàn)在想改網(wǎng)站的整體風(fēng)格，你只需要花幾分鐘修改一下一個CSS文件，就可以輕松搞定了。維護的成本也下來了，省了不少錢了吧？還有，你開這個頁面的速度會快很多啊，一個讓你等半分鐘的頁面，除非里面的信息對你很有用，不然我們大家基本都沒有太多的時間去用來等待的。

2、對用戶友好更友好，且有機會獲得更多的用戶現(xiàn)在來說說用戶友好。首先我想把我們的用戶來分下類。第一類：普通用戶（每個訪問我們網(wǎng)站的人）；第二類：搜索引擎；

采用WEB標準開發(fā)的頁面，結(jié)構(gòu)清晰，頁面體積小，瀏覽器兼容性好。普通用戶訪問的時候，頁面打開速度快，而且不管用戶使用那種瀏覽器，都能夠正常訪問（顯示）頁面，且頁面的結(jié)構(gòu)清晰，要找的數(shù)據(jù)可以很方便的瀏覽到。而對搜索引擎來說，一個好的采用WEB標準開發(fā)的頁面，都是做過SEO優(yōu)化的，它訪問起來很友好，很容易理解你的頁面中哪里是標題（H1~H6標簽），哪里是段落（p標簽），哪里是段落里要強調(diào)的內(nèi)容（strong標簽）等，它可以很容易的分析出來。而一個SEO好的站點，大家都知道，被搜索引擎收錄的機會更多，這個也意味著您的網(wǎng)站會被更多的普通用戶訪問到，給你的站點帶來更多的用戶。

一個能幫我們省下大筆費用，提高工作效率。同時又能夠提高頁面瀏覽速度，對用戶友好，甚至能夠不花錢宣傳，就能給你帶來更多用戶的技術(shù)。你說你會不會去使用它？呵呵，這個也正式我們的W3C推薦使用WEB標準開放網(wǎng)站的原因啊。而這個技術(shù)也得到了我們廣大用戶的認可，所以您現(xiàn)在需要學(xué)習(xí)WEB標準啊。^-^!

呵呵，溫習(xí)完了基礎(chǔ)課程，現(xiàn)在正式開始講XHTML和CSS的技巧了。合理的布局

有朋友會開始問了，怎么一開始就開始講合理的布局了呢?呵呵,前面我們提到了一些知識點“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”。這些東西，都是我們做了合理布局的結(jié)果。而且我個人覺得，我們采用WEB標準制作的一切都是從這個知識點開始的，所以我這里就先來說這個話題。

那么大家又會開始問，怎樣的一個頁面，才算是合理的布局的呢？恩，這個問題問題問得好，也是我們大家剛開始學(xué)用WEB標準的問得最多的問題之一，我也曾經(jīng)常被這個問題所困擾，這里就說說我對合理布局的一些理解。

在開始講合理布局的頁面要達到的要素前，我們還是用個實例來講解會更直觀些。先來看看這個圖片：

web前端開發(fā)學(xué)習(xí)經(jīng)驗總結(jié)

開博第一篇文章。謹以此文祭奠大學(xué)逝去的時光。

web開發(fā)大概分為前臺和后端，前臺又可以分為美工，交互設(shè)計，js編程。后端了解不多，前端的話，可以按如下思路系統(tǒng)學(xué)習(xí)：基礎(chǔ)知識：

1.html+css。這部分建議在上學(xué)習(xí)，邊學(xué)邊練，每章后還有小測試。之后可以模仿一些網(wǎng)站做些頁面。在實踐中積累了一些經(jīng)驗后，可以系統(tǒng)的讀一兩本書，推薦《headfirsthtml與css中文版》，不過這本書講的太細了，我沒能拿出耐心細讀。2.javascript。要學(xué)的內(nèi)容實在很多，如果沒有其他編程語言的基礎(chǔ)的話，學(xué)起來可能要費些力，還是建議先在w3school上學(xué)習(xí)。之后建議馬上看《javascript語言精粹》，js是一門很混亂的語言，這本書能夠幫助你區(qū)分哪些是語言的精華，哪些是糟粕，對于語言精華，應(yīng)該深入學(xué)習(xí)。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。

進階：

有了以上基礎(chǔ)，就可以進行一般的靜態(tài)網(wǎng)頁設(shè)計，不過對于復(fù)雜的頁面還學(xué)進一步學(xué)習(xí)。CSS。必看《精通css》，看完這本書你應(yīng)該對：盒子模型，流動，block，inline，層疊，樣式優(yōu)先級，等概念非常了解了。作為練習(xí)可以看下《css藝門之匠》這本書，它對標題，背景，圓角，導(dǎo)航條，table，表單等主題都有詳細的介紹。

Javascript。上面提到內(nèi)容還不足以讓你勝任js編程。在有了基礎(chǔ)之后，進一步學(xué)習(xí)內(nèi)容包括：1.

框架。推薦jQuery，簡單易用，我的第一web項目就是在w3school簡單學(xué)習(xí)后，直接上手jQuery完成的，真的很難簡單，很好用。但jQuery適用環(huán)境有限，對于那些對性能要求很高的頁面無法勝任。推薦了解一下YUI或百度的tangram，都很好用，學(xué)習(xí)方法也很簡單，照著產(chǎn)品文檔做幾個頁面就行了，不用面面俱到，以后遇到問題查文檔就行了�？蚣芸梢詭湍闫帘螢g覽器的差異性，讓你能更專注與web開發(fā)學(xué)習(xí)的精髓部分。

javascript語言范式。這個名字可能并不恰當，只是我找不到可以描述“面向?qū)ο蟆�，“函�?shù)式”這個兩個概念的概念。javascript不完全是一個面向?qū)ο蟮恼Z言，它的很多設(shè)計理念都有函數(shù)編程語言的影子，甚至說如果你不用面向?qū)ο�，完全可以把它理解成一門函數(shù)式編程語言。javascript的很多語言特性，都是因為他具有函數(shù)是語言的特點才存在的。這部分推薦先學(xué)習(xí)面向?qū)ο蟮幕�本理論，對封裝，繼承，多態(tài)等概念要理解，維基百科，百度百科會是你的幫手，另外推薦《objectorientedjavascript》，應(yīng)該有中文版。對與函數(shù)式編程我了解的也不系統(tǒng)，不好多說。

javascript語言內(nèi)部機制。必須弄清如下概念：js中變量的作用域，變量傳遞方式，函數(shù)的定義環(huán)境與執(zhí)行環(huán)境，閉包，函數(shù)的四種調(diào)用方式（一般函數(shù)，對象的方法，apply，call），以及四種調(diào)用方式下，this指向的是誰。這部分內(nèi)容你會在《javascript語言精粹》中詳細了解。另外，你必須理解json。

dom編程，這個web前端工程師的核心技能之一。必讀《JavascriptDom編程藝術(shù)》，另外《高性能javascript》這本書中關(guān)于dom編程的部分講的也很好。

ajax編程，這是另一核心技術(shù)。ajax建議在網(wǎng)上查些資料，了解這個概念的來龍去脈，百度百科，維基百科上的內(nèi)容就足夠了。真正編程是很容易的，如今幾乎所有框架都對ajax有良好的封裝，編程并不復(fù)雜。

了解瀏覽器差異性。這部分包括css和js兩部分，瀏覽器差異內(nèi)容很多，建議在實踐中多多積累。另外對于瀏覽器的渲染模式，DOCTYPE等內(nèi)容應(yīng)該系統(tǒng)學(xué)習(xí)。

2.3.

4.5.

6.

再進一階：有了以上知識，對于大多數(shù)小型網(wǎng)站，你應(yīng)該已經(jīng)可以寫出能夠工作的代碼了。但寫出可以運行的代碼，只是編程的最初級階段。更高要求大概還有三方面：1易維護，2可測試，3高性能，如果頁面流量有要求，那第四個就是低流量。1.

易維護。對于頁面你該理解樣式，數(shù)據(jù)，行為三者分離，對應(yīng)的當然就是css,html,js。對于js代碼，你最好了解設(shè)計模式，重構(gòu)，MVC等內(nèi)容。

2.可測性。js代碼可測性的主題，我正在研究，歡迎感興趣的同學(xué)聯(lián)系我，共同學(xué)習(xí)。3.高性能。必讀《高性能javascript》。

4.低流量。技巧性太強，非一朝一夕之功，不多說補充：

對于前段開發(fā)，核心部分基本就這些了，可以根據(jù)自己的興趣愛好選擇性學(xué)習(xí)以下內(nèi)容。1.2.3.

美工。大公司都有專業(yè)的美工人員，不過如果愛好也可以了解。推薦《寫給大家看的設(shè)計書》。

交互設(shè)計。大公司依然有專業(yè)人士搞這些，不過如果愛好也可了解。推薦《簡約至上》。

后端。前段工程師必須至少了解一門后端語言，不過如果愛好也可深入學(xué)習(xí)，入手難度比較低的應(yīng)該是php了。這部分又可分為基于頁面，基于框架兩種。大型項目都是基于框架開發(fā)的，建議至少了解一個MVC框架，php的zend，asp.net的asp.netmvc等等太多了，好還框架的設(shè)計思想都大同小異。

flash。我并沒有把flash作為前端工程的核心技能之一，因為我不會，不過

ActionScript應(yīng)該和js沒有太大區(qū)別，可以根據(jù)工作需要學(xué)習(xí)。不過我的原則是能不用就不用，其實很多效果通過js，css都可以實現(xiàn)，完全不需要flash。而且隨著html5的發(fā)展flash早晚會淘汰。

html5和css3。html5的標準到現(xiàn)在還沒有正式發(fā)布，不過目前幾乎所有新的瀏覽器都已經(jīng)開始支持，手機上就更是如此，建議學(xué)習(xí)，很好，很強大。

4.5.

前端開發(fā)需要學(xué)習(xí)的內(nèi)容很多很雜。美工，交互設(shè)計，flash，js，html+css，后端，隨便哪種技能，如果學(xué)的特別牛，都可以保證你擁有一個職業(yè)。想通吃，沒個幾年怕是不成。關(guān)鍵是選準自己的愛好，深入學(xué)習(xí)一項，面要鋪開，但深度更重要。

愛前端正在使用多說

1.

擴展閱讀：做一個有信仰的前端開發(fā)人員

做一個有信仰的前端開發(fā)人員--4/19演講稿

此文有博看文思()學(xué)員提供

做一個有信仰的前端開發(fā)人員

1．提問，闡述瀏覽器用戶開發(fā)人員的關(guān)系（提問闡述中舉例VCD具體闡述關(guān)系）

瀏覽器為什么有現(xiàn)在這么大？處理速度是現(xiàn)在這樣的？瀏覽器開發(fā)人員用戶瀏覽器需要用戶，所以瀏覽器其實是根據(jù)用戶的需要去做，即使是去做的遵循標準，最初目的也是為了用戶。為什么瀏覽器有糾錯性，為什么曾經(jīng)的一個標準要錯誤的標簽必須報錯，不能正常顯示頁面。瀏覽器是為了用戶好，用戶好自己才能活下去；標準也是為了用戶好，讓用戶知道自己技術(shù)是對用戶有利的。但是為什么瀏覽器和標準卻有如此大的不同。因為這中間插了一層人，就是我們開發(fā)人員。因為我們開發(fā)人員的不同行為方式，從而導(dǎo)致了瀏覽器和標準一些截然不同的行為。

舉個簡單的例子。用戶通過電視連VCD看光盤內(nèi)容。但是光盤往往有錯的時候，許多放這些碟子的VCD機器讀到錯誤就卡死到那里了。剛開始的時候，用戶會抱怨碟子不好，慢慢的用戶就會放棄VCD機器，因為碟子普遍不好，還要VCD做什么。然后VCD廠家不能坐視不管吧。所以他們就研究出了糾錯技術(shù)，讀到錯誤的部分，跳過去，不影響大部分的瀏覽。用戶感到爽了，自然就不會放棄VCD機器，至少暫時不會有此想法。但是發(fā)明VCD碟子的人們呢，他們希望VCD碟子不會被損害，而不是簡簡單單跳過去。所以他們可能會考慮改進碟子被損害的幾率，因為如果他們不改進技術(shù)，那么VCD廠家將放棄這個技術(shù)市場，從而投向另外的技術(shù)市場，從此VCD的技術(shù)就會消失。然后可能出現(xiàn)的情況就是VCD技術(shù)升級了，可能成為WCD、XCD等等。但是這時候新的問題就要出現(xiàn)了。你這個技術(shù)升級了，我的機器也得跟著升級，但是升級代價多大，用戶會不會接受你這個新技術(shù)，等等問題。當你這個升級的技術(shù)的升級代價很大，或者用戶覺得無法適應(yīng)的時候，廠家就會放棄這項技術(shù)。是的，這個技術(shù)又要面臨完蛋的危險。因此升級的時候，如果升級帶來的代價太大，就不得不考慮放慢步伐，讓用戶和廠家接受以后一部分之后再進行下一步。如此看來技術(shù)想要存活下去真的是夾縫中求生存啊。

瀏覽器就像VCD機，我們寫的代碼就是光盤�，F(xiàn)在我們就不難理解我們的web標準它多么想一步到位但是卻不能夠，看看XHTML2.0的下場。是的，完全語義化很好，img和a的移除很棒，省多少代碼哪。但是假如我們是廠商，我們不得不面臨的一個問題是什么？問大家。換位思考。我們不得不面臨的一個問題就是：現(xiàn)有解析引擎的全面崩盤，要做一個全新的解析引擎。所有瀏覽器廠家基本回到了原點……那么我們會接受這個標準么？問大家。如果有的人說會，那么問他，你是做標準的還是做市場的，如果都照你這么做公司就要破產(chǎn)了。一個公司首要的是要存活，然后才考慮信仰（良知不在此范圍）。那好，用戶看到的頁面也是沒什么變化的（表面上），現(xiàn)在一個正常的瀏覽器廠商老板都不會接受這個標準。除了GOOGLE可能會歡迎，因為它們首先是做搜索引擎其次是做瀏覽器的，標準有利于搜索引擎。然后新的問題就出來了，廠商不接受這個標準，怎么

辦。沒有人市場的標準就是一紙空文，沒有意義。所以。XHTML2.0完蛋了。盡管它讓代碼更簡潔，讓搜索引擎更喜歡。

2．解決文初提到的問題。引申出開發(fā)人員的不堅定是整個問題的產(chǎn)生因素。告知大家保持信仰。

我想說的并不是瀏覽器用戶開發(fā)人員三者的關(guān)系，我想說這三者的關(guān)系，只是想告訴大家，瀏覽器是根據(jù)市場來決定web標準的存活的，而用戶就是市場的根本。大家想想，老師說過我們這行業(yè)里有多少混子，大家大部分也都加前端群里和那些工作前線的人交流過了，他們是什么水平想必大家心里都很清楚。他們寫出來的代碼能是什么樣子的，前陣子鄭晗給我看過一個table布局下的問題，全部table加img，背景色都截圖到img里。大家想想是不是，這些代碼如果按照標準來會怎么樣。如果我們是廠商，再次換位思考，這樣的代碼泛濫帶來是什么結(jié)果。問大家。帶來的結(jié)果就是用戶無論用什么瀏覽器看到的都是不對的頁面。那么我們有沒有辦法整治那些混蛋開發(fā)人員呢？沒有辦法，他們也不是你的員工，別的辦法也不能立即奏效，我們只能保住眼前利益，對吧。此處可以提問大家，遇到這種問題怎么辦。那么我們就只能夠增強瀏覽器的糾錯性。那么好吧，瀏覽器就變大了，處理速度變慢了。假如我一開始就告訴你們，一切都是因為我們這些代碼開發(fā)人員，可能你們接受不了。但是我這樣帶著大家換位思考下來，相信你們都能理解了。為什么瀏覽器廠商會這么做。因為它也是為了活下去。很簡單的一個例子，搜狗里有糾錯功能，輸入錯誤的拼音能得到正確的詞組。這也是搜狗成功的一個重要因素。

那么這樣帶來的結(jié)果是什么，就是瀏覽器不斷變大，用戶體驗越來越不好，什么鳥瀏覽器，或者什么鳥網(wǎng)站，太TM慢了。更有小白會說，擦，升級了瀏覽器網(wǎng)速就變得這么慢。這是一個惡性循環(huán)。怎么解決？作為瀏覽器廠商，我們想解決這個惡性循環(huán)，我們會希望什么發(fā)生呢？想想，就是一個新的技術(shù)出來，不用過大的更改解析引擎，不用太大的代價。根源上的解決才能解決問題。但是實際上呢，他們不知道做標準的多么為難，他們有個解決的辦法，但是升級代價太大，所以他們不得不忍耐的一步一步的慢慢實現(xiàn)升級。

哦了，講這么多，想告訴大家，我們就是改變這個惡性循環(huán)的重要環(huán)節(jié)，如果我們每個代碼開發(fā)人員都有良知，寫好的代碼，那么這個升級的過程就會快的很多很多。就像如果世界上每個勞動者都有良知，珍惜時間，在路上發(fā)生車禍的時候不停下來看熱鬧，在旁邊發(fā)生口角的時候不停下來看熱鬧，那么整個世界的勞動力的浪費率將會提高多少？勞動成果將會提高多少呢？在經(jīng)濟學(xué)家眼里，這些小事，就是阻礙世界經(jīng)濟發(fā)展的重要因素，這些勞動力的浪費將給世界帶來巨大的損失，同樣這些勞動力自己也沒有得到最大的回報。

所以我想說，為了所有人，做一個有信仰的前端開發(fā)人員。

201*年4月18日星期日

23:58

很久沒演講了。好激動。但是最近真的很忙很忙。今天晚上十一點趕工了一個小時才寫完，準備的不是很充分。每次演講都希望對大家有幫助，其次才是鍛煉自己的思維，總結(jié)知識。本來還準備有個話題準備講最近的實習(xí)經(jīng)驗，但是剛寫了個部門實施方案，所以暫時不想談那個話題了。下次有機會吧。希望大家都一起快速成長。

友情提示：本文中關(guān)于《做前端開發(fā)》給出的范例僅供您參考拓展思維使用，做前端開發(fā)：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《做前端開發(fā)》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://m.hmlawpc.com/gongwen/626210.html

• 上一篇：web前端工程師的求職信
• 下一篇：javascript web前端工程師 個人簡歷模板