javascript之backbone.js框架搭建详解

  网上有很多的backbone.js，其实看了很多的资料但是都觉得不是很详细，作为新手的话很难看懂，现在对于backbone.js略懂一点，就写出来给初学的人参考，如果有觉得写得不好的地方可以交流。我尽量写好，废话不多说现在开始。
  1.backbone.js就是javascript的一个框架。它是基于MVC的。所以它有model、view和control之分，这里的control其实就是它里面的router。
  2.因为backbone.js是基于underscore.js的所以我们需要导入它的包其次还要导入require.js。
  3.导入包之后基本工作就完成了，但是我建议在项目里面建三个文件夹models、views、tmpls。
     models:用于专门处理数据。
     views:用于控制页面效果，处理前台展示。
     tmpls:专门放静态化的html页面。
  4.如果是多人开发一个项目的话这样写比较不容易混淆。这些建完了之后还有一个重要的就是router。router是程序的入口，有着很重要的作用。开发模块不同最好建不同的router，因为一旦出现问题就不好调试。所以我们可以在router.js里面这样写：
    define(function(require, exports, module) {
var Backbone = require('backbone');

require('app/routers/routerOne');
require('app/routers/routerTwo');
require('app/routers/routerThree');


var initialize = function() {
            Backbone.history.start();
};

return {
initialize: initialize
};
});
然后分别建不同的one、two、three等子router这样就可以避免不必要的冲突而且便于管理，然后在app.js里面把总的router require进去就可以了。
  5.router配好后项目运行还是会有问题的，因为backhone.js里面很多的方法都是异步运行的，所以我们需要准备一些基础的方法，也就是说先同步去加载它前面要用的方法，不然就会出现问题。这里就会有一个main.js。
  它的paths实例:
     'jquery': 'libs/jquery/jquery-1.8.0.min',
     'underscore': 'libs/underscore/underscore-1.3.1.min',
     'backbone': 'libs/backbone/backbone-0.9.0'
  引入后就可以去控制加载顺序，也可以说是依赖关系。
      'backbone': {
deps: ['underscore'],
exports: 'Backbone'
      }
  这里的意思就是backbone运行需要依赖underscore。在其之前加载underscore。
  6.我们还需要页面，可以建一个index.html，程序就只加载它，里面的内容我们动态的添加进去。至于怎么加等下再详细说。
  基本框架到这里已经搭好了。下一篇博客我会讲怎么去开发一个功能。希望对你有用。
     
 

评论

2 楼 yangsongjing 2012-10-13  

witcheryne 写道

这个是基于 SeaJS 的方式吧 ?

我有个 repository, 有兴趣可以关注一下
https://github.com/lvjian700/jsgarden

嗯 好的

1 楼 witcheryne 2012-10-13  

这个是基于 SeaJS 的方式吧 ?

我有个 repository, 有兴趣可以关注一下
https://github.com/lvjian700/jsgarden