寫給母校UESTCweb開發(fā)方向的同學(xué)，也分享給大家，希望多提好的意見，溝通交流。

博客原文鏈接：http://leuisken.github.io/2015/07/17/web-dev/ 轉(zhuǎn)載請(qǐng)注明出處

一、首先要知道的

如今我們使用的互聯(lián)網(wǎng)，客戶端與服務(wù)器端的交互無時(shí)無刻不在發(fā)生。比如我們?cè)跒g覽器打開網(wǎng)頁，瀏覽器就是客戶端，將網(wǎng)頁數(shù)據(jù)發(fā)過來的也就是服務(wù)器。其實(shí)服務(wù)器，并沒有什么特別的，也就是一臺(tái)晝夜不停運(yùn)轉(zhuǎn)的電腦罷了。每一臺(tái)入網(wǎng)的機(jī)器，都會(huì)被分配一個(gè)ip，我們可以通過ipconfig / ifconfig這樣的命令，知道我們電腦的ip地址。服務(wù)器本身，運(yùn)行著服務(wù)器程序，他們監(jiān)聽著來源于網(wǎng)絡(luò)的請(qǐng)求，并對(duì)請(qǐng)求進(jìn)行響應(yīng)。

比較常見的服務(wù)器程序，比如apache / Nginx / IIS等等，我們可以通過以下這樣的一個(gè)小的實(shí)驗(yàn)，來了解網(wǎng)絡(luò)中的客戶端與服務(wù)器，是如何進(jìn)行交互的。

實(shí)驗(yàn)：一個(gè)小的局域網(wǎng)

第一步：運(yùn)行你電腦上的服務(wù)器程序（以apache為例，建議使用xampp / wamp這樣的軟件包，win下一鍵安裝，能省不少事。當(dāng)然，喜歡折騰的同學(xué)和SA們肯定要一個(gè)一個(gè)裝啦），在apache的www目錄下放入一些網(wǎng)頁文件，然后在瀏覽器的localhost下瀏覽網(wǎng)頁。

第二步：在電腦上打開wifi共享軟件，通過ipconfig / ifconfig命令查看本機(jī)在內(nèi)網(wǎng)的ip，讓手機(jī)連接電腦共享的wifi（或者是兩者同連一個(gè)路由器的wifi），在手機(jī)瀏覽器的地址欄輸入電腦的ip，進(jìn)入電腦的服務(wù)器并瀏覽網(wǎng)頁。

上面的小實(shí)驗(yàn)的第二步，就模擬了一個(gè)簡(jiǎn)單的瀏覽器+服務(wù)器系統(tǒng)（BS系統(tǒng)），也在一定程度上反映了網(wǎng)站基本的訪問原理。同時(shí)，這也是Web前端開發(fā)中真機(jī)測(cè)試移動(dòng)端頁面的一個(gè)行之有效的方法；當(dāng)然，你也可以通過這種方式，實(shí)現(xiàn)局域網(wǎng)絡(luò)的文件共享。

繼續(xù)深入一步，我們?cè)跒g覽網(wǎng)站的時(shí)候很少使用ip直接訪問的，而是用www.baidu.com這樣的域名，域名與提供對(duì)應(yīng)服務(wù)的服務(wù)器的ip地址通過DNS服務(wù)器相互對(duì)應(yīng)。我們可以通過ping命令，也可以通過一些在線的工具，如http://ping.chinaz.com來獲取一個(gè)網(wǎng)站的ip地址，有時(shí)候ping出來的ip是不一樣的，一般和你使用網(wǎng)絡(luò)的地點(diǎn)有關(guān)，這主要是為了將對(duì)服務(wù)器的請(qǐng)求分流，減輕服務(wù)器的壓力，保證網(wǎng)站的訪問速度（比如可以了解一下CDN）。

二、開發(fā)的過程與設(shè)計(jì)的藝術(shù)

