摘要：前后端都要關(guān)注注入攻擊跨站腳本攻擊跨站請求偽造開放重定向這些安全性問題。前端也需要構(gòu)建自動化測試，包括獨立單元測試和端到端測試自動化，當然還有人工測試。

總體指導(dǎo)思想是前后端分離，后端同事提供線上API數(shù)據(jù)查詢接口或websocket接口，前端同事負責處理獲取到的數(shù)據(jù)、編寫展示的頁面、實現(xiàn)用戶交互；前后端都要考慮web開發(fā)的安全性問題，表單提交到數(shù)據(jù)庫前對用戶的輸入進行轉(zhuǎn)義、登錄避免明文傳輸密碼等。前后端都要關(guān)注SQL注入攻擊、跨站腳本攻擊、跨站請求偽造、開放重定向這些安全性問題。

最近在看《大型JavaScript應(yīng)用最佳指南》，作者講到，大型web應(yīng)用實際相當于一系列組件之間的互相通信，包括組件之間的組合和通信。在設(shè)計組件的時候不僅要從架構(gòu)可擴展性的角度考慮，還要從功能完備性的角度考慮。有兩種構(gòu)建組件的方法。其一，可以擴展已有的庫和框架，通過不斷擴展逐漸實現(xiàn)特定功能，其二，通過給組件傳入配置參數(shù)，告訴組件如何工作。我們要設(shè)計靈活的組件，就要把業(yè)務(wù)行為傳入組件，而不是在組件中直接編寫，這樣不同的組件就可以利用相同的無狀態(tài)業(yè)務(wù)邏輯函數(shù)。

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

靜態(tài)資源的管理工具，包括對css/js/pictures等文件進行合并、壓縮、優(yōu)化，以及自動替換。grunt/gulp 是任務(wù)管理器，引入 watch 模塊可以實現(xiàn)頁面的熱更新；webpack通過loaders來處理靜態(tài)文件。webpack-dev-server 可以實現(xiàn)熱更新。

API數(shù)據(jù)管理，后端提供完整的API文檔和使用postman提供測試數(shù)據(jù)接口，最關(guān)鍵的是確定成功或失敗時分別返回的數(shù)據(jù)結(jié)構(gòu)。后端還沒開發(fā)好或者沒有測試數(shù)據(jù)時，前端可以模擬API，推薦一個工具：mockjax；一些全家桶也有配備這類工具。

前端要構(gòu)造相應(yīng)的通知系統(tǒng)，如服務(wù)器出錯、連接超時、參數(shù)無效、被退出等，前端要能優(yōu)雅地報錯，并且盡量減少單點錯誤對整個系統(tǒng)的影響，引導(dǎo)用戶嘗試恢復(fù)正常，如刷新，重新登錄等，前端也需要記錄日志，這樣工程師可以快速debug。

關(guān)于跨域問題，這個暫時todo，等我有足夠多的實踐經(jīng)驗再來補充，目前是使用chrome的CORS插件，因為上線后就不存在跨域的問題；如果前端需要調(diào)用第三方接口存在跨域問題，我目前的做法是找后臺調(diào)用我要的第三方接口，然后后臺再提供一個新的接口給我，這樣就不存在跨域問題，但是前后端分離的話，調(diào)用第三方接口出現(xiàn)跨域問題不是也應(yīng)該由前端來解決嗎？前后端分離的話自己可以起一個node中間層服務(wù)器，然后本地server就可以支持代理其他域下的api的功能，即proxy，在ajax請求時突破前端同源策略的限制。

前端團隊中有多個人同時寫代碼，所有文檔規(guī)范是必須的，不然可能容易存在命名沖突，css樣式覆蓋，函數(shù)重寫，z-index互相攀比的問題。在js方面，要推薦按閉包的方式來寫，或者根據(jù)技術(shù)選型按組件模式來開發(fā)；因為我們項目中有打包工具，所以開發(fā)人員可以用ES5也可以用ES6，ES6更像是一門編程語言，適合我們養(yǎng)成面向?qū)ο缶幊痰牧晳T。css方面，同樣因為我們項目中有打包工具，所以用純CSS/LESS/SASS寫都可以接受，看開發(fā)者決定，還要進行css代碼庫管理，css樣式命名管理，防止無意義的命名，這個建議讀一下bootstrap.css。

前端也需要構(gòu)建自動化測試，包括獨立單元測試和端到端(E2E)測試自動化，當然還有人工測試。使用的工具有Jasmine和Selemium。追求開發(fā)完成后測試發(fā)現(xiàn) 0 個bug是我們一直追求的目標，畢竟誰也不希望每天被測試的郵件轟炸，特別是對于我這種不喜歡跟測試講話的人，整個測試過程完成到上線都沒有測試找過我，系統(tǒng)也沒有提示說我有bug，這是最爽的一件事。