一眨眼，快三個月沒有寫部落格了。一直在為自己沒有寫部落格而懊惱，忙過這段時間，好好總結一下。
新項目主要是自己一個人在寫，先搭建了一個初步的架構，用了我并不熟悉的angular，這個過程中，慢慢也熟悉了angular，同時也優化了自己的項目架構。
這兩個多月裡一直處在高強度的工作中，項目是一個面向使用者的創作中心，涉及到資料、語音、圖檔、地圖等等。
地圖上的互動很複雜，由于項目需要還會同時用兩種地圖，一個谷歌一個高德，谷歌主要面向國外資料，高德面向國内資料，
兩個地圖可以任意切換，但是内容都要保持一緻，并且最好能夠互相補充，地圖開發商的接口不一樣，很多邏輯的實作方法也會不一樣，
邏輯雖然是通的，但是适應每一個地圖的代碼卻略有不同。這是這個項目比較難的一個地方。
使用angular後，前後端進行了分離，前端需要去調用後端接口，後端接口比較抽象，常常不能一次性拿到自己想要的資料，請求一個接口擷取到内容之後往往還需要根據目前資料，
再次去請求另一個接口，前後端分離之後對前端的要求其實就更高了，同步明明可以很簡單就解決的問題，異步之後就需要花費更多的邏輯去處理。
現在想想這個項目開發過程中會發生很多事情：
了解需求、打通資料邏輯、和産品交流，質疑産品設計的問題（修正一些問題或者還是回去照着産品的做）
畫娃娃圖（用例）、初步技術設計，搭建開發架構、定好主要接口
看原型圖、看設計稿互相對比、提出疑問、糾正錯誤、提出前端方面的建議
和後端協商資料庫結構、顧忌以後的需求擴充、商量資料細節、争論命名（其實英文都不好 O(∩_∩)O ）
被壓縮開發時間，表示不滿，然後抗議無效
調整優化前端架構、維護webfont、找插件或者寫插件
熟悉angular，踩過那些坑
後端和我都是第一次用cors跨域資源共享，折騰了一遍
開發：時間緊、功能多、難度大、每天到五點的時候就感覺全身疼痛，寫不動了
每天：加一個小時班、加兩個小時班、最後快提測時到同僚家加班
項目bug多、開發過程中忽略很多細節，實際已經把測試時間也算進開發時間裡，先粗再細，也算一種讨巧和無奈吧
在壓縮的時間中挑戰自我，然後失敗，上線延期/(ㄒoㄒ)/~~
負面情緒猛漲然後慢慢瀉下，自己經曆了痛苦、收獲了經驗、看到了成長
說說項目架構：
angular + browserify + gulp + bower + less
angular 主要使用了擴充： angular-ui-router、angular-bootstrap
browserify管理打包js
bower管理三方庫
gulp自動化建構項目
項目根目錄如下：
build檔案夾是建構工具最後生成的部署代碼，src是所有源代碼，temp隻是一些臨時檔案
源碼根目錄如下：
app.js注冊了根子產品：
引入src目錄下的config.js、http.js，最後browserify會編譯app.js，gulp輸出到 build->app.js
common：
存有所有img資源，
一些全局js放在js檔案夾（例如：我放置了環境配置和配合rem的resize），
三方的css庫、webfont和自己抽象的css，最後會把所有的less引入到app.less中，編譯為一個app.css到build
modules：
所有業務按子產品寫在modules裡：
modules.less
modules目錄下有一個modules.less，所有子產品裡的less會被引入到modules.less裡，common的app.less會引入此檔案
js&html：
js代碼按控制器、指令和服務劃分，控制器控制頁面和邏輯，公用的頁面或者獨立的插件抽離為指令，服務寫背景請求接口
每個子產品下同樣有app.js，用來注冊子產品和引入目前子產品下所有的js，最後編譯成一個檔案。
config控制路由
templates管理子產品html，最後被打包到build（less會被打包到common的app.css裡），如下：
test子產品的app.js生成到build->modules->test->js->test.js，生成出的js我命名為子產品的名字test.js，這樣是為了在入口html引入js資源的時候，不想結尾看到的全是app.js，最終如下：
這樣看起來比較清晰
此架構的優勢：
按子產品換分，每個子產品的js代碼最終打包生成為一個子產品js，在html引入子產品資源時很友善
less最終生成一個css，适用于單頁面應用
架構預設使用rem布局，可以參照架構裡的less代碼，支援webfont
友善開發，預設gulp任務用于開發，gulp deploy用于壓縮釋出
架構代碼已經開源到github，說這麼多也許看代碼更容易讓人明白： github位址 https://github.com/zimv/zmNgFrameWork
一些踩過的小坑和建議：
寫路由的方法有很多，連結後面帶參數如果用 url : "/test/:Id" 這種寫法，連結後面如果沒有參數，也必須要加上/，如： /test/，
寫成 /test 的話就會找不到路由。還是建議用 url : "/test?id" 這種寫法
用ui-bootstrap的modal插件時候，要把目前控制器的作用域傳給modal，否則，在沒有關閉目前modal時，頁面跳轉，modal就不會自動關閉
常常通過隔離作用域來達到作用域間的獨立，也會用到@、=、&的方式互相調用資料，但是一旦資料多了，寫起來就會很麻煩，
建議可以直接把目前scope傳給另一個作用域,比如：
這樣代碼要幹淨很多，擴充也不用再多寫參數
用了定時器，記得加上$scope.$apply()
某一個頁面功能太複雜，可以把一些子功能抽離成指令并且不要隔離scope，這樣代碼就不會全部揉在一起
小心重複送出資料，為按鈕做重複送出限制
為避免select出現空白選項，為select設定一個空值，顯示請選擇，初始化的時候把ng-model的值設定為空字元串
結語：
做項目成長的才會更快，但不一定成長的更好
高壓下容易産生負能量需要去訴說去釋放，需要時刻告訴自己，自己的目标是什麼
在寫代碼時，架構做過幾次調整，沒有最合适的架構，隻有不斷調整才能适應需求
ng1.5.5&md5-cache對架構稍微做了調整：
調整之後build目錄有所改變，之前重命名app.js為檔案名：test/test.js ,現在不重命名: test/app.js
有沒有人打賞？沒有的話，那我晚點再來問問。
關注大詩人公衆号，第一時間擷取最新文章。
如果你有購買鋼琴的打算，可以從這裡了解到在售資訊，價格實惠品質保障。
---轉發請标明，并添加原文連結---