作為初入職場(chǎng)的我們，在學(xué)習(xí)與工作中，總是會(huì)遇到不同的挫折。雖然有些錯(cuò)誤與某一個(gè)具體的行為相關(guān)，但有些錯(cuò)誤卻是所有Web開(kāi)發(fā)人員都需要面對(duì)的挑戰(zhàn)。因此，通過(guò)研究，體驗(yàn)和觀察，總結(jié)了Web開(kāi)發(fā)人員常犯的5個(gè)錯(cuò)誤——以及如何避免這些錯(cuò)誤分享給大家。

[[264355]]

錯(cuò)誤一

轉(zhuǎn)件所謂“應(yīng)該能行”的代碼

錯(cuò)誤：無(wú)論是JavaScript，還是在服務(wù)器上運(yùn)行的代碼，開(kāi)發(fā)人員都需要測(cè)試并確認(rèn)它是否可以正常工作，而不是在部署了之后，就認(rèn)為它應(yīng)該就能從一而終地運(yùn)行。

影響：不經(jīng)過(guò)適當(dāng)錯(cuò)誤檢查的網(wǎng)站就是對(duì)最終用戶耍流氓。不僅會(huì)極大地影響用戶體驗(yàn)，而且其錯(cuò)誤消息內(nèi)容的類型可能會(huì)給黑客線索來(lái)滲透這個(gè)站點(diǎn)。

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

如果我們夠仔細(xì)，那么就能捕捉到服務(wù)器端的代碼失敗，而不被用戶發(fā)現(xiàn)。只顯示必要的信息，并且一定要確保設(shè)置友好的錯(cuò)誤頁(yè)面，如HTTP 404s。

錯(cuò)誤二

寫分叉代碼

錯(cuò)誤：本著支持所有瀏覽器和版本的崇高理念，開(kāi)發(fā)人員立志創(chuàng)建可對(duì)任意可能情況作出回應(yīng)的代碼。代碼中if語(yǔ)句成堆，所有方向都有分叉。

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

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

錯(cuò)誤三

非響應(yīng)式設(shè)計(jì)

錯(cuò)誤：假設(shè)開(kāi)發(fā)/設(shè)計(jì)人員在相同尺寸的顯示器上開(kāi)發(fā)網(wǎng)站。

影響：當(dāng)在移動(dòng)設(shè)備或在非常大的屏幕查看網(wǎng)站時(shí)，用戶體驗(yàn)要么很難看到頁(yè)面的重要方面，要么甚至要時(shí)刻注意著不導(dǎo)航至其他網(wǎng)頁(yè)。

如何避免：響應(yīng)式的思維方式。在網(wǎng)站中使用響應(yīng)式設(shè)計(jì)。這里有一些關(guān)于這方面的實(shí)用教程，包括響應(yīng)式圖片，還有一個(gè)非常受歡迎的庫(kù)，那就是Bootstrap。

錯(cuò)誤四

網(wǎng)站過(guò)多刷新

錯(cuò)誤：創(chuàng)建的網(wǎng)站需要為每一個(gè)互動(dòng)而全面刷新頁(yè)面。

影響：類似于頁(yè)面臃腫(參見(jiàn)#4)，頁(yè)面加載時(shí)間的性能會(huì)受到影響。用戶體驗(yàn)缺乏流暢性，并且每次互動(dòng)都可能導(dǎo)致網(wǎng)頁(yè)短暫(或長(zhǎng)時(shí)間)的復(fù)位。

如何避免：快速避免這種情況的一個(gè)方法就是，通過(guò)測(cè)定回發(fā)到服務(wù)器的內(nèi)容是否是真正需要的。例如，當(dāng)不依賴服務(wù)器端資源的時(shí)候，客戶端腳本可用于提供直接結(jié)果。你也可以應(yīng)用AJAX技術(shù)或進(jìn)一步使用單頁(yè)的應(yīng)用程序“SPA”方法。流行的JavaScript庫(kù)/框架，如JQuery、KnockoutJS和AngularJS，能讓這些方法的采用變得容易得多。

錯(cuò)誤五

做了太多的無(wú)用功

錯(cuò)誤：開(kāi)發(fā)人員花了很長(zhǎng)的時(shí)間來(lái)創(chuàng)建web內(nèi)容。大量的時(shí)間花在了重復(fù)的任務(wù)上，或者自己敲代碼寫了很多。

影響：初始網(wǎng)站的發(fā)布和后續(xù)的更新時(shí)間過(guò)于冗長(zhǎng)。如果其他開(kāi)發(fā)人員也在在做同樣的工作，卻用了更少的時(shí)間和精力，那么你的開(kāi)發(fā)價(jià)值顯然就低了。手動(dòng)勞動(dòng)很容易出現(xiàn)錯(cuò)誤，而排除故障錯(cuò)誤需要更多的時(shí)間。

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

不要錯(cuò)過(guò)網(wǎng)上可用的幫助工具!例如，檢查在dev.modern.ie上的工具以簡(jiǎn)化測(cè)試(跨多個(gè)平臺(tái)和設(shè)備)以及排除故障。

你也可以通過(guò)實(shí)現(xiàn)流程自動(dòng)化以減少時(shí)間和錯(cuò)誤。這方面的例子是使用Grunt工具，例如它的自動(dòng)化功能可以減小文件(見(jiàn)第4點(diǎn))。另一個(gè)例子是Bower，可以協(xié)助管理庫(kù)/框架。至于web服務(wù)器本身?在例如Microsoft Azure Web Apps的幫助下，你可以快速創(chuàng)建一個(gè)網(wǎng)站，幾乎所有的開(kāi)發(fā)場(chǎng)景都可以很輕輕松松地規(guī)?；侥愕臉I(yè)務(wù)中!

***結(jié)語(yǔ)

通過(guò)識(shí)別這些常見(jiàn)的錯(cuò)誤，web開(kāi)發(fā)人員可以避免很多讓其他人飽受煎熬的挫折。我們不僅需要承認(rèn)錯(cuò)誤，還應(yīng)該清楚錯(cuò)誤的影響，并采取措施避免錯(cuò)誤，這樣才能有更好的開(kāi)發(fā)表現(xiàn)——并有信心完成任務(wù)!