專題名：Web重構(gòu)之道

大漠：大家下午好。壓力很大，也很緊張，第一次來QCon這種高大上的會議分享topic，加上前面的嘉賓都是高大上的話題，現(xiàn)在帶著大家回到屌絲的話題，有點(diǎn)像是砸點(diǎn)場子。我叫大漠，有人經(jīng)常跟我說，“大漠孤煙直”。鞋城，國語“最好”的前端，大家要是聽我的國語實(shí)在困難，因?yàn)閺男≌Z文沒寫好，考試?yán)鲜遣患案瘛Ｊ痔宰畛蟮摹皞吻岸恕?#xff0c;除了阿里，我就是最丑的前端了。為什么是偽前端？我沒有做調(diào)查，我自己猜想，阿里前端不懂JS的可能只能找到我了，因?yàn)槲叶甁S，我自己也常說我不是前端，平時(shí)我喜歡Sass，2011年做了一個(gè)前端網(wǎng)站，時(shí)不時(shí)記一點(diǎn)自己的筆記，因?yàn)槿吮?#xff0c;又不會其他的，只能多吃點(diǎn)苦，然后記下一些不懂的，做事的時(shí)候不要去求人。

2014年寫了一本書，也誤了不少子弟。今天的主題是“Web的重構(gòu)之道”。我對這個(gè)“重構(gòu)”是有多愛？其實(shí)我也恨它，想做別的，做不了，韓老師讓我寫一個(gè)JS，憋一天也憋不出一個(gè)代碼，只能做個(gè)。我分三個(gè)部分講一下我自己的切身體會。

前世。以前的重構(gòu)，或者以前做Web網(wǎng)頁的人，對重構(gòu)是怎樣一個(gè)看法？然后今生，你們玩高大上的時(shí)候還有多少人在苦逼的切圖？然后未來，像我這樣的偽前端，將來要怎樣生存，或者有怎樣的思考？
? ? 這張網(wǎng)頁圖，2003年的淘寶，可能這里基本上沒有沒幾個(gè)人看到這張頁面。在這樣的淘寶大家可以看出來，一個(gè)很大的特色，整個(gè)網(wǎng)頁除了圖片、文本鏈接、地址沒別的了，flash還會來點(diǎn)動畫的感覺，我們這個(gè)根本什么都沒有。頂多就是點(diǎn)個(gè)圖片，會告訴你去另外一個(gè)，又回到這樣的。

還有就是頂部文字從左往右不停地來回，還有就是link標(biāo)簽一閃一閃，這就是動畫，給我們網(wǎng)頁增添一點(diǎn)不同的色彩。那這個(gè)時(shí)候，也沒有重構(gòu)一說，大家給我們這群人定義的標(biāo)簽就是“網(wǎng)頁設(shè)計(jì)師”。這其實(shí)還是很高大上的稱謂。那個(gè)時(shí)候讀網(wǎng)頁設(shè)計(jì)師，拿的也是高薪。然后就是美工，說什么設(shè)計(jì)師，就是一個(gè)美工，拿幾張圖拼成一個(gè)頁面，就成網(wǎng)頁設(shè)計(jì)師了？Web在我們這個(gè)時(shí)代還不是很看重。一個(gè)企業(yè)問他有沒有網(wǎng)頁，要什么網(wǎng)頁？我業(yè)績很好。

然后慢慢的，2004年有一本《網(wǎng)站重構(gòu)》的翻譯書在中國大陸出現(xiàn)，這本書出來就不得了了，整個(gè)前端都發(fā)生了很大的一個(gè)變化。那時(shí)候我記得淘寶UED（音）我們要做“地球最優(yōu)秀的前端”。這場革命給我們帶來一個(gè)變化，“21世紀(jì)最大的IT冤案”。為什么說是21世紀(jì)最大的IT冤案？只要2004年以后看了這本書的同學(xué)都說，看到網(wǎng)頁上只要有推廣標(biāo)簽，就說這個(gè)不行，做的網(wǎng)頁是垃圾。不符合W3C（音）規(guī)范的標(biāo)準(zhǔn)，其實(shí)這本書從來也沒有說網(wǎng)頁出現(xiàn)標(biāo)簽就是垃圾網(wǎng)頁，就是不符合標(biāo)準(zhǔn)規(guī)范的。所以被稱為21世紀(jì)最大的IT冤案。

