[Backbone.js: Hacker’s Guide][Backbone.js指南]

不可否认,Jeremy Ashkenas与DocumentCloud一同编写的Backbone.js已经变得很流行,有了巨大的影响力了。尽管有着许多优秀的文档与例子的存在,我依旧觉得从技术层面上去代码审查是一件很有意思的事情。并且希望这能带给读者对Backbone更深入的理解,这些代码审查将会对这些相互竞争的MVC框架,提供有用而准确的比较。

下面请跟着我通过Backbone的源码去学习它是如何工作的以及如何实现的。

Namespace and Conflict Management

像大多数客户端项目一样,Backbone.js将所有东西都放在一个立即调用的函数表达式[1]:

[code lang=”js”]
(function(){
// Backbone.js
}).call(this);
[/code]

它们在各自的配置阶段执行。通过这样子创建出来命名空间,以保证多个版本的backbone可以同时运行在一个页面而不冲突。

[code lang=”js”]
var root = this;
var previousBackbone = root.Backbone;
Backbone.noConflict = function() {
root.Backbone = previousBackbone;
return this;
};
[/code]

此外,确保多个版本同时运行,还可以通过calling的方式:

[code lang=”js”]
var Backbone19 = Backbone.noConflict();
// Backbone19 refers to the most recently loaded version,
// and `window.Backbone` will be restored to the previously
// loaded version
[/code]

其初始化配置可以支持CommonJS模块,所以Backbone也可以在Node中用如下方式使用:

[code lang=”js”]
var Backbone;
if (typeof exports !== ‘undefined’) {
Backbone = exports;
} else {
Backbone = root.Backbone = {};
}
[/code]

我们也可以用同样的方式检测underscore.js和jQuery这类的库是否存在。

Server Support

在配置过程中,如果需要额外的HTTP方法被服务端支持,我们可以通过设置变量的方式来实现。

[code lang=”js”]
Backbone.emulateHTTP = false;
Backbone.emulateJSON = false;
[/code]

Backbone.sync用这些值,实际上只是Backbone.js的部分,而不是实际工作的部分。事实上,在实现交互的过程中,HTTP协议参数与数据结构都是通过jQuery这些库的API来完成的。此外,还需要知道的一点是sync这个方法在model的save,fetch和delete这几个过程中都会起作用。

当jQuery的ajax API不适合你的项目的时候,怎么办呢?不用担心,我们可以通过重写sync方法来实现。这一点,Backbone的文档也有提到了:

The sync function may be overriden globally as Backbone.sync, or at a finer-grained level, by adding a sync function to a Backbone collection or to an individual model.

举个例子,你可以这样字实现重写:
[code lang=”js”]
Backbone.sync = function(method, model, options) {
};
[/code]
Events
Backbone绑定事件的方式很简单:
on:function(events, callback, context)//或者用bind
on:function(events, callback, context){,//或者用unbind
trigger:function(events){
这些方法都默认return this,所以说这是一个可链接的对象。于是有评论就推荐说用underscore.js来拓展Backbone.Events:
[code lang=”js”]
// var object = {};
// _.extend(object, Backbone.Events);
// object.on(‘expand’, function(){ alert(‘expanded’); });
// object.trigger(‘expand’);
[/code]
这种方式不会重写已经存在的对象,而是附加在这些方法之上。那就意味着我们可以很轻松地在你的项目上附加其他的项目。
Model

原文:http://dailyjs.com/2012/07/19/mvstar-2/

[1]深入理解JavaScript系列(4):立即调用的函数表达式-汤姆大叔

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