如何從0建立一個(gè)網(wǎng)站，這就涉及到軟件產(chǎn)品的開發(fā)了。一般，會(huì)有以下幾個(gè)職位。產(chǎn)品（PM）：負(fù)責(zé)對(duì)軟件產(chǎn)品的功能，目標(biāo)用戶等許多部分，進(jìn)行一個(gè)詳細(xì)的歸納整理，包括前期的功能地位和后期的功能修繕；設(shè)計(jì)（UE）：對(duì)用戶使用的產(chǎn)品界面、交互方式進(jìn)行統(tǒng)籌和設(shè)計(jì)；前端（FE）：活躍于客戶端的程序員，負(fù)責(zé)使用代碼實(shí)現(xiàn)設(shè)計(jì)師的設(shè)計(jì)，并與后端協(xié)調(diào)數(shù)據(jù)在客戶端的渲染工作；后端（BE）：活躍于服務(wù)器端的程序員，為前端的渲染提供所需的數(shù)據(jù)；系統(tǒng)（SA）：保證開發(fā)過程中，對(duì)于服務(wù)器權(quán)限的管理與協(xié)調(diào)，以及服務(wù)器運(yùn)行環(huán)境的提供，同時(shí)保證網(wǎng)站在生產(chǎn)環(huán)境中的平穩(wěn)運(yùn)行。

限于個(gè)人能力，我在此僅從前端和后端這兩個(gè)角度，探討網(wǎng)站實(shí)現(xiàn)的技術(shù)細(xì)節(jié)，其中會(huì)涉及許多具體的解決方案，供大家參考。

現(xiàn)在我們從這樣的角度去看一個(gè)網(wǎng)站，我將他分為三層，視圖層，數(shù)據(jù)層，以及控制數(shù)據(jù)在視圖上的顯示方式的控制器。舉個(gè)例子，一個(gè)留言板，他的數(shù)據(jù)層會(huì)包括留言者的留言內(nèi)容、留言時(shí)間、留言者的信息等內(nèi)容。這些數(shù)據(jù)，就像一張excel表格一樣，存儲(chǔ)在我們的服務(wù)器。而我們的用戶肯定不希望看到一個(gè)簡(jiǎn)陋的表格，他們希望看到的至少是一個(gè)界面，數(shù)據(jù)內(nèi)容被清新美觀的顯示在我們的瀏覽器上，而這個(gè)界面，也會(huì)隨著數(shù)據(jù)內(nèi)容的增刪修改而做出相應(yīng)的調(diào)整。存儲(chǔ)表格數(shù)據(jù)的，就是數(shù)據(jù)層；用戶看到的，就是視圖層；讓界面隨數(shù)據(jù)產(chǎn)生改變，則是控制器的使命。

現(xiàn)在，從技術(shù)的角度我們?nèi)?shí)現(xiàn)他。首先，前端工程師根據(jù)設(shè)計(jì)師的設(shè)計(jì)，做出視圖層的模板，后端工程師也做好相應(yīng)的數(shù)據(jù)存儲(chǔ)工作，包括設(shè)計(jì)創(chuàng)建數(shù)據(jù)庫、數(shù)據(jù)表等等?，F(xiàn)在，基本的工作完成。繼續(xù)下去，我們則有很多的選擇。

選擇一：后端渲染數(shù)據(jù)到視圖。

這種方法，就是前端將模板交給后端，告訴后端具體在哪個(gè)位置放什么樣的數(shù)據(jù)，放的時(shí)候有什么具體的要求，剩下的渲染工作完全交給后端處理。這樣的方法實(shí)現(xiàn)起來門檻低，而且由于服務(wù)器計(jì)算性能一般情況下強(qiáng)于客戶機(jī)，后端來刷模板簡(jiǎn)單粗暴速度快，沒有任何爭(zhēng)議。缺點(diǎn)是后端工程師由于處理了數(shù)據(jù)填寫的工作，相當(dāng)于涉及了視圖層（即前端）的工作內(nèi)容，導(dǎo)致分工不夠明確；同時(shí)，由于是后端更新數(shù)據(jù)，而后端代碼是運(yùn)行在服務(wù)器上的，每次要更新都要刷新頁面重新請(qǐng)求一個(gè)完整的頁面，某種意義上來說，用戶體驗(yàn)相對(duì)較差。

選擇二：后端將數(shù)據(jù)生成為小的數(shù)據(jù)文件，前端獲取數(shù)據(jù)并由前端更新視圖。

