WEB前端技術(shù)之路（一）知識(shí)架構(gòu)2010-01-0703:10P.M.前言：“滾滾長(zhǎng)江東逝水，浪花淘盡英雄；是非成敗轉(zhuǎn)頭空，古今多少事，都付笑談中?！蔽业那岸思夹g(shù)之路，恍惚間，已走了近七年，一路走來(lái)，在很多朋友、同事的鼓勵(lì)下，想徹底、系統(tǒng)的將自己的感悟分享出來(lái)。還是那句老話，路是自己走出來(lái)的，不是別人指出來(lái)的，我在這里無(wú)論說(shuō)些什么，都是個(gè)參考，具體情況還需具體分析，要自己拿捏得當(dāng)。首先，我覺(jué)得但凡成功的人，大抵都是飽含激情的人，在做技術(shù)和科研領(lǐng)域過(guò)猶不及。從我的經(jīng)歷和身邊的人看開(kāi)去，我覺(jué)得有兩種情況，要么你熱愛(ài)前端技術(shù)，要么你不是非常熱愛(ài)前端技術(shù)，但需要前端技術(shù)來(lái)糊口。這兩種情況有著本質(zhì)的不同，對(duì)于熱愛(ài)前端技術(shù)，你更加需要的是了解前端技術(shù)的知識(shí)架構(gòu)，按照知識(shí)架構(gòu)結(jié)合自身情況和工作情況，制定學(xué)習(xí)計(jì)劃并充分貫徹和執(zhí)行。對(duì)于并不非常熱愛(ài)前端技術(shù)，又需要前端技術(shù)來(lái)糊口，我只有一個(gè)建議：愛(ài)上前端技術(shù)，先！其次，對(duì)于技術(shù)學(xué)習(xí)的宏觀角度來(lái)看，可以分成單一技術(shù)和復(fù)合技術(shù)兩種，如果國(guó)內(nèi)的IT技術(shù)就業(yè)市場(chǎng)和國(guó)外一樣成熟，單一技術(shù)會(huì)在職業(yè)發(fā)展道路上處于前置，復(fù)合技術(shù)會(huì)成為向更高層次發(fā)展的必由之路。由于國(guó)內(nèi)的實(shí)際情況，更多時(shí)候是需要有復(fù)合技術(shù)才能糊口，在企業(yè)里發(fā)展的好點(diǎn)兒了，就轉(zhuǎn)向某個(gè)領(lǐng)域，做單一技術(shù)來(lái)想更高層次發(fā)展。其實(shí)，我們可以簡(jiǎn)單實(shí)用國(guó)外的JobSearcher對(duì)比國(guó)內(nèi)的ChinaHR，就能發(fā)現(xiàn)，國(guó)內(nèi)招聘專職開(kāi)發(fā)Flash、ActionScript、Silverlight、JavaScript……的單一技術(shù)崗位很少，而國(guó)外卻很多，甚至幾乎不會(huì)直接招聘“WEB前端開(kāi)發(fā)”，復(fù)合技術(shù)在國(guó)外多被招聘為“架構(gòu)師”。最后，知識(shí)架構(gòu)很重要。學(xué)習(xí)并掌握一類知識(shí)技能，無(wú)論是單一技術(shù)還是復(fù)合技術(shù)，她們都有自己的知識(shí)架構(gòu)。我個(gè)人理解，如果把技術(shù)學(xué)習(xí)當(dāng)作是一次旅程，知識(shí)架構(gòu)就是這次旅程的路線圖。我們?cè)诼眯兄?，通常?huì)給自己規(guī)劃一條旅行路線：When？Where？Whow？Dowhat？Seewhat？Whatisyourobjective？WEB前端技術(shù)知識(shí)架構(gòu)：“Smilin`inTheEnd,FindYourOwnWayHome”---REOSpeedwagon

這只是W3C一場(chǎng)演講（0910how-fast）PPT里闡述的WEB技術(shù)Architecture，這里頭紛繁復(fù)雜的技術(shù)并非WEB前端技術(shù)的全貌，充其量算是前端技術(shù)的基礎(chǔ)。但是，就算是基礎(chǔ)，也已經(jīng)足以詮釋W(xué)EB前端技術(shù)的復(fù)雜性了，如果我們一頭扎進(jìn)這紛繁復(fù)雜的技術(shù)海洋中去，離上岸將是遙遙無(wú)期。我個(gè)人的建議是：關(guān)鍵知識(shí)深度掌握！首先，要了解基于TCP的HTTP協(xié)議，HTTP協(xié)議才是承載WEB前端技術(shù)的根基，只有了解了HTTP協(xié)議的實(shí)現(xiàn)細(xì)節(jié)，才能在未來(lái)開(kāi)展WEB前端技術(shù)學(xué)習(xí)、工作的時(shí)候更加得心應(yīng)手。針對(duì)HTTP協(xié)議，可以先看《TCP-IP詳解卷三：TCP事務(wù)協(xié)議，HTTP，NNTP和UNIX域協(xié)議》第13章HTTP：超文本傳送協(xié)議129～141頁(yè)。其次，可以看/Protocols/rfc2616/rfc2616.html里的《HypertextTransferProtocol--HTTP/1.1》針對(duì)現(xiàn)役的HTTP1.1進(jìn)行深入細(xì)致的學(xué)習(xí)。其次，要掌握HTML的語(yǔ)法和Tag的細(xì)節(jié)，這些是我們未來(lái)構(gòu)建WEB前端應(yīng)用的載體。在這部分學(xué)習(xí)中，網(wǎng)上相關(guān)文章和技術(shù)資料很多，我也就不特別推薦什么了，但是，有一點(diǎn)需要注意，不要直接陷入對(duì)技巧的學(xué)習(xí)，就是不要直接從網(wǎng)上摘抄、復(fù)用一些別人的代碼，更多自己動(dòng)手才是提升的捷徑。其次是理解，對(duì)于HTML很多人都覺(jué)得自己是大牛，但是，你問(wèn)他HTML一共有多少標(biāo)記是W3C規(guī)范的、多少是FF的、多少是IE的？估計(jì)多半兒答不上來(lái)，這里我們要掌握的知識(shí)點(diǎn)就是，回答這些問(wèn)題。這里就像是小時(shí)候搭積木，你掌握的越多，手里的積木越多，能夠搭出的東西就越多，所以，耐心的花點(diǎn)兒時(shí)間去學(xué)習(xí)是有必要的。接著，需要掌握CSS。從HTML4.0開(kāi)始，內(nèi)容和表現(xiàn)的分離讓我們極大提高了工作效率，這些提升都得益于層疊樣式表（CascadingStyleSheets）。CSS在我看來(lái)就是格式描述語(yǔ)言，用來(lái)描述HTML元素的格式，通知瀏覽器各種HTML元素應(yīng)該如何被渲染。需要掌握的知識(shí)點(diǎn)主要有：CSS語(yǔ)法、類和樣式定義之間的關(guān)系、IE縱向兼容、IE和WebKit內(nèi)核橫向兼容、CSS文件規(guī)劃、CSS文件分割、CSS文件加載。然后，要掌握DHTML、JavaScript、DOM。隨著WEB前端技術(shù)的發(fā)展革新，UI交互越來(lái)越豐富、動(dòng)態(tài)、平滑、易用，這些都得益于DHTML、JavaScript和DOM等技術(shù)。不割裂這三塊兒的原因是，我認(rèn)為這三塊兒知識(shí)要放在一起進(jìn)行學(xué)習(xí)才有效果，只有了解DHTML（DynamicHTML）的概念、范疇、方法，才能夠正確使用JavaScript和DOM來(lái)實(shí)現(xiàn)動(dòng)態(tài)的頁(yè)面和交互操作。說(shuō)得直白些，DHTML就是用JavaScript來(lái)操作HTML頁(yè)面包含的所有元素、樣式、行為、事件，以及通過(guò)和瀏覽器及操作系統(tǒng)交互獲得擴(kuò)展性的一種綜合性技術(shù)統(tǒng)稱。這里的知識(shí)結(jié)構(gòu)無(wú)法細(xì)說(shuō)，只要有技術(shù)能夠讓頁(yè)面從一種狀態(tài)改變到另一種狀態(tài)，這種技術(shù)就應(yīng)該存在于DHTML體系里，就是在我們的知識(shí)結(jié)構(gòu)里。但是，知識(shí)結(jié)構(gòu)的層次按照先后順序應(yīng)該是：DOM文檔對(duì)象模型、JavaScript、其他相關(guān)技術(shù)。先學(xué)習(xí)DOM接口的好處，是詳細(xì)學(xué)習(xí)和了解HTML文檔對(duì)象模型都提供了哪些接口？哪些內(nèi)容是可以操作的？如何針對(duì)文檔對(duì)象模型里的元素進(jìn)行操作？緊接著學(xué)習(xí)JavaScriopt是為了能夠去實(shí)踐、去使用文檔對(duì)象模型、去操作文檔對(duì)象模型，這實(shí)際上可以理解成從理論到實(shí)踐的一個(gè)過(guò)程。最后，F(xiàn)lash、ActiveX、FF&Chrome插件、Silverlight……等其他能夠讓W(xué)EB頁(yè)面從一種狀態(tài)改變到另一種狀態(tài)的技術(shù)。這里只介紹較為常用的Flash、ActiveX、Silverlight所包含的知識(shí)結(jié)構(gòu)，其他方面會(huì)在后續(xù)具體學(xué)習(xí)方法之中介紹。Flash方面，需要掌握：FlashCS、Flash2D平面和色彩設(shè)計(jì)、Flash控件皮膚修改和設(shè)計(jì)、Flash自定義控件設(shè)計(jì)、Flash項(xiàng)目管理、Flash編程、ActionScript編程、Flex控件使用、Flex界面設(shè)計(jì)、Flex編程、第三方素材導(dǎo)入、主流第三方工具使用、反編譯和素材提取、SWF文件切割和規(guī)劃、Flash網(wǎng)絡(luò)編程、調(diào)試技巧、單元測(cè)試技巧、發(fā)布技巧。ActiveX控件方面：ActiveX控件使用方法、ActiveX控件設(shè)計(jì)制作、ActiveX控件升級(jí)、ActiveX控件安全、調(diào)試技巧、單元測(cè)試技巧、發(fā)布技巧。Silverlight方面：.NET編程、Blend和VS.NET使用方法、XAML、網(wǎng)絡(luò)編程、CodePlex、調(diào)試技巧、單元測(cè)試技巧、發(fā)布技巧。WEB前端技術(shù)之路（二）職業(yè)規(guī)劃2010-01-2708:10P.M.關(guān)于一個(gè)WEB前端的職業(yè)規(guī)劃，其實(shí)是有各種的答案，沒(méi)有哪種答案是完全正確的，全憑自己的選擇，只要是自己選定了，堅(jiān)持去認(rèn)真走，就好。在這里，我只是簡(jiǎn)要說(shuō)一下自己對(duì)于這塊兒內(nèi)容的理解。有一個(gè)觀點(diǎn)想要分享給大家的是：任何規(guī)劃和目標(biāo)的實(shí)現(xiàn)都依賴于知識(shí)的積累，而知識(shí)的積累來(lái)源于學(xué)習(xí)及學(xué)習(xí)后大量的實(shí)踐。我提供一個(gè)實(shí)踐途徑，我們可以在工作之余的時(shí)間在網(wǎng)上或外包公司那里接一些私單做，因?yàn)槟繕?biāo)不是賺錢，我們可以用最低的價(jià)格來(lái)提升自身競(jìng)爭(zhēng)力，獲得大量訂單就意味著獲得大量的實(shí)踐機(jī)會(huì)，同時(shí)，還有一些收入作為工作成就感之外的安慰獎(jiǎng)，還是不錯(cuò)的。一、職業(yè)方向定位首先，只有確定好自己的職業(yè)方向，才能做好職業(yè)規(guī)劃。在我看來(lái)，做WEB前端技術(shù)能夠找到的職業(yè)方向有以下幾種：（1）資深WEB前端工程師這個(gè)方向算是一個(gè)WEB前端最基本的選擇了，在國(guó)外，很多老外都能夠把自己的專業(yè)做到極致，能一輩子就在一個(gè)專業(yè)領(lǐng)域不斷學(xué)習(xí)和積累。主要在于內(nèi)因和外因兩方面，內(nèi)因是老外通常思想比較簡(jiǎn)單直接，容易一直專注于一個(gè)領(lǐng)域；外因是國(guó)外的環(huán)境很好，能夠良好的支撐這樣的職業(yè)發(fā)展道路。反觀國(guó)內(nèi)，從內(nèi)因來(lái)講，WEB前端技術(shù)人員還是蠻浮躁的，通常會(huì)因?yàn)閃EB前端知識(shí)的更新速度太快而覺(jué)得學(xué)習(xí)起來(lái)辛苦，最終轉(zhuǎn)向后臺(tái)或其他道路。從外因來(lái)講，WEB前端人員沒(méi)有獲得公平的待遇，可能從HTML頁(yè)面制作就開(kāi)始并沿襲下來(lái)的，從來(lái)WEB前端人員都比后端人員低一等，貌似前端就是“淺顯”的代名詞、后端就是“深?yuàn)W”的代名詞，這也直接造就了前端人員的收入無(wú)法和后端人員媲美，同時(shí)直接影響到前端人才市場(chǎng)的活躍程度。另一方面，前端的技術(shù)入門較容易，造成另一個(gè)極端情況：人員泛濫、人才稀缺。我想對(duì)所有的WEB前端工程師說(shuō)：面包總會(huì)有的，要耐得住寂寞！我個(gè)人比較推薦這個(gè)職業(yè)發(fā)展方向，因?yàn)?，在這個(gè)方向下，只要足夠耐心、厚積薄發(fā)，成功的概率是非常高的。同時(shí)，這是一條最單純的路，我們更多的是花費(fèi)精力在技術(shù)的鉆研上，而不是辦公室政治等其它瑣事。（2）資深WEB架構(gòu)師說(shuō)功利點(diǎn)兒，我喜歡這個(gè)方向，既兼顧了工作的單純性、又能夠減少實(shí)際Coding的工作量能騰出更多時(shí)間鉆研技術(shù)。在國(guó)內(nèi)，WEB前端工程師遇到較多的情況是總是反復(fù)編寫著同樣的代碼，總是面對(duì)著同樣的技術(shù)和產(chǎn)品，容易感覺(jué)枯燥。由于我們擁有最為廣泛的WEB相關(guān)知識(shí)沉淀，使得我們更加容易成為一名架構(gòu)師。這個(gè)職業(yè)發(fā)展方向不如第一種來(lái)得平滑，主要是作為一名架構(gòu)師不得不學(xué)習(xí)：后端技術(shù)、DBA、Platform等內(nèi)容，而這種學(xué)習(xí)通常需要實(shí)際操刀做項(xiàng)目，不是自己在家里寫兩個(gè)Demo就好的，這就勢(shì)必會(huì)遭遇一段時(shí)間的陣痛期。雖然不是很平滑，但是，對(duì)于一個(gè)大局觀好、悟性好、知識(shí)面廣的前端工程師，我推薦你們努把力，走一條光榮的架構(gòu)師之路吧。（3）自己創(chuàng)業(yè)其實(shí)，自己創(chuàng)業(yè)是最好的道路、也是成功率最低的道路，挑戰(zhàn)和機(jī)遇并存。這里，作為一個(gè)前端技術(shù)人員，需要將自己的視野更多放在行業(yè)的動(dòng)態(tài)、產(chǎn)業(yè)鏈的動(dòng)態(tài)、相關(guān)產(chǎn)品領(lǐng)域的動(dòng)態(tài)，把關(guān)注細(xì)節(jié)的優(yōu)勢(shì)繼續(xù)保持，同時(shí)，增強(qiáng)自己把控一個(gè)產(chǎn)品乃至一個(gè)公司命運(yùn)的能力。但是，這條道路和技術(shù)之路稍有分歧，后續(xù)將不再贅述。（4）轉(zhuǎn)崗管理或其他由于這條職業(yè)道路和WEB前端技術(shù)之路關(guān)系不大，故而，這里不做過(guò)多討論，但是，無(wú)論是否走上這條道路，我覺(jué)得對(duì)于任何技術(shù)之路，更好的大局觀、更廣泛的視野是良好發(fā)展的必備條件，擁有良好的大局觀和更廣泛的視野別無(wú)他法，只能不斷的進(jìn)行知識(shí)的橫向拓展和積累，同時(shí)，多在橫向拓展知識(shí)的時(shí)候進(jìn)行實(shí)踐，把知識(shí)變成技能。二、職業(yè)發(fā)展目標(biāo)我都有一個(gè)最終的目標(biāo)，在這個(gè)目標(biāo)之上，我們需要給自己制定一系列學(xué)習(xí)和成長(zhǎng)計(jì)劃，制定的方法如下：第一、梳理知識(shí)架構(gòu)；梳理知識(shí)架構(gòu)的目的在于，我們要了解清楚，哪些技術(shù)是前置、哪些技術(shù)是后繼，那些技術(shù)是深度、哪些技術(shù)是廣度，按照這兩個(gè)維度梳理好知識(shí)架構(gòu)之后，我們才能準(zhǔn)確地制定清晰的成長(zhǎng)目標(biāo)、高效的成長(zhǎng)計(jì)劃。第二、分解目標(biāo)；我認(rèn)為，大抵可分解為三個(gè)階段，包括：起步階段、提升階段、成型階段。這三個(gè)階段分別對(duì)應(yīng)著不同的目標(biāo)：起步階段：1、基本知識(shí)的掌握在我們梳理的知識(shí)架構(gòu)中，按照我們分析的兩個(gè)維度里最前置的、最淺顯的部分，作為打基礎(chǔ)的階段，必須要在這個(gè)過(guò)程中更多投入到實(shí)踐中去，我們通常做的多了、熟練了，就認(rèn)為這部分知識(shí)和內(nèi)容掌握了。2、常用工具的掌握對(duì)于常用工具的掌握應(yīng)該掌握一些有大公司或?qū)I(yè)團(tuán)隊(duì)背景的流行工具，這些工具的熟練掌握能夠提升專業(yè)度、職業(yè)度，同時(shí)，能提升我們的工作效率。我們只有在檢驗(yàn)自己對(duì)于知識(shí)和技能熟練程度的時(shí)候，才會(huì)自虐式的用Notepad去編寫頁(yè)面、css和腳本等內(nèi)容。3、溝通技巧的掌握通常做技術(shù)的人會(huì)被定位為“不善溝通”的人，這是為什么呢？究其原因，主要是因?yàn)槎喔绦蚝痛a打交道，跟人的溝通較少導(dǎo)致。這種時(shí)候我們要特別注意增加和人溝通的機(jī)會(huì)，著重提升這塊兒的能力。另一方面，我們通常被稱為“不懂溝通技巧”的人。作為一個(gè)技術(shù)人員，包括我自己，似乎天生就有一些難以接受挑戰(zhàn)的缺陷。在國(guó)內(nèi)，我們的技術(shù)人員通常都是自己制定方案、自己執(zhí)行方案，在執(zhí)行過(guò)程中又缺乏相關(guān)產(chǎn)品、交互設(shè)計(jì)等人員的溝通，大多是在自己的思路貫徹下進(jìn)行開(kāi)發(fā)，久而久之，我們習(xí)慣于信任自己的觀點(diǎn)、在自己的視角看問(wèn)題，對(duì)于挑戰(zhàn)總是百般地“據(jù)理”力爭(zhēng)。我們需要更多提升的是，如何在對(duì)方的視角看問(wèn)題、如何在用戶的視角看問(wèn)題。4、良好的開(kāi)發(fā)習(xí)慣開(kāi)發(fā)習(xí)慣是養(yǎng)成的，一旦有不好的習(xí)慣，對(duì)于將來(lái)去修正帶來(lái)的將是很大的麻煩，我們?cè)谂囵B(yǎng)良好開(kāi)發(fā)習(xí)慣一定要從起步時(shí)做起，例如：寫代碼之前先分析、先寫文檔、先寫注釋。定義變量最好能用直接可理解的語(yǔ)義，最好是拼音，別整英文，尤其是生僻單詞，將來(lái)自己忘了還要開(kāi)金山詞霸。文件最好有有意義的文件夾命名來(lái)管理，文件名最好有意義，需要版本號(hào)的最好能和項(xiàng)目版本號(hào)一同更新……等等。提升階段：1、高級(jí)技術(shù)的掌握在提升階段對(duì)于知識(shí)和技能掌握，我們需要從梳理好的知識(shí)架構(gòu)中選擇更深一層次的技術(shù)進(jìn)行學(xué)習(xí)，選擇之前，我們先通過(guò)類比或預(yù)估的方法，衡量自身學(xué)習(xí)的難點(diǎn)，以學(xué)習(xí)難點(diǎn)和自己最不感興趣的部分為主。這樣推薦大家的原因是：這個(gè)階段我們興趣正濃，已經(jīng)度過(guò)了苦澀的起步階段，到達(dá)了興奮的提升階段，我們要用興趣和興奮去挑戰(zhàn)最困難的部分，在我們信心受挫和興趣濃厚之中找到平衡。同時(shí)，輔以其他的深層次知識(shí)一起學(xué)習(xí)和研究。2、產(chǎn)品思想的學(xué)習(xí)沒(méi)有正確的產(chǎn)品思想，很難設(shè)計(jì)出良好的程序，無(wú)論從界面、交互，還是接口、邏輯，不能夠理解產(chǎn)品、理解用戶需求，我們會(huì)給自己造成很大的麻煩，例如：我們千辛萬(wàn)苦用最新技術(shù)、最復(fù)雜的實(shí)現(xiàn)做出的功能，卻得不到使用者或領(lǐng)導(dǎo)、同事的認(rèn)可。為了使我們的工作和學(xué)習(xí)更加有效率、避免無(wú)用功，我們需要不斷的學(xué)習(xí)產(chǎn)品的思想，只有理解了產(chǎn)品的思路，我們才知道用我們的技術(shù)去輸出什么。3、各種框架的學(xué)習(xí)框架是我們提高工作效率的優(yōu)秀手段，對(duì)于框架的學(xué)習(xí)是成長(zhǎng)必經(jīng)之路。我們學(xué)習(xí)框架的路線通常應(yīng)該是：使用——》分析——》個(gè)性化定制——》模仿編寫自己的框架。只有大量的使用，才能明白設(shè)計(jì)框架者在設(shè)計(jì)背后的思路，只有了解到設(shè)計(jì)的思路，才能做正確全面的分析，只有正確全面的分析才能支撐我們?nèi)?duì)其裁剪或擴(kuò)展，只有經(jīng)過(guò)實(shí)際分析、修改別人的框架，才有可能寫出優(yōu)秀的、自己的框架。學(xué)習(xí)通常的路線是：學(xué)習(xí)、理解、模仿、創(chuàng)造。4、富客戶端應(yīng)用的學(xué)習(xí)隨著帶寬和計(jì)算機(jī)性能的提升，以及WEB2.0的如火如荼，富客戶端應(yīng)用充斥著互聯(lián)網(wǎng)，如果你不懂得富客戶端應(yīng)用，你就不能稱之為一個(gè)合格的前端技術(shù)人員?？梢园凑眨篎lash動(dòng)畫——》Flash編程——》Flex——》——》Air——》Silverlight動(dòng)畫——》Silverlight編程的步驟學(xué)習(xí)，先學(xué)Flash后學(xué)Siverlight的原因，一來(lái)Silverlight還不太成熟，二來(lái)，實(shí)際Silverlight借鑒了很多Flash的思想，最好在學(xué)習(xí)的時(shí)候不要本末倒置。5、各種網(wǎng)絡(luò)協(xié)議的學(xué)習(xí)WEB前端技術(shù)就是云上的技術(shù)，云的協(xié)議有N種，我們應(yīng)該著重學(xué)習(xí)：TCP/IP，UDP，HTTP，POP3，SMTP這幾種協(xié)議