本文章已經錄制視頻，地址是：http://v.youku.com/v_show/id_XODI3MjYyODI0.html
前端這兩年技術飛速發展，各種優秀框架層出不窮。本文不是討論各框架的比較，也不討論為什么我要用angular，而不用backbone；不討論為什么用requirejs，而不用browserify，seajs等。只是介紹平常我是怎么進行項目的前端架構。
一個成熟項目架構中應該具有哪些功能
* 快速的項目生成器——快速生成項目主體架構，單步實現controller，單步實現view，實現根據router自動生成view，controller
* 靜態資源的管理——基於bower
* css動態編譯——基於sass，compass實現css嵌套寫法，跨瀏覽器實現css前綴等。
* 解耦，基於模塊開發——基於requirejs
* mv*框架——基於angular實現view-model雙向綁定。
* 代碼管理——git管理代碼版本，git submodule實現公共模塊引入。
* 本地mock數據——基於express擴展，可支持get及post請求模擬
* 打包壓縮上線——基於npm模塊進行打包壓縮，修改后時時刷新頁面
項目生成器
項目生成器我已經發布為npm公共模塊，地址是：
https://www.npmjs.org/package/generator-webbp
注意：因為項目生成器中默認你電腦支持sass，compass編譯所依賴的環境，如果項目中最后跑步起來，請確認是否因為這個原因導致。當然有任何問題，歡迎加我的群討論qq:236949405。
* 快速生成項目架構：
yo webbp
根據提示操作即可。生成后，打開項目目錄，1. npm install 2.grunt 即可自動打開瀏覽器看到項目
* 單步生成controller
yo webbp:controllers detail.about.contact
即可生成如下文件：
|controllers
|detail
|about.js
|contact.js
detail.js
其中detail.js中會自動加載about.js及contact.js
*單步生成view
yo webbp:views detail.about.contact
生成如下文件：
|views
|detail
|about.html
|contact.html
detail.html
*生成routes，可自動關聯view及controller
yo webbp:routess detail.about.contact
此命令會自動調用controller，及view命令。
而生成routers代碼為：
define(['./states', '../cons/simpleCons'],
function (stateModule, simpleCons) {
stateModule.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("detail", {
abstract: true,
resolve: {
instanceBasicPromise: [ '$stateParams', function( $stateParams){
}]
},
url: "/detail",
controller: 'detailController',
templateUrl: simpleCons.VIEW_PATH + 'detail.html'
})
.state("detail.about", {
url: "/about",
views: {
detail: {
templateUrl: simpleCons.VIEW_PATH + 'detail/about.html',
controller: 'detail.aboutController'
}
}
})
}
]);
})
其中controller及view文件都會自動生成。
靜態資源的管理——基於bower
項目中引入的angularjs，jquery，bootstrap等基於bower進行依賴管理。
另外，我還發布了一個基於angular-form的擴展叫simple-form，地址是：https://github.com/cc17/angular-simple-form。是目前為止我覺得使用最方便的angular-form，基於form的model配置，並實現form-data表單提交數據和view的雙向綁定。誰用誰知道，有問題歡迎提bug給我。
css動態編譯——基於sass，compass實現css嵌套寫法，跨瀏覽器實現css前綴等
這個已經不屬於新姿勢了，大家都知道為什么要用這個。如果你不知道這個，你肯定知道less吧
* 實現嵌套寫法
.block-a{
.block-b{
.block-c{}
}
}
* 實現跨瀏覽器寫法
該死的瀏覽器各種前綴，真是要醉了的節奏啊。用compass只要這么寫就會編譯成各瀏覽器識別的css，是不是很奇妙。
div{
@include border-radius(4px);
}
* 跟寫js一樣寫css，定義變量是不是很爽
具體怎么用，大家去google吧。這個很簡單。
解耦，基於模塊開發——基於requirejs
很高興的是前端代碼越來越多了，我們再也不是只會切頁面的美工了，很不幸的是我們永遠不知道自己幾點下班了。哎
這么多代碼，我們再也不能只在一個 bigbig.js文件里放置了。怎么辦呢，對分開，解耦，模塊化開發。 a.js, b.js ,c.js,怎么處理依賴？ seajs，requirejs，還有個browserify等等，你還可以自己寫個簡單的。具體應該用那個，不討論，我就用requirejs。
mv*框架——基於angular實現view-model雙向綁定
都說不要重復造輪子了，還是有各種牛逼的新框架造出來。也就說說而已，不創新，哪有技術的發展。各種框架優劣也不討論，我的生成器是基於angular的。還要支持ie6，7的我只能說句抱歉了。使用angular有什么好處：雙向綁定，依賴注入，mvc，directive聲明式的擴展html標簽。。。太多了。用了之后你才驚訝發現，擦，原來寫好多行的代碼 ，幾行就搞定。媽媽再也不用擔心我加班了——不過實際上，我們也沒早下班哈。
代碼管理——git管理代碼版本，git submodule實現公共模塊引入
git，svn有什么區別呢？
1.GIT是分布式的，SVN不是 2.GIT把內容按元數據方式存儲，而SVN是按文件 3.GIT分支和SVN的分支不同 4.GIT沒有一個全局的版本號，而SVN有： 5.GIT的內容完整性要優於SVN
另外github上有太多好東西，所以git用的人是越來越多了。
另外git還有個submodule的東西挺好用的。假如你有多個子項目，需要將通用的組件提取出來，submodule很適合。
本地mock數據——基於express擴展，可支持get及post請求模擬
前后端分離，協同合作開發，提高效率，但是有個問題，我們需要本地模擬后端的數據接口。在不會nodejs之前，我用的是wamp框架，本地啟動server服務。現在nodejs發展這么迅速，各種自動化工具都可以基於nodejs開發。所以我在這個代碼生成器中基於express擴展，實現對get和post請求mock。另外還可以模擬接口延時。
打包壓縮上線——基於npm模塊進行打包壓縮，修改后時時刷新頁面
最后一個問題，項目開完后，需要打包壓縮上線。這也是自動化的，我們只需要在生成的項目中grunt build，最后把這個build文件發布到線上服務器即可。
總結：其實說了很多廢話，總的來說，我希望這個項目模板生成器可以滿足你80%以上開發需求。simple-form也希望大家試用下，給我提bug。就這樣把，越寫越不想寫，因為感覺涉及的知識點太多，如果往下寫就沒邊了。