這種方法，涉及到前端的Ajax。說白了就是在后臺(tái)異步加載另外一個(gè)頁面，在加載過程中用戶不會(huì)看到任何變化，而加載完成后，相當(dāng)于在前端程序里獲取了一個(gè)字符串，剩下的任務(wù)就是將這個(gè)字符串解析取出里面的數(shù)據(jù)并將對(duì)應(yīng)內(nèi)容渲染到相應(yīng)的位置上。通過這種方式，首先可以保證視圖層顯示的內(nèi)容都完全由前端工程師負(fù)責(zé)，分工明確，實(shí)現(xiàn)了一定程度上的前后端分離；同時(shí)，與服務(wù)器交互的文件大小，從一整個(gè)頁面縮小到了一個(gè)僅僅包含要更新的數(shù)據(jù)的小文件，交互的量減小，帶來性能上的提升；另外，由于交互文件一般使用json這種多數(shù)編程語言都可以解析的數(shù)據(jù)格式，不僅可以給網(wǎng)頁前端使用，也可以給移動(dòng)端app的前端開發(fā)使用，統(tǒng)一了接口，擴(kuò)展時(shí)減小了工作量。

選擇三：單頁應(yīng)用（SPA）

我先解釋一下單頁應(yīng)用，和傳統(tǒng)網(wǎng)站相比，他更接近于移動(dòng)端應(yīng)用程序，其核心就是將路由控制在前端工程師的手里。核心技術(shù)除了上面的Ajax，還有pushState，又有人將兩者合稱為PJAX。

先說什么是路由，路由可以理解為你網(wǎng)站域名后面的內(nèi)容，比如www.abc.com/p/123這樣的網(wǎng)址，后面的/p/123就標(biāo)明了一個(gè)路徑。可以類比于我們電腦的磁盤，當(dāng)我在路徑的位置輸入C:/p/123的時(shí)候，我希望看到C盤下p文件夾下123文件夾的內(nèi)容，當(dāng)123變成了456，顯示的內(nèi)容應(yīng)該有些變化。如果456文件夾存在，顯示該文件夾的內(nèi)容；如果不存在，則會(huì)彈出錯(cuò)誤信息提示不存在。對(duì)應(yīng)我們的網(wǎng)站，如果當(dāng)/p/123變成/p/456的時(shí)候，也應(yīng)該給出對(duì)應(yīng)的顯示。路由由前端控制的含義，就是說，網(wǎng)站url的變化與對(duì)應(yīng)的顯示由前端處理。你的整個(gè)網(wǎng)站實(shí)際上只有一個(gè)頁面，前端根據(jù)url的變化，通過Ajax異步加載需要的數(shù)據(jù)，然后通過pushState操作瀏覽器的歷史記錄，達(dá)到與瀏覽普通網(wǎng)站同樣的效果。

SPA最大的優(yōu)點(diǎn)，大概就是響應(yīng)速度了。當(dāng)然，使用SPA對(duì)前端的技術(shù)提出了相對(duì)比較高的要求。使用SPA的一般情況，是你要做一個(gè)類似于安卓app的網(wǎng)站，如淘寶的手機(jī)站和Gmail，都是相當(dāng)?shù)湫偷腟PA。不過，雖然現(xiàn)在SPA很多，并不是所有的場(chǎng)景都適合使用SPA的。

淘寶收藏夾的架構(gòu)：

作為訪問量如此高的網(wǎng)站，淘寶是怎么做的。（首先，php的后臺(tái)肯定是擔(dān)負(fù)不起這樣的訪問量的。）在淘寶UED，他們介紹了“中途島”項(xiàng)目，基本架構(gòu)是：前端工程師使用Node.js進(jìn)行模板渲染，保證模板的渲染由服務(wù)器完成提高效率；Node.js訪問由java后臺(tái)封裝的高級(jí)數(shù)據(jù)接口，而java在訪問數(shù)據(jù)庫的時(shí)候，則是使用C語言來實(shí)現(xiàn)最有效率的訪問。技術(shù)細(xì)節(jié)可以參考淘寶UED的博客。

三、項(xiàng)目開發(fā)中值得一提的點(diǎn)

關(guān)于查閱資料和提問：