第二就是“災(zāi)難性的div+css泛濫”。出現(xiàn)最多的詞就是div，大家覺得我會div，我很高大上，整個(gè)頁面下來，除了div，就是div了，什么P標(biāo)簽，這些基本找不到，這個(gè)時(shí)候就成了一個(gè)泛濫。包括很多人去面試，說有這樣一個(gè)故事，有一個(gè)面試官面試一個(gè)新同學(xué)，問他，同學(xué)你來我團(tuán)隊(duì)打算做什么？他很自信地說，我來你們公司把你們所有的網(wǎng)頁，帶標(biāo)簽的網(wǎng)頁換成div+css的。面試官很納悶，他跟同學(xué)說，實(shí)在不好意思，我現(xiàn)在網(wǎng)頁都改成了div跟css，怎么辦？面試者就不吭聲了。這個(gè)時(shí)候只要懂div的，都覺得是懂Web的，然后很標(biāo)準(zhǔn)規(guī)范的，都是高大上的。

其實(shí)慢慢的，隨著時(shí)間的變更，我們貼上的標(biāo)簽不是美工了，換了，切圖、頁面仔。可能廣東呆過的同學(xué)會非常清楚，因?yàn)閺V州那邊的人喜歡把男孩子稱作“仔”，頁面仔是從那邊來的。現(xiàn)在就是說沒“錢”途，因?yàn)橹粚戇@個(gè)，絕對沒有前途，工資低。不就是div+css嘛，誰都會，一本書讀一個(gè)星期誰也會寫。然后就造成了我們?nèi)腴T門檻非常低。

我經(jīng)歷這些的時(shí)候在想，我們的Web重構(gòu)到底是什么？它的價(jià)值又會是什么？自從2004年以后做重構(gòu)的，懂的就是這兩個(gè)，看家本領(lǐng)，也是吃飯的飯碗。最主要的工作，就是把PSD轉(zhuǎn)成HTML+css，我不說div。還有一個(gè)最大的任務(wù)，那時(shí)候我們引以為豪的，IE5、IE5.5、6我們都能把它滅了。這是我們最牛的。有個(gè)老外朋友跟我說，我們國外這種IE6做兼容的找不到了，找了一個(gè)客戶問，我客戶是中國市場，你得給我做兼容IE6的，不然客戶沒辦法看，然后屁顛屁顛找了一圈，整不了，最后找了一個(gè)外包，中國中國小伙子給他做IE6兼容。

這個(gè)時(shí)候可能我們很多重構(gòu)工程師覺得，我的工作職責(zé)，就是寫HTML，寫css，然后最大的任務(wù)就是把設(shè)計(jì)師的PSD設(shè)計(jì)圖轉(zhuǎn)變成Web頁面。這份工作說實(shí)話，只做一天兩天會覺得很有意思，一動手，馬上瀏覽器就能看到了。再加上后面css3玩得溜一點(diǎn)，加點(diǎn)修飾，還能做動漫，就覺得很有新鮮感。但是天天做，設(shè)計(jì)師搞了四天的設(shè)計(jì)圖，說重構(gòu)，明天就要，就傻眼了。設(shè)計(jì)四天，重構(gòu)搞一天，多不公平？然后加班。不知道有沒有攜程的同事，當(dāng)年攜程就是這樣，不停馬不停蹄的，設(shè)計(jì)師來個(gè)設(shè)計(jì)圖，大漠，明天早上要，然后就傻眼了。

其實(shí)我在思考，我們重構(gòu)不只是說我把設(shè)計(jì)圖99.9%的還原，就叫重構(gòu)。我覺得重構(gòu)是一種修改。為什么是一種修改？大家平時(shí)工作有沒有這樣一個(gè)感覺，你有多少的頁面是從頭到尾從設(shè)計(jì)圖切出來的？特別是大公司、大團(tuán)隊(duì)，可能你有自己的產(chǎn)品，很多時(shí)候交付會說你給我搞一個(gè)導(dǎo)航條，比如今天中秋節(jié)了，我要上個(gè)嫦娥的圖，好，就只做這一點(diǎn)。苦就苦在外包公司，沒自己的產(chǎn)品，他天天做的事情就是怎么把PSD轉(zhuǎn)換成頁面。我們做這種修改的時(shí)候，就要考慮我修改的過程，以前的代碼結(jié)構(gòu)是不是合理？如果不合理，就要改了。這個(gè)也是一種重構(gòu)。

