[[83932]]

 這個標(biāo)題目的很簡單，就是為了讓我們這些日復(fù)一日埋頭碼頁面的網(wǎng)頁重構(gòu)工作者，重拾面對這個我們所熱愛的行業(yè)的熱情；檢視經(jīng)常被我們在繁瑣的工作中忽略的初級錯誤；以新人的眼光和態(tài)度迸發(fā)熱情認(rèn)真對待每一個頁面?；旧隙际俏易钕氡磉_(dá)和同樣需要重新審視的東西，也希望可以作為給剛?cè)胄械男氯藗兊囊恍┬⌒≈敢?）

一般來說，接到一個新的需求，以簡單的少頁面需求為例，流程上可以簡單分為幾大階段：

1. 查看設(shè)計稿，閱讀需求文檔、原型圖；

2. 查看并分析設(shè)計稿，在腦中整理出粗略解決方案；

3. 切圖、合并圖片；

4. 書寫HTML代碼、CSS代碼；

5. 檢查瀏覽器兼容性；

6. 對比設(shè)計稿，檢查還原度；

7. 開發(fā)聯(lián)調(diào)修改，測試解bug，上線后再確認(rèn)一遍頁面無bug。

理想情況來說，按照流程一步步做下去，很順利地就能把需求處理好然后***上線，重構(gòu)所做的工作某些程度上也被視為相對設(shè)計師來說相當(dāng)?shù)牟豢?。但我們不得不?jīng)常面對的糾結(jié)情況同樣有很多，其中涉及的更多工作內(nèi)容可能包括：

1. 需求變更，包括設(shè)計稿上的修改和重構(gòu)直接處理的靜態(tài)頁面的修改；

2. 適應(yīng)原有動態(tài)模塊HTML結(jié)構(gòu)的樣式重寫；

3. 多平臺調(diào)試，如PC客戶端內(nèi)嵌、移動客戶端；

4. 種種或不明或刁難情況。

假設(shè)情況一：需求不明確，負(fù)責(zé)人多次變更，設(shè)計稿內(nèi)容短缺且無原型稿。

如果只是三種可能之一，需求不明確可以找負(fù)責(zé)人確認(rèn)，負(fù)責(zé)人換可以看需求文檔，設(shè)計稿不全可以找設(shè)計師補(bǔ)。如果偏偏不巧同時碰上了這么個亂子，甚至雪上加霜設(shè)計師都不知道跑哪去了，需求方趕著上線，負(fù)責(zé)人被煩得只能趕緊把這個爛攤子丟出去…… 這種時候跟他們一樣懷著煩躁的心態(tài)顯然是不可取的，再急也要對你的項目負(fù)責(zé)，對的，需求給到你就是你的項目了不管他掛誰的名頭，***出來的頁面被罵被恥笑難道你能很高興地一起哈哈大笑么。

最該做的，首先是理清這個項目到底是個什么玩意，拿來干什么，需要實現(xiàn)哪些功能，既然沒人能理清這個流程，自己學(xué)一下梳理也是種技能。還有，再煩躁也不要跟負(fù)責(zé)人叫囂，一條繩子上的螞蚱誰都不好過，互相理解能取得對方的感恩和尊重。當(dāng)然要適當(dāng)給點下馬威，你說趕著上線給你加班加點做，需求方（頭頭or客戶）不滿意又來一堆修改折騰，也要麻煩負(fù)責(zé)人懂得反省自己的忽略的過程。***，抱著平和的心態(tài)，安靜地完成這個項目。

假設(shè)情況二：迅雷看看評論模塊

評論模塊可以說是看看重要而獨(dú)特的數(shù)據(jù)之一，根源在看看官網(wǎng)，輕易變更結(jié)構(gòu)需要后臺重新開發(fā)一套模板和重新錄入內(nèi)容，那么也意味著如果需要調(diào)用評論必須遵守原來的結(jié)構(gòu)。這樣的情況對于求新求變的重構(gòu)來說是有點痛苦的，但如果換個角度想，一樣的結(jié)構(gòu)依靠CSS變換出多彩多姿的形式，不也是能力挑戰(zhàn)之一么。以雪花秘扇官網(wǎng)為例，小小的評論模塊加了邊框圓角和鼠標(biāo)經(jīng)過變換的效果是不動感了許多~

假設(shè)情況三：需求是內(nèi)嵌在迅雷7客戶端的應(yīng)用插件

Windows平臺上的國內(nèi)軟件內(nèi)嵌瀏覽器目前還未見過非IE核心的（如果你見過歡迎分享），迅雷7內(nèi)嵌瀏覽器則以本機(jī)瀏覽器版本為準(zhǔn)，但僅包括IE6、IE7（7及以上版本皆采用IE7）。

為客戶端內(nèi)嵌頁面要多考慮一些特殊情況，如：

7.2之前的迅雷版本的應(yīng)用插件，相比起瀏覽器全屏的大小可顯示區(qū)域較小，為了達(dá)到接近實際展現(xiàn)的效果，將瀏覽器縮放成同比例是個不錯的主意，推薦火狐插件web developer，菜單中的窗口大小可以自定義多種尺寸方便切換調(diào)試。 說到瀏覽器窗口大小必須一提的是經(jīng)常會被忽略的一個兼容點，即瀏覽器非全屏狀態(tài)下背景被截斷，如下圖

即便PC上的瀏覽器縮放可以忽略不管，別忘了在移動設(shè)備端界面太小頁面顯示不全需要滑動來瀏覽整個頁面的情況，不能不說這是看起來不太美妙的體驗。

PS：關(guān)于移動平臺的情況篇幅有限暫且略過，我會在后續(xù)的文章里繼續(xù)介紹 :）

假設(shè)情況四：不時穿插的緊急修改而你手里已經(jīng)有三四個需求在同時進(jìn)行，各種混亂夾雜

繁忙的白天RTX會響個不停一會這個專題幫忙看下這個問題，一會大廳那個商城需要加點東西…顧得上這個可能就漏了那邊需要把寬度改小點直接扔了出去，沒顧上那邊開發(fā)產(chǎn)品一并叫囂趕著上線啊發(fā)版啊速度啊…便簽條列下進(jìn)行中的項目、交付時間、修改要點、待深思問題等備注顯得就很有必要了，紙筆拿上順便練練書法，省得不小心好多字都不會寫了~

回想網(wǎng)頁重構(gòu)都在做什么到此結(jié)束，歡迎探討交流，你可以不認(rèn)同我的觀點并提出異議，我也愿意誓死為你捍衛(wèi)這份權(quán)利并很樂意來一番唇槍舌劍 :）

原文鏈接：http://kb.cnblogs.com/page/148953/