yangsongjing 发表于 2013-1-29 08:37:04

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,程序就只加载它,里面的内容我们动态的添加进去。至于怎么加等下再详细说。
基本框架到这里已经搭好了。下一篇博客我会讲怎么去开发一个功能。希望对你有用。
页: [1]
查看完整版本: javascript之backbone.js框架搭建详解