第二種，內(nèi)部結(jié)構(gòu)更容易。為什么這么說？可能你上一任寫HTML+css，是拿了兩本書學(xué)了兩個(gè)月就進(jìn)公司做了兩個(gè)頁面，結(jié)果被你老大覺得可能不行，又招你這個(gè)大神來負(fù)責(zé)，然后一看，這個(gè)代碼簡直無法直視的時(shí)候，你讓這個(gè)代碼變得更簡單，這個(gè)過程也是重構(gòu)。

第三，有節(jié)制的整理代碼。并不是搞得最整潔就是優(yōu)秀的代碼。多套一個(gè)div，這個(gè)人肯定沒有學(xué)過重構(gòu)，明顯是不要的，怎么多出一個(gè)？真正合理不合理，不是說越少的結(jié)構(gòu)就是越合理的，應(yīng)該根據(jù)自己的業(yè)務(wù)、需求做平衡。
? ? 第四，使bug產(chǎn)生率最小化。做過IE6或者7兼容的同學(xué)很有感觸，5fox（音）這種高大上的瀏覽器一看心里很舒暢，測IED（音）版本的時(shí)候就苦逼了，不停加個(gè)下劃線，很多人第一想到的，是加這種bug，根本沒有想到代碼是不是出現(xiàn)問題。

Web重構(gòu)到底是什么？是一種思想。因?yàn)樽鲋貥?gòu)工程，活簡單，我們得有想法，把它做好。是理念，我們追求的不僅僅是還原，我們要追求更多，就是怎樣還原到讓人家更舒服。專業(yè)的人做專業(yè)的事，可能前端有擅長HTML的，也有擅長JS的，這個(gè)時(shí)候就出現(xiàn)了分離的東西。在目前攜程還有很多團(tuán)隊(duì)只寫HTML跟css。

其實(shí)也是一種很累的分工優(yōu)化，誰擅長做什么就做什么，第一做起來順手，成本也低，然后你叫一個(gè)擅長JS的人弄個(gè)HTML、css，結(jié)果也寫得不好，bug也出來了，叫他調(diào)也調(diào)不來，所以這個(gè)時(shí)候分工還是有好處的。我覺得是技術(shù)、數(shù)據(jù)、情懷、人文為主導(dǎo)的交互優(yōu)化。雖然是屌絲，還是要有點(diǎn)追求。大家會說，不就是切圖的嗎？我們不能說自己就是個(gè)切圖的，這樣你就永遠(yuǎn)是個(gè)切圖的，我們應(yīng)該破繭而出，突破自我。

以前我們做重構(gòu)，工具你要會用，命令也要會敲，不然也說不過去，要跟交付設(shè)計(jì)師討論這樣交付是否合理，搞不好哪天你就升級了，不再是屌絲重構(gòu)，而是變成交付設(shè)計(jì)師。還有用研，以前一個(gè)按鈕，上去以后給你變個(gè)顏色，已經(jīng)有點(diǎn)感覺了，現(xiàn)在看一些高大上的，點(diǎn)了以后會給你轉(zhuǎn)個(gè)圈圈，數(shù)據(jù)提交完以后給你出現(xiàn)一個(gè)勾勾，表示已經(jīng)提交完了，這個(gè)我們也是可以做的。所以我們不能局限在自己的小范圍里面。

