隨著前後端分離技術的普及，React、Vue、和Angular等前端框架成為了許多專案的首選。在過去兩年的工作經驗中，我接觸到了眾多新進的前端開發者，包括大學生、外包工程師和新創公司的技術人員。他們中的一些人在學校學習這三大框架，其他人則透過自學或參加資策會等前端培訓課程來提升自己的技能。
這些年輕開發者具有幾個共同的優點：
- 自信與驕傲：他們具備一名工程師應有的自信和專業傲氣。
- 邏輯思維：掌握了撰寫程式的基本邏輯。
- 技術掌握：對React、Vue或Angular中至少一項有較深的了解。
- 學習與適應：對新技術能快速學習並適應。
雖然這些是值得肯定的發展，但我也注意到許多參加過培訓課程的新手開發者常常在實際工作中遇到類似的問題。以下我將以他們在實現頁面跳轉時最常犯的錯誤為例進行說明。
新手常見的 SPA 實踐誤區
React、Vue 和 Angular 是目前流行的前端框架，它們主要基於 JavaScript (JS) 並普遍採用單頁應用（SPA）架構。這種架構允許透過 JS 在不刷新頁面的情況下更新網頁內容，從而提升用戶體驗。然而，這也常導致新手開發者過度依賴 JS 進行頁面跳轉的問題。
不使用 <a> 標籤進行頁面轉換時所引起的問題
在 SPA 的實現中，一些新手會傾向於使用 JS 控制所有元素，例如【無差別使用JS 進行頁面跳轉】，從而忽略了 HTML 原生元素的正確用途。例如，他們可能會用 <div>、<button> 或 <span> 來取代本應使用的 <a> 標籤。這樣的做法不僅影響了元素的語義正確性，也可能對網站的可訪問性和搜索引擎優化（SEO）造成不利影響。這種現象反映了一種誤解：新手可能認為全用 JS 控制非常方便和快樂，卻忽視了網頁開發中應遵循的最佳實踐。
新手需要關注的四大網站要素
由上面的問題出發，以下我們講解一個完整的網站，至少應該具備四個基本要素，這可能聽起來很顯而易見，但它們對於網站的成功運作至關重要：
- 可以看 – 可看性（Visual Accessibility）
- 可以用 – 可用性（Usability）
- 可以搜 – 可檢索性（Searchability）
- 可以記錄 – 可記錄性（Traceability）
可以看 – 可看性（Visual Accessibility）- 網站可視性檢核清單：確保最佳用戶體驗
在當前快速演進的網絡環境中，網站的可視性（Visual Accessibility）是提升用戶滿意度和網站性能的重要因素。無論是短期的 Demo 網站還是長期運營的官方網站，以下的檢核清單都是確保網站在各類設備和瀏覽器上提供一致體驗的關鍵：
- 確認網站類型：
- 判斷網站是臨時的演示平台還是需要長期維護的正式網站。
- 短期 Demo 網站可能對顯示質量的要求較低，但長期網站需保持高標準。
- 設計一致性：
- 確保網站在不同裝置（桌面、平板、手機）和不同瀏覽器上的顯示效果一致。
- 進行跨平台測試，確認無破版或顯示不一致的問題。
- 響應式設計的完整性：
- 檢查響應式設計是否能在各種屏幕尺寸和解析度上正常工作。
- 確保主要目標受眾（TA）常用的裝置顯示無誤。
- 視覺和交互細節：
- 確認所有頁面元素在視覺上與 UI 設計接近，包括顏色、布局和字體。
- 檢查圖片是否清晰，無模糊或毛邊問題。
- 驗證動畫、滑動和轉場效果是否流暢，無卡頓。
- 檢查手機版和桌面版間的交互是否存在衝突或不一致。
- 字型和可操作性：
- 調整不同裝置的字體大小和行高，確保文字清晰且易於閱讀。
- 不同瀏覽器間的 line-height是否有造成文字呈現不均 or 被截斷的現象
- 確保按鈕和可點擊的圖標大小適中，方便用戶操作，避免過小造成誤觸。
這邊簡單列舉這幾項常見的，當然細節可以很多，總歸一句話“必須確保在該類型的預覽上顯示正常”
可以用 – 可用性（Usability）
簡單說一句話【網站能否正常使用】，在開發和維護網站時，確保其可用性是至關重要的。網站的可用性不僅影響用戶體驗，還確保網站能在各種情況下穩定運作。以下是一些基本的檢核項目，這些項目將幫助開發者確保網站的功能流程正常並有效處理可能出現的問題：
- 功能流程檢查：
- 確認所有功能的正常流程是否運作無誤。
- 檢查每個功能的可逆流程，即用戶能否撤銷或回退其操作，並確保這些流程正確無誤。
- 錯誤訊息和處理：
- 為可逆和不可逆的流程設計清晰的錯誤訊息提示，以便用戶了解何時操作失敗及原因。
- 實施非預期錯誤的處理機制，包括系統錯誤、操作錯誤等，確保這些錯誤不會導致網站功能中斷或死機。
- 數據處理與安全：
- 檢查數據輸入和輸出過程中是否有適當的型態轉換和過濾措施，特別是對於 GET 請求或其他帶有用戶輸入的參數，以防止常見的安全威脅，如 SQL 注入(SQL injection)和跨站腳本（XSS）攻擊。
- 確保所有數據輸入點都有適當的驗證，防止數據錯誤或格式不正確的問題，如中文亂碼等。
這些基本的檢核項目對於任何網站的開發都是必不可少的，而對於那些有特定需求的網站，可能還需要額外的定制檢核標準。跟隨這個指南，開發者可以系統地提高網站的可用性，從而提供更穩定、更安全的用戶體驗。
可以搜 – 可檢索性（Searchability）- 提升網站的可檢索性：確保內容對搜索引擎友好
在現代網頁開發中，前端工程師經常使用各種前端框架來創建動態和互動豐富的單頁應用（SPA）。這些應用主要依靠 JavaScript 來處理數據和頁面轉換，看似提供了流暢的用戶體驗，但這種實踐可能會對網站的可檢索性造成隱患。
傳統的搜索引擎爬蟲在索引網站時，通常不會執行 JavaScript，這意味著它們無法識別由 JavaScript 動態生成的鏈接。如果網站內的頁面跳轉完全依賴於 JavaScript，而不是使用 HTML 標準的 <a> 標籤，那麼這些頁面可能不會被搜索引擎索引，從而影響網站的可見度。
關鍵措施提升SEO：
- 使用標準的
<a>標籤：- 確保所有的頁面跳轉都使用
<a>標籤，這不僅有助於爬蟲識別鏈接，也支持網站的標準導航結構，使其對搜索引擎更友好。
- 確保所有的頁面跳轉都使用
- 適應現代搜索引擎技術：
- 雖然像 Google 這樣的現代搜索引擎可以執行 JavaScript，並可能索引動態內容，但最好不要完全依賴這一功能。開發者應該了解並適應各大搜索引擎的技術能力和限制，以確保網站內容能被廣泛檢索。
- 增強爬蟲友好性：
- 考慮實施服務器端渲染（SSR）或靜態站點生成（SSG）等技術，這些技術可以在服務器上預先渲染頁面，使得搜索引擎爬蟲在訪問網站時即可看到完整的 HTML 內容。
通過這些策略，開發者不僅可以改善網站的用戶體驗，還可以確保網站在搜索引擎中有良好的表現，從而增加用戶訪問量和提升網站的整體可見度。
可以記錄 – 可記錄性（Traceability）- 網站可追蹤性：確保數據和行為的有效記錄
在現代網站開發中，確保網站具有良好的可追蹤性至關重要，這不僅有助於即時發現和解決問題，還能夠根據用戶行為和反饋進行有效的數據分析和網站優化。以下是實現高效可追蹤性的兩個主要策略：
- 錯誤追蹤與日誌記錄：
- 埋設錯誤追蹤日誌是監控網站運行狀態的關鍵。這包括在代碼中實施錯誤捕捉和日誌記錄機制，確保所有運行時錯誤都被記錄和存儲，方便開發團隊追蹤和及時修復。
- 網站應設計有權限管理的日誌檢視介面，使相關人員可以輕鬆訪問錯誤日誌，進行故障診斷和性能分析。
- 用戶行為追蹤：
- 利用如 Google Tag Manager（GTM）等工具，埋設追踪碼以收集用戶互動數據。這包括頁面瀏覽、點擊事件、表單提交等，這些數據對於理解用戶行為模式、評估營銷策略效果以及優化用戶體驗非常有價值。
- 確保這些數據的收集符合隱私法規和用戶同意，並透過數據分析提供實際見解，支持決策制定和網站改進計劃。
通過實施這些策略，網站開發團隊不僅可以有效地監控和優化網站的運行狀態，還能夠根據實際用戶行為進行有針對性的改進，從而提升網站的整體性能和用戶滿意度。
結論
在使用 React、Vue、Angular 等前端框架時，開發者應避免過度依賴 JavaScript 進行頁面跳轉，這是新手常犯的錯誤。合理地選擇何時使用 <a> 標籤與何時利用 JavaScript 實現跳轉，是提高網站性能與搜索引擎優化（SEO）的關鍵。
這種策略不僅有助於提升用戶體驗，還能保證網站在各種設備和瀏覽器上的可用性和可訪問性。開發者應根據功能需求和預期的用戶互動來決定使用哪種跳轉方式，這樣才能在提供動態互動的同時，也不失去對搜索引擎友好的特性。透過這些實踐，網站能在競爭激烈的數字市場中脫穎而出，達到更高的業務目標。
發表迴響