Backbone.js HelloWorld,应用起步

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 脚本都从公网上加载):

点击 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源码分析(二)

本文链接 https://yanbin.blog/backbone-get-started/, 来自 隔叶黄莺 Yanbin Blog

[版权声明] Creative Commons License 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。

Subscribe
Notify of
guest

3 Comments
Inline Feedbacks
View all comments
吴彦祖
吴彦祖
8 years ago

王刚
9 years ago

赞一个,看了好多,还是博主的写的一目了然,新手看起来也不会觉得害怕。

trackback

[…] Unmi Backbone 是一个 JavaScript 框架,可用于创建模型-视图-控制器 […]