使用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后，非常小。