前端開發到底需要掌握哪些知識

小花貓Jane發表於2017-12-18

前端開發到底需要掌握哪些知識

1..實現效果圖是最基本的工作


  把視覺稿通過頁面程式碼的方式表現出來包含了兩個基本訴求:
1.能夠真實反映視覺稿;2.能夠通 過瀏覽器的相容。這兩個訴求的達成需要我們有追求細節的態度和一定的頁面功底,能完成這兩個內容就可以初步進入頁面前端的從業者行列了,但這就代表著我們 可以勝任頁面開發的工作了?不,才剛剛開始!


  
2.與設計師的溝通和專案的參與

  溝通很重要。先丟擲幾個問題:我們有沒有和設計師探討過某些效果對低端瀏覽器渲染效率影響比較大
?有沒有探討過部分效果可以用 CSS3 實現從而使得結構更加簡潔清晰?有沒有在程式碼和視覺中尋追求過平衡?頁面前端的開發向基本使用者,編寫的程式碼也直接作用在瀏覽器上,我們有義務對頁面的穩定性和渲染效率負責。我們也經常碰到專案在總體進度壓力下導致的設計與頁面前端開發同步進行,這時更有必要儘量多地獲取專案資訊,瞭解我們還要做些什麼,這些可以幫助我們充分考慮重用和框架擴充。

  
3.良好的頁面結構
  頁面結構的編寫好比蓋房的地基建設,其好壞會直接影響到
CSS 程式碼的質量、js 開發、後臺開發還會影響到以後的頁面擴充、迭代和頁面調整。拿到視覺稿後,不要忙著動手開始,多觀察思考。先分析佈局,劃分框架,然後規劃結構,編寫代 碼。特別在大型專案中,合理使用模組化的開發不論從整體進行還是擴充維護都有相當大的好處。

  
4.關於 hack
  很多同學在頁面開發時上網搜尋最多的就是
hack 了,是否我們完全要依賴 hack 來實現頁面相容性,答案是否定的。大家經常比喻 IE6 向我們撒了一個謊,結果我們要再撒一百個謊來圓這個謊。不否認 IE6 經常讓我們口吐鮮血,但不代表我們用更多的“謊言”來彌補就可以心安理得。大部分情況下可以通過變換思路調整 HTML 結構,或使用一些雖然無法解釋但相對安全的 css 來幹掉 hack。誰都無法預計使用 hack 什麼時候會讓我們栽一個大跟頭。比如觸發 layout 或 position:relative 就可以幫助解決很多 IE6 的問題。

  
5.優美的程式碼
  現在很多
web 專案功能複雜,程式碼規模也會變得很龐大,如何更好地進行協同開發和維護是我們面臨的一個問題。需要考慮完善統一的規劃,還有要養成良好的程式碼開發習慣才會在面臨各種情況時遊刃有餘。翻閱頁面程式碼,看到合理的標籤使用、良好的註釋、清晰的程式碼結構、用意準確的 css 不僅猶如欣賞一個藝術品,更為下游開發和協同開發降低了不小的溝通成本,我們有什麼理由不去這麼做呢?舉個反面例子:div 濫用是現在比較典型的一個問題。數數看自己使用的標籤有多少個呢?不同的語義都該使用對應的標籤程式碼,特別是 HTML5 提供了更豐富的語義化標籤,它們都苦苦地在等待戰場上的衝鋒號,讓我們去解放它們吧!

6、具有企業家的精神

  最優秀的開發人員不會是遊手好閒者。對他們來講,產品的成功不僅僅意味著他們的薪水有著落了。因為他們在工作中熱情飽滿,他們是為了專案有更好的發展而工作,而且會一往無前。


  
7、測量兩次,下刀一次。。。但測量不要多於三次

  開發人員可能會犯的最糟糕的錯誤之一就是還不知道要幹什麼呢,就一猛子扎到程式碼裡去了。(當他們把這種做法稱作敏捷開發時情況更為糟糕,好像用敏捷兩字就
能讓情況好轉似的)。當偉大的開發人員跳進程式碼裡去的時候,那是因為需求規格說明同他們以前實現過的某種做法十分相似。偉大的程式設計師在面臨新問題時,他們
會進行思考、計劃和研究。


  開發人員當中最最優秀的不會墮入
“分析癱瘓者(analysis paralysis)”陷阱。他們懂得要對某些事情小心謹慎(比如涉及錢或個人資料 時),只有這些特殊領域才適合我所說的“要測量三次”。任何超過三次的情況發生就意味著你在浪費你的時間(除非在鮮有的特例中,比如核反應堆、宇宙飛船、 對衝基金會計系統)。

  在某個特定的時間點就要停止計劃,開始編碼,然後再看看你的計劃在哪些方面需要進行相應的調整,這一點非常重要。順便說一下,這就是我為什麼成為敏捷方法擁躉的原因之一。我所知道的最優秀的開發人員在計劃不再合適或者發現計劃有缺陷時,都會願意將計劃放棄掉。

想要學習前端開發的同學,可以加群:
543627393
學習哦!


相關文章