这篇文章主要介绍了 JavaScript 的 Backbone.js 框架的一些使用建议整理, 文中列的几点主要还是针对 DOM 方面的操作, 需要的朋友可以参考下
Backbone 为复杂 Javascript 应用程序提供模型 (models)、集合(collections)、视图(views) 的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富 API; 视图可以声明事件处理函数,并通过 RESTful JSON 接口连接到应用程序。
Backbone 为复杂 Javascript 应用程序提供模型 (models)、集合(collections)、视图(views) 的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富 API; 视图可以声明事件处理函数,并通过 RESTful JSON 接口连接到应用程序。
当我们开发含有大量 Javascript 的 web 应用程序时,首先你需要做的事情之一便是停止向 DOM 对象附加数据。 通过复杂多变的 jQuery 选择符和回调函数创建 Javascript 应用程序,包括在 html UI,Javascript 逻辑和数据之间保持同步,都不复杂。 但对付客户端应用来说,良好的架构通常是有很多益处的。
Backbone 将数据呈现为模型, 你可以创建模型、对模型进行验证和销毁,甚至将它保存到服务器。 当 UI 的变化引起模型属性改变时,模型会触发 "change" 事件; 所有显示模型数据的视图会接收到该事件的通知,继而视图重新渲染。 你无需查找 DOM 来搜索指定 id 的元素去手动更新 HTML。 —旦模型改变了,视图便会自动变化。
backbone.js 提供了一套 web 开发的框架,通过 Models 进行 key-value 绑定及 custom 事件处理, 通过 Collections 提供一套丰富的 API 用于枚举功能, 通过 Views 来进行事件处理及与现有的 Application 通过 RESTful JSON 接口进行交互. 它是基于 jquery 和 underscore 的一个 js 框架。
Backbone 天生就不固执己见。你从文档上获取的一个最基本观点是:使用 backbone.js 提供的工具,做任何你想做的事。
这点非常好,因为有这么多不同的应用场合,而且对于开始写 app 来说也非常容易。这种途径可能避免我们在刚开始时犯尽可能少的错误。
当一件事做错的时错,我们要发现并找到改正的方法。
下面这些提示,可以让你避免我们在进行 Backbone.js 开发时所碰到错误:
1. 视图(Views)是数据无关的 (Data-Less)
数据属于模型(models)不是视图。下次你发现 你在一个视图中存储数据 (或者更糟:在 DOM 里),马上把它移到 model 里。
如果你没有 model,创建一个非常简单:
- this.viewState = new Backbone.Model();
真的不需要任何其它操作。
你可以在你的数据上侦听改变事件,甚至跟你的服务器在线同步。
2. DOM 事件只改变 models
当一个 DOM 事件触发时,比如点击了一个按钮,不要让它改变 view 本身。改变这个 model.
改变 DOM 且不改变状态意味着你的状态还存储在 DOM 中。这条规则可以让你保持状态一致。
如果点击了一个 "加载更多" 边接,不要展开视图,只需要改变 model:
- this.viewState.set('readMore', true);
好了,但是视图何时发生改变?好问题,下一条规则会回答。
3.DOM 只有在 model 发生改变时才改变
事件是很神奇的,请使用他们。最简单的方法是每次改变后触发一遍。
- this.listenTo(this.stateModel, 'change', this.render);
更好的方法是只有在需要的时侯触发改变。
- this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);
这个视图会一直同他的 model 保持一致。无论 model 是如何改变的:从命令接口或调试信息处响应动作,这个视图会一直保持更新。
4. 绑定的东西必须解绑
当视图从 DOM 上移除时,使用'remove'方法,它必须从所有绑定的事件上解绑上。
如果你使用'on'绑定,你的职责是使用'off'去解绑。如果没有解绑,内存回收器无法释放内存,从而造成你应用的性能下降。
这就是'listenTo'的由来。它会跟踪视图的绑定和解绑。Backbone 把这个从 DOM 移动之前,会进行'stopListening'。
- // Ok:
- this.stateModel.on('change:readMore', this.renderReadMore, this);
- // 神奇:
- this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);
5. 保持链式写法
从 render 和 remove 方法里,总是返回'this'。这样可以让你写方法链。
- view.render().$el.appendTo(otherElement);
这很方法,不要打破它。
6. 事件比回调要好
等待响应事件比回调要好
Backbone 模型(models)默认会触发'sync'和'error'事件,因此可以使用这些事件代替回调。考虑一下这两种情况。
- model.fetch({
- success: handleSuccess,
- error: handleError
- });
- //这种更好:
- view.listenTo(model, 'sync', handleSuccess);
- view.listenTo(model, 'error', handleError);
- model.fetch();
model 何时填充(fetched)并不重要,handleSucess/handleError 会被调用。
7. Views 是有作用域的
视图永远不要操作除了它本身以外的 DOM。
view 会引用它自己的 DOM 元素,如'el'或者 jquery 对象'$el'
那意味着你永远不要直接使用 jQuery:
- $('.text').html('Thank you');
请把 DOM 元素的选择限定到你自己的域里面:
- this.$('.text').html('Thank you');
- // 这等价于
- // this.$el.find('.text').html('Thank you');
如果你需要更新一个别的不同的视图,只要触发一个事件,让别的视图去做。你也可以使用 Backbone 的全局 Pub/Sub 系统。
例如,我们阻止页面滚动:
- var BodyView = Backbone.View.extend({
- initialize: function() {
- this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
- },
- preventScroll: function(prevent) {
- // .prevent-scroll 有下面的CSS规则: overflow: hidden;
- this.$el.toggleClass('prevent-scroll', prevent);
- }
- });
- // 现在从任何其他地方调用:
- Backbone.trigger('prevent-scroll', true); // 阻止 scrolling
- Backbone.trigger('prevent-scroll', false); // 允许 scrolling
还有一件事
只要读读 backbone 的源代码,你会学到更多。看一看 backbone.js 的源代码,然后看看这些神奇的事情是怎么实现的。这个库非常小,而且可读性很好,整个读完不会超过 10 分钟的。
这些小贴士帮助我们写干净的,更好的可读的代码。
来源: