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