可能有人說你站在臺上吹牛。那在手淘這一個(gè)高大上的團(tuán)隊(duì)，怎么做重構(gòu)？接下來我講一講我在手淘做重構(gòu)的過程。
? 這個(gè)頁面不只是淘寶、手淘里面有，估計(jì)只要做Web的，都碰到這個(gè)東西。相信你們產(chǎn)品里也有這個(gè)東西，不同的產(chǎn)品、不同的業(yè)務(wù)線、不同的頁面，都有這個(gè)東西。這個(gè)怎么做？有什么我們不知道的？從PPT上明顯的可以看到，起碼左邊的圖片不一樣，有圓的、方的、大的、小的，這些是不確定的因素。右邊的內(nèi)容，有單行的、多行的，標(biāo)題有頂不對齊的，有集中的，還有就是內(nèi)容不固定，寬度不固定，再加上我們現(xiàn)在要面對的設(shè)備也是很多種。今天安卓明天iPhone，這個(gè)屏幕寬度都不一樣。那你怎樣做這件事情？

黑了，說這么優(yōu)秀的團(tuán)隊(duì)也寫出這么差的代碼來？A工程師覺得上面寫也是沒有問題的，然后B工程師覺得下面寫也是OK的，所以有6種樣式。做重構(gòu)的人，可能他會覺得沒辦法接受。我們仔細(xì)看，整個(gè)可以分為三個(gè)部分，整個(gè)結(jié)構(gòu)這個(gè)時(shí)候已經(jīng)非常清晰，我常把這種叫做重構(gòu)對象。左邊、右邊的圖，藍(lán)色的我稱作媒體對象，就是常看到的頭像或者人頭，甚至產(chǎn)品列表里的產(chǎn)品片，右邊圖中間的那個(gè)紅色的，當(dāng)作一個(gè)主體內(nèi)容。這個(gè)時(shí)候應(yīng)該能想象得到這樣一個(gè)結(jié)構(gòu)，是不是會比較清晰？

這個(gè)右邊有按鈕，這個(gè)時(shí)候在中間再加一個(gè)這樣的，可能做到這個(gè)時(shí)候，大家會覺得已經(jīng)能滿足很多人的需求了，其實(shí)再仔細(xì)想想，是不是真的能滿足？比如說我頭像要跟標(biāo)題垂直、居中、對齊，這個(gè)時(shí)候我們這種方法還能不能實(shí)現(xiàn)？作為一個(gè)專業(yè)的重構(gòu)，你就要考慮一下你這個(gè)玩意丟出去以后，人家用起來能不能遂心應(yīng)手？

個(gè)性化的樣式怎么處理？第一個(gè)是頂部對齊，第二個(gè)居中，第三個(gè)又多出一個(gè)東西，這個(gè)時(shí)候又開始犯傻了。我已經(jīng)被這個(gè)折磨了很長時(shí)間。這個(gè)時(shí)候我想了一個(gè)辦法，不同的產(chǎn)品，可能有細(xì)微化的樣式差別，那我根據(jù)產(chǎn)品，對整個(gè)布局結(jié)構(gòu)我不造成任何影響，但是要達(dá)到細(xì)微化的東西，可以靈活控制它。

接下來一個(gè)問題，其實(shí)它擴(kuò)展性還不夠強(qiáng)大，我有時(shí)候有按鈕，有時(shí)候沒有，怎么辦？要不要?jiǎng)咏Y(jié)構(gòu)？或者添加其他的東西，能不能實(shí)現(xiàn)？或者頂端對齊、居中對齊、底部對齊，有沒有更好的方法能實(shí)現(xiàn)？其實(shí)有。左邊這個(gè)Flexbox，是個(gè)高大上的東西，現(xiàn)在有很多團(tuán)隊(duì)也在用，不管是移動端還是PC都有人在用。右邊是一個(gè)Flag ?Object，這個(gè)時(shí)候其實(shí)從這個(gè)圖上來看，沒有太大區(qū)別，Flexbox我不說，因?yàn)檫@個(gè)這個(gè)東西很常見，我說一下Flag ?Object，這個(gè)東西很常見，

但是大家不會往這上面想。為什么不往這上面想？因?yàn)閺那懊孀哌^來的人，都已經(jīng)被兼容性給毒害了，就會想到當(dāng)年IE6不支持不兼容。其實(shí)事實(shí)不是這樣？目前我們多少人還在兼容IE低版本？我估計(jì)已經(jīng)很少了。而且這種東西在移動端上用，根本不用考慮它兼容不兼容的問題。這個(gè)屬性是不會存在什么兼容性問題的。那這個(gè)時(shí)候我們要控制，擴(kuò)展它右邊有沒有按鈕，是不是頂端對齊還是居中對齊，就很好控制。因?yàn)橐郧白钤缱鯳eb，是用表格，會操作表格就會操作這個(gè)東西，是不是更好一些。

