前端架構涉及到哪些範圍？

整體指導思想是先後端分離，後端同事提供線上API數據查詢接口或websocket接口，前端同事負責處理獲取到的數據、編寫展現的頁面、實現用戶交互；先後端都要考慮web開發的安全性問題，表單提交到數據庫前對用戶的輸入進行轉義、登陸避免明文傳輸密碼等。先後端都要關注SQL注入攻擊、跨站腳本攻擊、跨站請求僞造、開放重定向這些安全性問題。

最近在看《大型JavaScript應用最佳指南》，做者講到，大型web應用實際至關於一系列組件之間的互相通訊，包括組件之間的組合和通訊。在設計組件的時候不只要從架構可擴展性的角度考慮，還要從功能完備性的角度考慮。有兩種構建組件的方法。其一，能夠擴展已有的庫和框架，經過不斷擴展逐漸實現特定功能，其二，經過給組件傳入配置參數，告訴組件如何工做。咱們要設計靈活的組件，就要把業務行爲傳入組件，而不是在組件中直接編寫，這樣不一樣的組件就能夠利用相同的無狀態業務邏輯函數。

開發的技術框架，如 vuejs, reactjs, angularjs; 還有一些腳手架，如 vue-cli; 還有一些全家桶，如vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)。

靜態資源的管理工具，包括對css/js/pictures等文件進行合併、壓縮、優化，以及自動替換。grunt/gulp 是任務管理器，引入 watch 模塊能夠實現頁面的熱更新；webpack經過loaders來處理靜態文件。webpack-dev-server 能夠實現熱更新。

API數據管理，後端提供完整的API文檔和使用postman提供測試數據接口，最關鍵的是肯定成功或失敗時分別返回的數據結構。後端還沒開發好或者沒有測試數據時，前端能夠模擬API，推薦一個工具：mockjax；一些全家桶也有配備這類工具。

前端要構造相應的通知系統，如服務器出錯、鏈接超時、參數無效、被退出等，前端要能優雅地報錯，而且儘可能減小單點錯誤對整個系統的影響，引導用戶嘗試恢復正常，如刷新，從新登陸等，前端也須要記錄日誌，這樣工程師能夠快速debug。

關於跨域問題，這個暫時todo，等我有足夠多的實踐經驗再來補充，目前是使用chrome的CORS插件，由於上線後就不存在跨域的問題；若是前端須要調用第三方接口存在跨域問題，我目前的作法是找後臺調用我要的第三方接口，而後後臺再提供一個新的接口給我，這樣就不存在跨域問題，可是先後端分離的話，調用第三方接口出現跨域問題不是也應該由前端來解決嗎？先後端分離的話本身能夠起一個node中間層服務器，而後本地server就能夠支持代理其餘域下的api的功能，即proxy，在ajax請求時突破前端同源策略的限制。

前端團隊中有多我的同時寫代碼，全部文檔規範是必須的，否則可能容易存在命名衝突，css樣式覆蓋，函數重寫，z-index互相攀比的問題。在js方面，要推薦按閉包的方式來寫，或者根據技術選型按組件模式來開發；由於咱們項目中有打包工具，因此開發人員能夠用ES5也能夠用ES6，ES6更像是一門編程語言，適合咱們養成面向對象編程的習慣。css方面，一樣由於咱們項目中有打包工具，因此用純CSS/LESS/SASS寫均可以接受，看開發者決定，還要進行css代碼庫管理，css樣式命名管理，防止無心義的命名，這個建議讀一下bootstrap.css。

前端也須要構建自動化測試，包括獨立單元測試和端到端(E2E)測試自動化，固然還有人工測試。使用的工具備Jasmine和Selemium。追求開發完成後測試發現 0 個bug是咱們一直追求的目標，畢竟誰也不但願天天被測試的郵件轟炸，特別是對於我這種不喜歡跟測試講話的人，整個測試過程完成到上線都沒有測試找過我，系統也沒有提示說我有bug，這是最爽的一件事。