webapp項目前端總結

提綱

• 總體把握，從設計稿入手——技術選型
• 並行開發，從實現靜態頁面開始
• 前端自動化
• 前端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.小問題集合

1. gulp iconFont某些字體圖標殘缺，暫時icomoon手動更新
2. 移動端 active 失效: -webkit-tap-highlight-color: transparent;
3. html5 video audio不少事件現代瀏覽器支持很差，特別是移動端的瀏覽器，能夠用這個地址作測試http://www.w3.org/2010/05/video/mediaevents.html

 

7.總結

1. 總體把控、注重命名和重用，出現以爲不合理的和須要重用的就應該優化。
2. 若是有條件先實現靜態頁面，再最後來寫js邏輯，這樣開發應該會更快。
3. 由於多少本身也作過設計，也知道有時候做爲前端感受設計師不放過每個細節讓人以爲有點累，可是咱們應該尊重設計師，不要有任何抱怨由於這是他們的責任，固然我說這一點並非我以前抱怨他們了，而是每當很忙很累的時候，看着設計師提上來的UI問題時候，我這樣激勵過本身，以爲這一點仍是挺好，讓我更積極，但願你們能多換位思考。
4. 先後端作好各自的單元測試，儘可能保證本身代碼問題會是最少的，這樣集成成本就變得低了。
5. 用到第三方框架和庫且不熟悉的狀況下，遇到需求問題，應該首先從三方文檔裏找解決需求的辦法，實在引入的三方庫沒有解決方案，再考慮本身解決。
6. 前期約定好各類規範