繼續(xù)深入講，前面那部分工作做的還是以前重構(gòu)做的事情，不管你結(jié)構(gòu)怎么變、優(yōu)化，還是沖過做的事情。那我們有沒有考慮，我們略思考一點(diǎn)工程上的事情，也就是說，雖然我不懂工程，但我能參與、我能思考，哪怕我不做那么高大上的工程，我只對我們自己的css做工程上的思考，可不可以？我簡單把剛才的示例一下，這個(gè)文件只負(fù)責(zé)布局這部分的東西，然后下面是皮膚的，商品的或者卡片的，不同樣式的時(shí)候，可以堆在這里面，或者往往下面下面繼續(xù)創(chuàng)建文件。這個(gè)時(shí)候可能很多人會納悶，你這不是會增加很多請求嗎？

看到后面的文件后綴是.scss，而不是.css，這就涉及到Saas的問題，了解Saas的人會知道這樣做是不會增加請求的。所以我這里僅僅提供提供一種思路，這種思路是我自己親身經(jīng)歷過的一件事情，接下來我想，大家都講安格拉（英，音），real ?JS（音），對一個(gè)不懂JS的人來說，這是一件既興奮又痛苦的事情。為什么這么說？你看懂的人都在玩那種高大上的東西，而且能做出很多有意思的東西，不懂的人看著他，就只認(rèn)識那幾個(gè)字母，里面能干嘛就不懂了。然后很多人可能會質(zhì)疑，你不能學(xué)嗎？學(xué)是可以學(xué)，學(xué)的過程我們就不說了，這是一個(gè)長遠(yuǎn)的話題。

我想有沒有一個(gè)萬能的標(biāo)簽，能把剛才我們的事情做出來？說到這個(gè)時(shí)候可能很多人會想到谷歌的坡里悶特（英，音），就是老早出的自定義Web組件的東西。這個(gè)時(shí)候我們韓老師把谷歌那個(gè)玩意兒改良了一下，說不懂JS不怕，就用我改良的這個(gè)東西，分分鐘，好，我就拿著韓老師改良的坡里悶特（英，音），寫了一個(gè)這樣的，我感覺是以前高大上了，然后我問，我這樣寫，第二個(gè)不一樣的我怎么辦？等于又要?jiǎng)?chuàng)建一個(gè)文件、一個(gè)項(xiàng)目？然后韓老師就郁悶了，這個(gè)時(shí)候我們一起探索這個(gè)問題，也就是說，粒子化的東西我們?nèi)绾喂芾?#xff1f;特別是淘寶，最常見的就是瀏覽的時(shí)候看到底下價(jià)格、優(yōu)評、點(diǎn)贊的數(shù)量、評論數(shù)。只做一個(gè)行業(yè)還好一點(diǎn)，天天長得一樣。

手淘面對的，就是今天這個(gè)人只有標(biāo)題、價(jià)格，明天那個(gè)人要在這個(gè)基礎(chǔ)上增加一個(gè)按鈕，再增加一個(gè)點(diǎn)贊的，還要再增加降價(jià)的，這個(gè)時(shí)候我又傻眼了。所以我一直沒明白，這種粒子化的東西要怎么處理？針對這種話題我找過張迎龍（音）大師討論過，他說，我們分而治之，我就只懂了這幾個(gè)字，然后真正含義沒有理解。我就說，要找個(gè)時(shí)間去跟他一起探討一下？分而治之，怎么解決粒子化的東西？我們不僅碰到這種頭疼的事情，比如現(xiàn)在大家在用安格拉（音），view ?JS（音），包括VACT（音），對達(dá)峰來說他能接受把css都插到JS，插到一個(gè)地方去，但是對于我這樣的人，說實(shí)話就感覺我一下子好不容易分清楚了，又一下子回到了最早的，說css要單獨(dú)一個(gè)文件，JS單獨(dú)一個(gè)文件，HTML一個(gè)文件，這下又回到了最初。又是一個(gè)挑戰(zhàn)，對這個(gè)問題我思考很久，到現(xiàn)在還沒有想明白。