遇到問題先問搜索引擎，這我想應(yīng)該都沒有什么意見。用不了谷歌，可以從laod.cn下個(gè)hosts，翻出去的話，方法太多，不廢話了。

當(dāng)然了，找不到具體問題問人是不可避免的。但是當(dāng)問題比較復(fù)雜的時(shí)候，比如前端這邊處理瀏覽器兼容問題的時(shí)候，一定要有在線demo，一定要把問題描述的很清楚并且真的是自己解決不了了再問。關(guān)于提問的藝術(shù)，可以看看張?chǎng)涡翊笊竦牟┛?#xff08;個(gè)人非常喜歡，強(qiáng)烈推薦前端同學(xué)關(guān)注），如何提問才能進(jìn)階成為前端大神？，這篇文章對(duì)提問需要注意的點(diǎn)說的非常明確，請(qǐng)大家，無論是不是做前端，最好都看看。

任務(wù)進(jìn)度管理：

雖然在學(xué)校里做東西，很少會(huì)有嚴(yán)格的工期安排、進(jìn)度計(jì)劃這些，但是在公司里，這些問題肯定是會(huì)遇到的。推薦幾個(gè)工具，大家可以了解一下：tower和微軟的project。

版本控制：

幾乎沒有任何成功的軟件項(xiàng)目，是一個(gè)敲代碼敲出來的，況且，就算是一個(gè)人敲代碼，也應(yīng)該對(duì)自己所做的改動(dòng)有所記錄和備份。在這里，我將介紹兩種使用git進(jìn)行版本控制的方式，供大家參考。

分支管理：

整個(gè)項(xiàng)目是一個(gè)大的倉庫，這個(gè)大的倉庫由于不同的修改而有不同的分支。一般來說，有master（穩(wěn)定發(fā)布版本） / dev（開發(fā)中的相對(duì)穩(wěn)定版本） / 開發(fā)人員個(gè)人分支（集中個(gè)人的修改）這些。一般的工作過程為，個(gè)人會(huì)在個(gè)人的分支上修改，然后push到dev分支，穩(wěn)定下來的dev分支作為新的版本再合并到master分支。那一部分出了問題，就在哪一部分進(jìn)行修改。git在你每次更新分支的內(nèi)容時(shí)都要求你輸入一段描述修改的文字，這在將來的版本控制和回退上都會(huì)很有幫助。

倉庫管理：

個(gè)人理解其實(shí)是擴(kuò)大化的分支管理，項(xiàng)目負(fù)責(zé)人建立項(xiàng)目倉庫，項(xiàng)目開發(fā)人員fork母?jìng)}庫，做了自己的修改后，對(duì)母?jìng)}庫發(fā)出pull request，申請(qǐng)合并到母?jìng)}庫。這一方法最大的優(yōu)點(diǎn)，就是方便負(fù)責(zé)人進(jìn)行code review，保證代碼質(zhì)量；同時(shí)也可以方便對(duì)開發(fā)人員的貢獻(xiàn)度進(jìn)行考核。通常公司里會(huì)選取這種方式。

項(xiàng)目的持續(xù)集成：

持續(xù)集成大家在學(xué)校也很少會(huì)接觸到，但是當(dāng)你在公司里，遇到大項(xiàng)目的時(shí)候，就肯定會(huì)接觸到持續(xù)集成這方面的需求和工具。個(gè)人認(rèn)為持續(xù)集成更像是一種思想，在項(xiàng)目的開發(fā)過程中，前端和后端在開發(fā)過程中不斷的對(duì)接，測(cè)試樣例提前都做好，然后自動(dòng)化構(gòu)建項(xiàng)目，自動(dòng)化測(cè)試等等。每當(dāng)代碼庫更新（當(dāng)然，本地構(gòu)建失敗的代碼是不允許提交到倉庫的）的時(shí)候，自動(dòng)構(gòu)建腳本、自動(dòng)測(cè)試腳本都會(huì)跑出一個(gè)更新后的產(chǎn)品給大家看，方便團(tuán)隊(duì)中的每一個(gè)人掌握項(xiàng)目的情況和目前的進(jìn)度。

