隨著互聯網的普及和技術的不斷發展，web前端開發工程師在當今互聯網行業中的重要地位，Web前端開發工程師作為一個專業技術崗位，需要掌握多種技術來構建現代化的網頁和應用程序，今天八維職業學校和大家一起來看看web前端開發工程師需避開的誤區是什么？希望對想要學習和了解web前端開發工程師這個行業的同學有所幫助。

　　作為初入職場的我們，在學習與工作中，總是會遇到不同的挫折。雖然有些錯誤與某一個具體的行為相關，但有些錯誤卻是所有Web開發人員都需要面對的挑戰。

　　錯誤一轉件所謂"應該能行"的代碼

　　錯誤：無論是JavaScript，還是在服務器上運行的代碼，開發人員都需要測試并確認它是否可以正常工作，而不是在部署了之后，就認為它應該就能從一而終地運行。

　　影響：不經過適當錯誤檢查的網站就是對最終用戶耍流氓。不僅會極大地影響用戶體驗，而且其錯誤消息內容的類型可能會給黑客線索來滲透這個站點。

　　如何避免：是人都會犯錯，這個哲理同樣適用于編碼。使用JavaScript，一定要實施好的技術來防止并抓住錯誤。雖然這篇文章描繪了用JavaScript編碼Windows應用程序，但是大部分的內容也適用于web開發，許多提示都很不錯!另一種能讓代碼變得可靠又能在未來變化中存活下來的方法是單元測試。

　　如果我們夠仔細，那么就能捕捉到服務器端的代碼失敗，而不被用戶發現。只顯示必要的信息，并且一定要確保設置友好的錯誤頁面，如HTTP 404s。

　　錯誤二寫分叉代碼

　　錯誤：本著支持所有瀏覽器和版本的崇高理念，開發人員立志創建可對任意可能情況作出回應的代碼。代碼中if語句成堆，所有方向都有分叉。

　　影響：隨著瀏覽器新版本的更新，代碼文件會變得越來越笨拙和難以管理。

　　如何避免：實現代碼的功能檢測和瀏覽器/版本檢測。功能檢測技術不僅可以顯著減少代碼量，還更易于閱讀和管理。不妨考慮使用如Modernizr這樣的庫，不僅有助于功能檢測，還能自動幫助提供不能跟上HTML5和CSS3速度的舊版瀏覽器的反饋支持。

　　錯誤三非響應式設計

　　錯誤：假設開發/設計人員在相同尺寸的顯示器上開發網站。

　　影響：當在移動設備或在非常大的屏幕查看網站時，用戶體驗要么很難看到頁面的重要方面，要么甚至要時刻注意著不導航至其他網頁。

　　如何避免：響應式的思維方式。在網站中使用響應式設計。這里有一些關于這方面的實用教程，包括響應式圖片，還有一個非常受歡迎的庫，那就是Bootstrap。

　　錯誤四網站過多刷新

　　錯誤：創建的網站需要為每一個互動而全面刷新頁面。

　　影響：類似于頁面臃腫(參見#4)，頁面加載時間的性能會受到影響。用戶體驗缺乏流暢性，并且每次互動都可能導致網頁短暫(或長時間)的復位。

　　如何避免：快速避免這種情況的一個方法就是，通過測定回發到服務器的內容是否是真正需要的。例如，當不依賴服務器端資源的時候，客戶端腳本可用于提供直接結果。你也可以應用AJAX技術或進一步使用單頁的應用程序"SPA"方法。流行的JavaScript庫/框架，如JQuery、KnockoutJS和AngularJS，能讓這些方法的采用變得容易得多。

　　錯誤五做了太多的無用功

　　錯誤：開發人員花了很長的時間來創建web內容。大量的時間花在了重復的任務上，或者自己敲代碼寫了很多。

　　影響：初始網站的發布和后續的更新時間過于冗長。如果其他開發人員也在在做同樣的工作，卻用了更少的時間和精力，那么你的開發價值顯然就低了。手動勞動很容易出現錯誤，而排除故障錯誤需要更多的時間。

　　如何避免：探索你的選擇。在開發的每一個階段考慮使用新的工具和新的流程技術。例如，你目前使用的代碼編輯器相比SublimeText和Visual Studio，如何?不管你使用的是什么樣的代碼編輯器，你最近有好好鉆研它的功能嗎?也許只投入稍稍一點時間去仔細閱讀文檔，就可以發現做事的新方法，為今后節省一個又一個小時的時間。例如，在這篇文章中，擴展Visual Studio可以為web開發人員提高生產效率。

　　不要錯過網上可用的幫助工具!例如，檢查在dev.modern.ie上的工具以簡化測試(跨多個平臺和設備)以及排除故障。

　　你也可以通過實現流程自動化以減少時間和錯誤。這方面的例子是使用Grunt工具，例如它的自動化功能可以減小文件(見第4點)。另一個例子是Bower，可以協助管理庫/框架(參見第9點)。至于web服務器本身?在例如Microsoft Azure Web Apps的幫助下，你可以快速創建一個網站，幾乎所有的開發場景都可以很輕輕松松地規模化到你的業務中!

　　通過識別這些常見的錯誤，web開發人員可以避免很多讓其他人飽受煎熬的挫折。我們不僅需要承認錯誤，還應該清楚錯誤的影響，并采取措施避免錯誤，這樣才能有更好的開發表現——并有信心完成任務!

上一篇：Python編程語言的優缺點是什么呢?

下一篇：web前端開發工程師如何開發Web應用小程序