12個Web開發(fā)工程師會犯的錯誤，有你嗎？
英文 | https://blog.bitsrc.io/12-mistakes-newbie-web-developers-make-beafb9d8a497
翻譯 | web前端開發(fā)
1、輸入驗證不完整
畢竟，用戶是人類，因此他們在填寫信息（例如手機號碼或電子郵件地址）時可能會犯錯誤。
這就是為什么開發(fā)人員使用前端驗證來防止他們犯此類錯誤的原因。最新的前端框架使實施客戶端驗證變得非常容易。
因此，大多數時候，新手開發(fā)人員僅在客戶端進行輸入驗證。
但是，通過禁用JavaScript，可以輕松地繞過這些客戶端驗證。因此，也有必要對用戶輸入實施服務器端驗證。
如果你尚未進行服務器端驗證，則你的應用將很容易受到諸如SQL Injection之類的黑客的攻擊，該攻擊在Web應用程序安全風險排名第一。
因此，如果你要接受任何類型的用戶輸入，請始終確保在客戶端和服務器端都進行驗證。
由于共享組件是獨立使用和維護的，因此雙方（客戶端和服務器）的開發(fā)人員都可以更輕松地維護它們并保持同步。這樣可以確保驗證規(guī)則在兩端都相同。
2、跨瀏覽器不兼容
在大多數情況下，開發(fā)過程都有嚴格的時間表。結果，開發(fā)人員在進行測試應用程序時往往只使用一個瀏覽器。如果你以后有時間在跨瀏覽器中對其進行測試并解決問題，那沒關系。
但是，如果你沒有這么多的時間，那么在開發(fā)過程中，最好在跨瀏覽器中測試應用程序。
這是不可以忽略的東西。
你至少要在三款以上的主流瀏覽器（例如Chrome，Firefox和Microsoft Edge）中測試你的應用程序。同樣的頁面，在Chrome中沒有問題，但是在Firefox中可能會出現很多問題。
所以盡可能的讓你的Web應用程序在跨瀏覽器預覽是也保持友好。避免使用特定的瀏覽器代碼。
3、過度使用圖書館
在你的應用程序中，使用許多庫會增加分發(fā)包的大小，并增加應用程序的構建時間，這最終也會增加頁面加載時間。
因此，將許多npm軟件包添加到Web應用程序時要小心。如果你可以花很少的時間編寫代碼，同時可以替代庫能完成的工作，則一定避免使用庫，手寫源碼。
使用庫時，請注意上次提交日期以及該庫具有的GitHub star數量。如果是不維護庫，在應用程序中使用它，可能會有安全漏洞，存在安全隱患。
4、從一開始就不遵循響應式設計
有了移動優(yōu)先，將為你后面的開發(fā)需求打下基礎。并且有了響應式開發(fā)設計，有助于加強平板電腦和臺式機的設計。移動優(yōu)先設計消除了不必要的用戶界面裝飾并改善了用戶體驗。
5、跳過圖像優(yōu)化
優(yōu)化圖像大小對于減少Web應用程序的帶寬使用至關重要。想象一下，你的主頁有五個圖像，每個圖像都在5MB或更大。如果用戶沒有足夠時間等到該頁面全部加載完的話，這些潛在的客戶，就會隨之損失。
將SVG用于徽標，圖標和簡單圖像，而不要使用JPG或PNG。你可以使用許多免費的在線工具來優(yōu)化JPG和PNG圖像，因此請不要跳過圖像優(yōu)化。
6、忽略技術搜索引擎優(yōu)化
許多新開發(fā)人員都忽略了對其開發(fā)的網站或Web應用程序進行搜索引擎優(yōu)化（SEO）。這可能是由于缺乏SEO技術知識或缺乏開發(fā)時間。但是忽略它是一個很大的錯誤。
大多數用戶使用搜索引擎查找網站。因此，從客戶的角度來看，SEO非常有價值。因此，如果你以開發(fā)人員的身份忽略了SEO優(yōu)化，則該網站將在搜索結果中排名以下，并且客戶將不滿意。
作為Web開發(fā)人員，你需要從開始構建Web應用程序的那一刻起就開始考慮SEO，而不是等到它的結束時，才開始考慮SEO優(yōu)化。否則，可能會導致大量不必要的返工。這里有一些提示，供你在開發(fā)時遵循，
確保網站架構可爬
優(yōu)化網站以縮短加載時間
使用智能反向鏈接
保持對W3C編碼的驗證（你可以使用W3C標記驗證服務）
消除重復的內容
使用圖片添加alt標簽
7、過多的手動測試
開發(fā)人員不應浪費寶貴的開發(fā)時間來進行手動測試。手動測試不可重復使用，并且很無聊且耗時。作為一個新手，你很有可能最終會進行過多的手動測試。相信我，當你一次又一次填寫相同的表格時，你會很快感到沮喪。
自動化測試用例的初始設置可能會花費一些時間，但是一旦自動化測試，你就可以在任何地方重用它們。這也增加了你對自動化測試過程的信心。你可以使用CI / CD管道和預提交掛鉤來進行自動化測試并提高開發(fā)和測試效率。
8、不遵循網絡標準
有適當的標準可以確保以通用的方式正確完成工作。Web標準可幫助開發(fā)人員創(chuàng)建能夠以相同質量工作的應用程序。
如今，大多數開發(fā)人員都是自學成才的，大多數時候，他們是從在線教程中學習的。在大多數情況下，這些教程沒有提到正確的標準，因此，你最終不了解它們。
例如，在編寫HTML時，你需要使用語義元素來根據Web標準構造網頁。
你可以從whatwg.org了解所有最新的HTML標準。遵循正確的標準還可以使你的應用程序更易于訪問。
實施這些標準是為了使具有國際上不同類型需求的用戶可以更輕松地訪問Web內容。因此，請確保你遵循這些標準。
9、編寫Vanilla CSS
現在是2021年，你不再需要編寫普通CSS。開始使用CSS預處理程序，例如Sass，Stylus或Less。如果你使用的是React，請使用樣式化組件（CSS-in-JS）。新手開發(fā)人員經常會因為學習曲線而犯下忽略它們的錯誤。
如果尚未使用CSS預處理程序，例如Sass / Stylus / Less，請開始使用。
與Web應用程序中的普通CSS相比，使用CSS預處理器或樣式化組件有很多優(yōu)點。CSS預處理器和樣式化組件都允許你維護干凈的代碼體系結構。你可以使用更少的代碼來進行更多的樣式設計，從而提高開發(fā)效率。
以Sass為例，它提供了嵌套，因此你可以使用嵌套的語法和有用的函數，例如顏色處理，數學函數等。你也可以使用Sass來定制Bootstrap，因為它也是用Sass編寫的。同樣，樣式化組件具有增強的可重用性和高一致性。樣式化組件將消除你對覆蓋全局作用域選擇器的擔心。因此，是時候繼續(xù)編寫普通CSS了。
10、在HTML文件中編寫CSS和JS
這是本書中最古老的錯誤之一，但有開發(fā)人員仍然在這樣使用。有時是因為這是當時比較容易做的事情，但是容易做的事情并不總是正確的。這是一種不好的做法，會使你的代碼雜亂無章，并且很難測試和調試。安全漏洞和許多其他問題可能會發(fā)生。
始終編寫JavaScript和CSS來分隔文件并維護適當的項目體系結構。
11、忽略代碼格式和注釋
如果你看到一組沒有縮進的JavaScript代碼行，無用的空格，無用的換行符和不良的命名約定，你會是一種什么樣的體驗？
但是，新手開發(fā)人員很有可能會這樣做，不寫注釋，很多無用的空格，換行符，沒有意義的命名等等。
而經驗豐富的開發(fā)人員不會這樣做，因為他們知道查看格式不正確的代碼有多少麻煩。
所以，建議新手去了解一下有關所使用語言的正確命名約定，在命名函數或變量時，使用正確的拼寫以及在IDE中使用自動代碼格式化工具。
有經驗的開發(fā)人員需要遵循良好的編碼習慣，在代碼中添加有意義的注釋。添加注釋的目的是為了記錄你的代碼，以便將來其他開發(fā)人員，甚至你自己都可以輕松理解這些代碼。你可以使用注釋來定義變量，函數，類名以及代碼的高級功能。
遵循正確的格式設置和注釋操作，會讓你查找代碼中的錯誤也變得更加容易。
12、過度依賴jQuery
不再依賴jQuery的主要原因是，jQuery可以做的任何事情，純JavaScript或TypeScript都可以做得更好，更快。
今天你肯定會使用Vue，React或Angular之類的框架和庫，因此你不需要過度依賴jQuery。添加jQuery只會使你的應用程序更重。
不依賴jQuery的另一個原因是，你將很難適應新的框架，因為它不使用通用語法，并且具有一些不同的DOM實現。
我并不是說你根本不應該學習jQuery，因為許多項目仍在使用它。但是，你絕對不可過度依賴它，如果可以的話，請停止依賴JQuery。
最后的想法
在文中，我們討論了新手開發(fā)人員大多數時候會犯的12個常見錯誤。避免這些錯誤將有助于你成為更有效率的開發(fā)人員并開發(fā)更好的應用程序。希望本文能幫助你將來避免這些錯誤。
這就是本文的全部內容，感謝您的閱讀，并祝您編程愉快！
本文完?