就算在這個(gè)基礎(chǔ)上做一點(diǎn)點(diǎn)修改，就能完成我需要的效果，我當(dāng)初就把這種定義為組件，我想不斷的積累，然后也能去重復(fù)使用、可以擴(kuò)展、然后可以維護(hù)。

? ? 其實(shí)還有一種，就是可以定制。怎么定制？粒子化的東西不好控制。我們阿里的人做了一個(gè)這個(gè)，把我做的人跟他做的東西結(jié)合在一起，因?yàn)檫€沒有成功，我拖過去，就會在APP里面做出這樣一個(gè)頁面，然后我們阿里知治（音）只要點(diǎn)一個(gè)按鈕，就可以發(fā)布到我們H5的網(wǎng)站上，比如要添加價(jià)格，上面的東西怎么改？我們這個(gè)還在做，點(diǎn)擊它，可以改標(biāo)題、文字、樣式，然后保存一下就發(fā)布到線上。這是我們現(xiàn)在還在做的。

我自己把這種理解為“可定制”，就是我們做任何東西，除了能復(fù)用、擴(kuò)展、好維護(hù)之外，還要方便人家能定制。就像達(dá)峰說的，“讓沒有做過網(wǎng)頁的人也能做網(wǎng)頁”，其實(shí)我們這個(gè)也是。我們這個(gè)是針對運(yùn)營的人，天天找我們阿里知治（音），說給做一個(gè)頁面，阿里就說怎么又長得一樣？就想出歪注意，當(dāng)初里面有很多東西，自己選，覺得不順眼改一改，就不用來煩我們了。這樣就能愉快地玩耍。

這是我在手淘團(tuán)隊(duì)思考的一些事情。我不再停留在攜程那個(gè)時(shí)代，我只要想著辦法把PSD轉(zhuǎn)換出來，就OK了。或者說，我能解決一些bug問題，寫一點(diǎn)css3，就是重構(gòu)很牛逼的人，其實(shí)還差遠(yuǎn)了。我覺得重構(gòu)工程師不能把自己局限于在這里面。
? ? 其實(shí)重構(gòu)能做的事情還有很多。比如性能優(yōu)化，這個(gè)圖是我們淘金幣優(yōu)化前跟優(yōu)化的的頁面效果圖，看這個(gè)圖，大家反正看到的都是一張圖片，也不知道你優(yōu)化了什么？我們來看一下，這是優(yōu)化前的數(shù)據(jù)，這是優(yōu)化后的數(shù)據(jù)，在整個(gè)優(yōu)化的過程中，做了一些什么事情？其實(shí)重構(gòu)也能做很多事情，你圖片怎么處理？怎么優(yōu)化？大概有沒有聽過飆叔講過一個(gè)經(jīng)典的故事？自從我聽到那個(gè)故事以后，我對飆叔無比崇拜，他能把一張圖、里面的東西摳出來，通過兩個(gè)div疊加起來。很多人做法，就是就要怕差一張圖，你要用就用，不用拉倒。飆叔跟老板算這筆錢，我給你優(yōu)化了圖片，省了多少流量，在騰訊這樣一個(gè)“大腿”上省了多少錢，老板，省下的這些錢，就是我給你創(chuàng)造的價(jià)值。

我想說的就是，很多時(shí)候很多人會思考重構(gòu)這個(gè)行業(yè)里有沒有自己的價(jià)值？這個(gè)價(jià)值你要說怎么說，如果情懷高一點(diǎn)，說是為了理想、夢想做，情懷低一點(diǎn)，就是為了錢，老板我給你省了多少錢，你給我多發(fā)點(diǎn)獎(jiǎng)金？怎么想省錢，幫老板省錢，那就是你存在的價(jià)值，你要想的事情。左邊跟右邊，我們優(yōu)化以后，給我們業(yè)務(wù)帶來的價(jià)值。引導(dǎo)支付幾乎增加了一半，然后GMV可想而知。很多人想，怎么優(yōu)化？

