提綱
- 整體把握，從設計稿入手——技術選型
- 並行開發，從實現靜態頁面開始
- 前端自動化
- 前端js邏輯
- 前后端集成
- 小問題集合
- 總結
1.整體把握，從設計稿入手 —— 技術選型
新項目到手，算是運氣好，設計稿都已經全部完成了，40多個頁面。不用擔心邊做邊改的情況。能夠提前確定重用性和一些規范。
項目主要要求：
1. 兼容PC、微信、移動端，兼容現代瀏覽器，IE9+等
1. 嵌入到安卓、ios客戶端和微信，要求頁面獨立
1. 使用node.js作為中間件
我負責前端頁面和邏輯，node是另一個同事負責，前端架構由前端組長負責。
前端框架選型是開發前很重要的准備：
1. UI框架: 考慮過uikit、amazeUI、bootstrap，最終選擇bootstrap+自定義樣式，主要原因公司其他項目也用的bootstrap。對我來說這三個框架我之前都沒用過，作為一個一年經驗的前端很可笑吧，其實我覺得也沒啥，馬上學便是。
1. js庫: 考慮過jquery和zepto，最終選擇jquery
1. 前端工具： gulp,browserify，bower，less
1. node用的express，node那個同事熟悉
1. 前端模板用的swig
1. greensock動畫庫
2.並行開發，從實現靜態頁面開始
經過一個星期的前期准備和調研，前端基本的架子搭起來了，gulp、bower、 規范。js這一塊自動化還未准備就緒，node后台的架子也在搭建。各方進度都有不一致的地方，考慮到並行開發，我建議我先做靜態頁面，node后台繼續搞自己的，組長繼續研究架子。
這樣也好，專心寫頁面，能更專注的考慮html、css方面的東西。做完40個頁面總共花了8的工作時間（未加班），我覺得還是比較快了。
css方面從bower里引入了bootstrap的部分less源碼，再覆蓋一些源碼需要修改的樣式，然后更多的是自己定義的樣式。這個過程中已經考慮了很多重用、結構、命名問題，所以前期4天的時間我的進度都很慢，因為邊寫就邊優化了，磨刀不誤砍柴工，后4天就差不多完成了30個頁面。以下是文件結構，按照bootstrap規范：
3.前端自動化
靜態頁面寫完了，剛好組長架子、工作流這一塊也搭好了，后台也做了一些功能等待集成。
組織js用到了browserify，前后端的js邏輯都能用到require了。
項目比較緊，組長這一個架子都還沒徹底搞懂，還是挺復雜的，之后松點了將會好好看看。
自動化帶來了更高效率的開發，監聽、打包、壓縮、iconFont、require等前期做好了配置，后面幾乎就不需要改動了，對於前端來說，這些都是必不可少的技術要求。
4.前端JS邏輯
JS這一塊，為每個頁面配置了viewName，寫在了base.html里，所有頁面將繼承base，這一塊當然就是開始說的swig模板，相應文件夾的里所有html文件的js將會引入page->{% viewName %}->index.js。
browserify把一些依賴js掛到了全局，比如：jquery，jq-validate，jq-form，greensock。
特定的頁面配置了pageConfig，用來獲取一些數據。
觸發事件都用事件代理控制，組件間通信用trigger觸發器。
view里：html寫好dom節點和動態參數，自動化工具會自動拼接節點生成swig前端模板，在其他js里面就可以require了。傳入相應參數，就可以輸出到頁面了，如圖自定義popup組件和list組件很方便就能調用。
5.前后端集成
好像沒啥好說的，后端准備好接口，前端調用就行了，某些問題上需要多點溝通，保證需求理解一致。
6.小問題集合
- gulp iconFont某些字體圖標殘缺，暫時icomoon手動更新
- 移動端 active 失效: -webkit-tap-highlight-color: transparent;
- html5 video audio很多事件現代瀏覽器支持不好，特別是移動端的瀏覽器，可以用這個地址做測試http://www.w3.org/2010/05/video/mediaevents.html
7.總結
- 整體把控、注重命名和重用，出現覺得不合理的和需要重用的就應該優化。
- 如果有條件先實現靜態頁面，再最后來寫js邏輯，這樣開發應該會更快。
- 因為多少自己也做過設計，也知道有時候作為前端感覺設計師不放過每一個細節讓人覺得有點累，但是我們應該尊重設計師，不要有任何抱怨因為這是他們的責任，當然我說這一點並不是我之前抱怨他們了，而是每當很忙很累的時候，看着設計師提上來的UI問題時候，我這樣激勵過自己，覺得這一點還是挺好，讓我更積極，希望大家能多換位思考。
- 前后端做好各自的單元測試，盡量保證自己代碼問題會是最少的，這樣集成成本就變得低了。
- 用到第三方框架和庫且不熟悉的情況下，遇到需求問題，應該首先從三方文檔里找解決需求的辦法，實在引入的三方庫沒有解決方案，再考慮自己解決。
- 前期約定好各種規范
http://www.cnblogs.com/1wen/p/4477894.html