Backbone 是一个 JavaScript 框架，可用于创建模型-视图-控制器 (model-view-controller, MVC) 类应用程序和单页界面。它试图让 JavaScript 应用程序更清晰结构化，所涉及到的概念有 View, Event, Model, Collection 和 Router，所以新手刚开始接触 Backbone 反而会显得零乱了。再加上网上找来的一些起步教程一上来就把 Event, Model, Collection 或是 Router 揽上了。其实新手最想要一个最简单的真相，因此第一个例子只需用到 View，其他的玩艺暂且搁置。
Backbone 强依赖于 Underscore，jQuery 是可选的，不过为操作 DOM 方便一般都会引用到 jQuery。
最简单的例子，分两步走：
1. Backbone.View.extend(obj) 创建一个 View 类型
2. 创建上一步得到的 View 的实例，实例化时将会调用前一步 obj.initialize() 方法
上代码(为方便起见，所有 JS 脚本都从公网上加载)：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
</head>
<body>
<div id="container">Loading...</div>
</body>
</html>
<script>
var AppView = Backbone.View.extend({
el: '#container',
initialize: function(options) {
this.render();
},
render: function() {
this.$el.html("Hello World");
}
});
//上面等于是创建了 AppView 类，还需实例化才行
setTimeout(function(){
var appView = new AppView();
}, 1000);
</script>点击 http://jsfiddle.net/Unmi/CyNM9/ 运行上面的代码，会发现 Loading... 在一秒后被替换成了 Hello World。走通。
有了上头的真切体验，我们才可以再进一步，使用行间模板和页面中声明的模板，模板就会触碰到值的填充，至此隐约也会感觉到 Model 在向我们招手了。
代码中使用字符串模板或用 <script type="text/template"/> 声明的模块，这里不多介绍，下篇再讲。
多加一点，关于 View 的构造，参考 Backbone.View 的实现 var View = Backbone.View 中的
// List of view options to be merged as properties.
var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];我们在构造 AppView 时可以传入以上的属性，比如传入 el 属性，就写成
var appView = new AppView({el: $('#container')});这样前面的 AppView 内就可以不用声明 el 属性了。你也可以同样的方式传入 model, id 等属性，属性声明在 View 的定义比较清晰，倘若要 View 的公用性就可在构造时传入属性，这是后话。
Backbone 的对象在初始化之后首先被执行的是 initialize 方法，初始化方法中可能要调用父类的初始化，则在 initialize 方法中头行加上
this.constructor.__super__.initialize.apply(this);这在要建立自己更深层次的类关系时会有用到，特别是非默认构造。
参考：1. Backbone.js for Absolute Beginners - Getting Started (Part 1: Intro)
2. What is a view?
3. 前端MVC框架Backbone 1.1.0源码分析(一)
4. 前端MVC框架Backbone 1.1.0源码分析(二)
扫一扫
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
