頁面重構時的注意事項

• 頁面重構時的注意事項
  • 1. 重構頁面時，什麼樣的代碼纔算是好的代碼？
  • 2. 重構時如何告訴設計師，他設計的東西太醜？

 

1. 重構頁面時，什麼樣的代碼纔算是好的代碼？

這個我感受要從三方面來作答，基礎的就不說了，那些語義化，結構化，兼容性等等方面的問題。說說中級部分的：

• 頁面的健壯性：　這個怎麼說呢，按個人理解，UI出的psd圖是一個頁面理想狀態下的形態，而真實上線後，會出現三種極端狀態，一，數據極多，二，數據極少，三，數據恰好(其實就是PSD設置描述的一個狀態)。因此在頁面排版的時候，考慮這設計以外的兩種狀態，以避免數據太多的時候，撐破布局，頁面走樣。以避免數據太少，頁面高度變小，佈局不對齊，會打破整個頁面的平衡。UI設計時爲了效率或經驗問題出的圖，恰好是理想狀態，很少很多，但經驗豐富的，會在項目後期補出一個無數據時的裝飾頁面。

• 頁面的擴展性：能夠說，這個也是第一條的擴充，擴展性的意思爲，在頁面的模塊不多的時候，要考慮將來添加子模塊或兄弟模塊的狀態，爲未來留好css，html擴展的出入口。在未來添加模塊的時候，儘量少的去動原來的html結構，使html易於擴展，儘量少的去修改css，使css可以繼承可複用。通常的處理就是多套一層div，或其它解決辦法。

• 頁面的複用性：　因爲頁面中風格類似的模塊不少，或頁面中與頁面中類似的模擬不少，可是有的高點有的低點，這樣建議把表現形式的樣式放在一個class中，物理屬性放在一個class中。還有就是裝飾性的圖片決不不以明標籤的方式插入到頁面中，內容式的內容絕對以的方式插入中去，以避免未來多主題，多語言版本的實現。
  大概就這麼多，唉，上次面試都沒有想起這麼多，鬱悶。

 

2. 重構時如何告訴設計師，他設計的東西太醜？

• 我的自己的專業度，若是你是從一個設計轉過來的前端，而且雖然在從事前端，但一直在關注着前端，這樣在保證自身水平或有認知能力的前提下，去提一下建議，那能保證是有質量，而不是隨便說說。好比：歐美國家的人爲何喜歡飽和度那麼重的頁面風格，那是由於他們在赤道附近，接受紫外線比較強，因此喜歡重色。好比，能分清冷暖色，能分清各個顏色的表達意義，通常各個顏色搭配以後是爲了突出頁面內容版塊並且強調必定是有序，而不是無序的。

• 溝通時的語氣或說話時的文字組織，必定要注意。這不但體現一我的的情商，更體現一我的的智商。話有三說，巧着爲妙。爲什麼他與人相處偏偏恰好，而我卻到處被動，這是有道理的。
  我的建議：注意建議，好比如下場景，你這個東西在個人顯示器上看的偏黃，與咱們產品logo的主色衝突太大，是否是故意爲之，仍是我顯示器的問題，能不能到我這來看看。必定要注意，是你故意爲之，或我這看看。即擡高了對方，又把場景的主動權掌握在本身的手裏。

• 自己話語權，若是你具有一個有話語權的人，或者有這個品牌認知，讓你們有這個共識，這人，說的東西通常靠譜。能夠去說，不然，點評別人的江山，還不如管好本身的三畝地。

 

---

前端開發qq羣： 389875212  ，禁止閒聊，非喜勿進~！