新手必踩5個大坑,避過你將是下一個web前端高薪大牛!

前端的彭于晏發表於2019-04-04

作為初入職場的我們,在學習與工作中,總是會遇到不同的挫折。雖然有些錯誤與某一個具體的行為相關,但有些錯誤卻是所有Web開發人員都需要面對的挑戰。因此,通過研究,體驗和觀察,總結了Web開發人員常犯的5個錯誤——以及如何避免這些錯誤分享給大家。

錯誤一轉件所謂“應該能行”的程式碼

錯誤:無論是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,可以協助管理庫/框架。至於web伺服器本身?在例如Microsoft Azure Web Apps的幫助下,你可以快速建立一個網站,幾乎所有的開發場景都可以很輕輕鬆鬆地規模化到你的業務中! 最後結語

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

“我自己是一名從事了5年前端的老程式設計師,辭職目前在做講師,今年年初我花了一個月整理了一份最適合2019年學習的web前端乾貨,從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理,送給每一位前端小夥伴,這裡是小白聚集地,歡迎初學和進階中的小夥伴。"

加QQ群:931661106(招募中)

關注公眾號:蝌蚪前端

每晚7點直播講課,送前端學習資料,從基礎到框架,專業的老師為你指導

加微❤:QD_666_QD

相關文章