實(shí)現(xiàn)這種思想，就需要與之配合的工具，關(guān)于持續(xù)集成這方面現(xiàn)在在企業(yè)中目前還沒有“最佳實(shí)踐”，不過確實(shí)有很多前人的經(jīng)驗(yàn)供咱們借鑒?！冻掷m(xù)集成最佳實(shí)踐》里面對(duì)于持續(xù)集成實(shí)踐進(jìn)行了思考，歡迎點(diǎn)擊。（感謝原作者高磊的無私分享。）

四、幾點(diǎn)建議

在學(xué)習(xí)開發(fā)技術(shù)的過程中，個(gè)人給大家一點(diǎn)建議：

前期初學(xué)的時(shí)候，千萬不要求多

道理大家都明白，什么都想學(xué)肯定什么都學(xué)不好。如果一個(gè)人都能學(xué)過來，那么我們還搞這么多方向做什么。有些東西，當(dāng)你需要的時(shí)候，自然就會(huì)接觸到；而那個(gè)時(shí)候你再學(xué)，你肯定是在實(shí)際項(xiàng)目中遇到了什么問題。有問題導(dǎo)向的學(xué)習(xí)是非常有效率的，所以千萬不要求多，穩(wěn)住。

千萬不要?jiǎng)倓側(cè)腴T就覺得自己什么都會(huì)了

這是我經(jīng)歷過的階段，當(dāng)時(shí)被一位學(xué)長(zhǎng)拉了回來，也是非常幸運(yùn)。這個(gè)階段你覺得自己清楚很多東西了，感覺只要查查資料自己什么都能解決。其實(shí)想一想，這么多人研究這個(gè)領(lǐng)域，你怎么可能馬上就看透了他呢。每個(gè)領(lǐng)域，都有很多坑，每一個(gè)坑也都會(huì)有至少一個(gè)與之對(duì)應(yīng)的解決方案，而處理項(xiàng)目和解決方案，是一條漫長(zhǎng)的道路。知識(shí)是越學(xué)越細(xì)的，本來你以為前端只能寫寫頁面，深入學(xué)習(xí)以后，你才會(huì)發(fā)現(xiàn)，js可以寫機(jī)器人；可以調(diào)系統(tǒng)API做桌面應(yīng)用；哪怕只是在寫頁面這部分也有著頁面渲染時(shí)間、內(nèi)存泄漏等各種各樣的問題和與之對(duì)應(yīng)的層出不窮的解決方案。所以，低調(diào)，前面的路還很長(zhǎng)。

學(xué)到一定程度，可以多去看看

我們知道書本上的知識(shí)肯定不是最新的，技術(shù)在不斷的發(fā)展?？赡苣悻F(xiàn)在用的書上的代碼都已經(jīng)過時(shí)到運(yùn)行不了了。這個(gè)，其實(shí)很正常，畢竟做網(wǎng)絡(luò)這方面，怎么可能光靠書來追蹤技術(shù)呢。所以多去看吧，github，各種社區(qū)、論壇，線下的技術(shù)交流，這些可以給你帶來最新鮮的養(yǎng)分。所以，世界這么大，出去多看看。

五、結(jié)語：

還記得在看松本行泓的《代碼的未來》的時(shí)候，里面提到的程序員“無所不能”的自由給我留下了很深的印象。寫代碼，按照自己的意愿去構(gòu)建一個(gè)產(chǎn)品，一個(gè)項(xiàng)目，哪怕再小，依然是自由的。哪怕是在實(shí)現(xiàn)別人的需求，可以做好，做精，做出一套最佳的解決方案（沒有最佳，只有最適合項(xiàng)目），給別人留下輪子去做好二次開發(fā)，依然是自由的，是有意義的。

其實(shí)個(gè)人覺得，單純作為新人入門的話，本文的第三部分并沒有太大的意義。之所以提及，是希望新人們能夠更注重代碼之外的效率，從團(tuán)隊(duì)合作、項(xiàng)目管理、利于維護(hù)和二次開發(fā)的角度去反思自己的代碼，自己的解決方案，有時(shí)候會(huì)有更多收獲。于是多加一筆，雖然限于個(gè)人水平，說的不詳細(xì)，但也希望拋磚引玉，對(duì)大家能有些幫助。

總結(jié)

以上是生活随笔為你收集整理的WEB开发新人指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。