什么是 Backbone.js?
Backbone.js 是一个轻量级的 JavaScript 框架,用于构建结构清晰、可维护的单页 Web 应用(SPA)。 它基于 MVC(Model-View-Controller)架构思想,提供模型(Model)、集合(Collection)、视图(View)和路由(Router)等核心组件。
Backbone 依赖于 Underscore.js(用于工具函数)和可选的 jQuery(用于 DOM 操作),整体代码精简,适合需要灵活控制结构的项目。
核心组件
- Model:管理数据和业务逻辑。
- Collection:管理一组 Model 实例。
- View:处理 UI 渲染和用户交互。
- Router:管理 URL 路由,实现前端导航。
简单示例
以下是一个使用 Backbone 创建待办事项(Todo)条目的基本示例:
// 定义 Model
var Todo = Backbone.Model.extend({
defaults: { title: '新任务', completed: false }
});
// 定义 View
var TodoView = Backbone.View.extend({
tagName: 'li',
template: _.template('<%= title %>'),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
// 使用
var todo = new Todo({ title: '学习 Backbone' });
var view = new TodoView({ model: todo });
$('body').append(view.render().el);
适用场景
Backbone 适合中小型项目或对框架侵入性要求较低的场景。由于其灵活性高、学习曲线平缓, 至今仍被许多遗留系统或追求极简架构的团队所采用。