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

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

最近在看《大型JavaScript應(yīng)用最佳指南》，作者講到，大型web應(yīng)用實(shí)際相當(dāng)于一系列組件之間的互相通信，包括組件之間的組合和通信。在設(shè)計(jì)組件的時(shí)候不僅要從架構(gòu)可擴(kuò)展性的角度考慮，還要從功能完備性的角度考慮。有兩種構(gòu)建組件的方法。其一，可以擴(kuò)展已有的庫和框架，通過不斷擴(kuò)展逐漸實(shí)現(xiàn)特定功能，其二，通過給組件傳入配置參數(shù)，告訴組件如何工作。我們要設(shè)計(jì)靈活的組件，就要把業(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)資源的管理工具，包括對(duì)css/js/pictures等文件進(jìn)行合并、壓縮、優(yōu)化，以及自動(dòng)替換。grunt/gulp 是任務(wù)管理器，引入 watch 模塊可以實(shí)現(xiàn)頁面的熱更新；webpack通過loaders來處理靜態(tài)文件。webpack-dev-server 可以實(shí)現(xiàn)熱更新。

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

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

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

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

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