使用requirejs + backbone 來設計web app

國內外大多數人喜歡用jquery來做開發，我也看到requirejs官方也發佈了一個require-jquery的集成庫。正好藉着到新公司項目的需要，我也基於require-jquery做了基礎框架的設計。主要是爲了以後方便多人模塊化的開發，不太喜歡頁面零散而且混亂的JS代碼。隨後花了3 4天研究了一下backbone的源碼，發現其不論是針對web還是mobile，都比較實用。而且從Underscore那邊引入很多好的數據結構，還有簡單又方便的Model,View基礎對象.這正是我想要的。接下來，我將像大家展示一些基本的設計思路。首先，擁有一個main js,這是一個啓動類。加載相關的js基礎框架的入口和應用的啓動入口。其次，我們擁有一個app.js，這個地方是我們應用的入口。

比如main.js ：

require(['order!jquery', 'order!underscore', 'order!backbone', 'app'], function($, _, Backbone, App){
    //app initialization in the bootstrap
    App.initialize();
};

在app.js

require(['jquery', 'underscore', 'backbone', 
    'LoginApplcation', 'MusicApplication', 'PlaySongApplication',
    'Preference', 'UserModel'],
    function($, _, Backbone, LoginApplcation, 
        MusicApplication, PlaySongApplication, Preference, UserModel){
    var rootView = Backbone.View.extend({
        el: 'body'
        
        ...
        
        
    });
    
    
    
    
    var AppsManager = {
        rootView: rootView,
        
        initialize: function(){
            //login systems start up
            LoginApplcation.startup();
            
            //bind the listener of the onlogin event
            LoginApplcation.on('logined', AppsManager.onLogin);
        },
        
        onLogin: function(data){
            
            var userModel = new UserModel(data);
            //save the user info on the client, and store it to the root app
            var preference = new Preference({model: userModel});
            AppsManager.preference = preference;
            //after login, start music and playsong
            MusicApplication.startup();
            PlaySongApplication.startup();
        }
    }
    
    $.gAppManager = AppsManager;
    
    return AppsManager;
};

從上面可以看出，我們可以把前端系統能夠獨立的部分，當作一個app。而AppManager 可以擴展開去，管理整個前端的app應用。而每個不同的application,有自己的appView，每個appView註冊自己範圍內的事件功能，數據模型等等。他們都是可以靈活組裝，也可以卸掉。

多人開發的時候，就可以根據不同的application來做模塊的獨立開發，而互相不干擾。這些application可能都繼承來自基礎的BaseApplication。遵守通用接口。

有人會擔心說，模塊文件過多，其實沒必要。在部署的時候用,nodejs+uglifyjs來做文件合併壓縮就可以。部署的時候就是一個vendor的包，和main.js兩個文件。配置上

gzip後，非常小。