優(yōu)化這個(gè)話題很大，要展開說可能也要花很長時(shí)間。網(wǎng)上或者書上，有谷歌的一些優(yōu)化，這個(gè)可能提供給我們的是做一個(gè)參考，那真正優(yōu)化的過程，哪怕是一個(gè)很小的點(diǎn)，都能改變你整個(gè)頁面或者整個(gè)項(xiàng)目的性能。這個(gè)“點(diǎn)”，就靠你自己怎么監(jiān)控、測試。然后在監(jiān)控、測試整個(gè)的過程里，測試永遠(yuǎn)都是一個(gè)假數(shù)據(jù)，然后我們內(nèi)部好就好在在一個(gè)優(yōu)秀的團(tuán)隊(duì)，有很強(qiáng)大的工具，我們可以隨時(shí)拉到線上數(shù)據(jù)，能分析出多了什么樣的請求、哪個(gè)請求多花了時(shí)間。就像雙十一之前我們做的，我們在不同的網(wǎng)絡(luò)下都是email能打開。

通過這樣一個(gè)事情，我想告訴大家，價(jià)值是要自己去尋找的，不是說你坐在那里或者吹兩下牛就有你的價(jià)值在了。
? ? “未來是美好的，道路是曲折的，現(xiàn)實(shí)是殘酷的”。像我這種就已經(jīng)面臨很大的殘酷了，不懂JS，韓老師不要我，我估計(jì)我出去了就沒人要了。我得回家種地去了。謝謝大家！

提問環(huán)節(jié)：提問：在一家小公司，老板要你做一個(gè)運(yùn)營系統(tǒng)，人家會給你PSD嗎？不會。圖都不給你切，人工做，一個(gè)人搞定。怎么辦？沒有圖片，然后做出來，老板說怎么回事？壓根看不了。這種情況下其實(shí)很多小公司會面臨這樣的情況，沒有美工、沒有所謂的設(shè)計(jì)師，只有一個(gè)工程師Java一搞，css一搞，全能的，但是這種情況下，對我們工程師來說就是更挫逼（音）的一件事情。有沒有一種辦法，對我們這種全能工程師來說有一種更好的方式來做這些自己公司用的管理網(wǎng)站、管理系統(tǒng)？最近谷歌出了一個(gè)外爾科莫樂（音）的框架，讓我看到了一個(gè)出路。到底該怎么解決這個(gè)問題？如何把css和HTML干掉，只有JS或者Java可以搞定？

大漠：按你現(xiàn)在的描述，你可能比我更痛苦一點(diǎn)。其實(shí)你這個(gè)問題也對我來說很好解決，因?yàn)槟氵@是一個(gè)內(nèi)部系統(tǒng)，然后有一個(gè)PRD，最起碼你能考慮斯他伯（音），這是一個(gè)很好的東西，然后foundation這些東西，也就是說你根本不用擔(dān)心設(shè)計(jì)的樣式怎么樣，你只要跟著套路結(jié)合PRD，出來的效果就不會差。我就不信你老板看了你這樣一個(gè)類似于推特風(fēng)格的內(nèi)部管理系統(tǒng)，還會說你做出來的東西挫逼，然后你把推特的頁面打開給老板看，你看，推特都長這樣。

提問：現(xiàn)在我們遇到一個(gè)問題，現(xiàn)在有個(gè)網(wǎng)站，按照以前的說罵，都是通過電腦瀏覽器的方式訪問我們網(wǎng)站，但是現(xiàn)在隨著iPhone、iPad逐步流行起來，我們網(wǎng)站需要向移動終端支持。也是牽扯Web頁面的重構(gòu)，包括HTML、css。不知道能不能給我們一些建議？有沒有好的方式最好地兼容現(xiàn)在的電腦版的網(wǎng)頁

大漠：這看你自己的產(chǎn)品定位。如果你產(chǎn)品不涉及要有一些交易之類的，就是純展示性的，而且產(chǎn)品不是很復(fù)雜，可以考慮響應(yīng)式設(shè)計(jì)。就是在這個(gè)基礎(chǔ)上你能實(shí)現(xiàn)多終端的兼容。如果要給用戶更好的體驗(yàn)，那我覺得你想只通過一套代碼實(shí)現(xiàn)，難度還是很大，甚至不大可能。

總結(jié)

以上是生活随笔為你收集整理的Web重构之道 大漠的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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