🦴 Backbone
一句话定性
Backbone 是前端从”页面制作”走向”软件工程”的第一声啼哭。它第一个把 MVC 架构带进浏览器,给混沌的 jQuery 代码立下规矩——但它只给了骨架(Backbone,正如其名),血肉(视图如何自动跟随数据)还得开发者自己长。
一、它是什么 & 出现的时代
2010 年,Jeremy Ashkenas(也是 CoffeeScript 和 Underscore 的作者)发布 Backbone.js。它生于 2005-2013 Ajax时代 的中后段:jQuery 已经统治前端,但用 jQuery 写出的复杂应用是一团乱麻。
Backbone 提供了一套极轻量(压缩后几 KB)的结构:
| 概念 | 职责 |
|---|---|
| Model | 数据 + 业务逻辑,数据变化时触发 change 事件 |
| Collection | Model 的有序集合 |
| View | 监听 Model 变化,负责渲染(渲染逻辑要自己写) |
| Router | 把 URL 映射到逻辑,实现前端路由 |
| Events | 贯穿全局的事件系统(基于发布-订阅) |
它依赖 Underscore.js(工具函数 + 模板)和通常搭配 jQuery(操作 DOM)。
二、为什么会出现(解决上一代什么痛点)
jQuery 解决了"操作 DOM",却没解决"组织代码"
当应用大到一定程度,jQuery 写出来的就是意大利面条:
- 数据和视图混在一起,没人知道改一个地方会影响哪里。
- 状态散落各处:在 DOM 的
data-*里、在全局变量里、在闭包里,没有单一数据源。- 没有结构约束:任何回调都能改任何 DOM,代码无法推理。
Backbone 的回答是:给前端立规矩。把数据抽出来放进 Model(单一数据源),让 View 监听 Model 的变化——第一次把”数据驱动视图”的理念摆上台面。详见 2005-2013 Ajax时代。
三、核心创新 & 为什么流行(踩中什么时代红利)
- 第一个把 MVC 引入前端:在它之前,“前端架构”这个词几乎不存在。
- 数据驱动视图:Model 变 → 触发事件 → View 重渲染。这个理念是后来所有框架的思想源头。
- 极度轻量、无侵入:不像后来的全家桶,Backbone 只给你最小骨架,你可以渐进采用。
- 前端路由的先驱:Router 让”单页应用”在架构上第一次成形。
为什么它一度流行
在 React/Angular 还未成熟的窗口期(2010-2013),Backbone 是构建复杂 SPA 的近乎唯一选择。Trello、早期 Airbnb、SoundCloud 等都用过它。它踩中了”jQuery 已无法承载复杂应用,而声明式框架尚未到来”的真空地带。它建立在 ES5 之上。
四、带来的新问题 / 副作用
它给了骨架,却没给"自动绑定"
Backbone 最致命的缺陷:Model 到 View 的同步要全手动写。
- 绑定不自动:Model 变了,你要手动
listenTo(model, 'change', this.render),再手写render把数据塞进模板、塞进 DOM。模板和数据之间没有自动绑定。- 没有组件化:View 不是可组合的组件,嵌套 View 的管理(创建、销毁、内存泄漏)是公认的噩梦。
- 样板代码多:一个简单交互要写 Model + View + 模板 + 一堆事件监听。
render粒度粗:大多数实现是数据一变就整个 View 重渲染,既低效又会丢失 DOM 状态(如输入焦点)。
核心新矛盾:有了骨架,但”视图自动跟随数据”这件事还是手工活——这正是 AngularJS 的双向绑定要解决的问题。
五、为什么会衰落 / 现状(仍在用则讲演化)
Backbone 的衰落是”被降维打击”:
- AngularJS 的双向绑定让”手写 View 同步”显得原始——数据变 UI 自动变,谁还想手写
listenTo? - React 的组件化 + 虚拟 DOM彻底解决了 Backbone 嵌套 View 管理的噩梦,且渲染高效。
- Backbone 缺乏组件模型,无法适配 2013-2018 SPA时代 的组件化潮流。
现状:几乎退役
Backbone 基本退出新项目,只在少量遗留系统里维持。但它的历史价值不可磨灭——它是”前端工程化”概念的奠基者,MVC、数据驱动视图、前端路由这些理念,经它之手第一次落地。
六、对后续技术的影响(因果链)
jQuery 代码无结构 → 意大利面 → 状态散落各处
│
↓
Backbone(2010):引入 MVC、Model 单一数据源、数据驱动视图、前端路由
│
│ 缺陷:Model→View 同步要手写,无组件化,嵌套 View 是噩梦
↓
催生两条改进路线:
│
├─► "让绑定自动化" ──► AngularJS(双向数据绑定)
│
└─► "把 View 升级为可组合组件" ──► React(组件 + 虚拟DOM)
│
↓
Backbone 的 MVC 思想 ──► 启发 Angular / Ember 的架构设计
Backbone 的 Router ──► 前端路由成为 SPA 标配
历史地位
Backbone 是承前启后的关键一环:它告诉行业”前端代码也需要架构”。虽然它的”手动同步”很快被双向绑定和声明式渲染取代,但它播下的种子——数据驱动、关注点分离、单一数据源——长成了之后所有框架的森林。
🔗 相关:前端框架演进史 | jQuery | AngularJS | React 🔗 时代:2005-2013 Ajax时代 | 2013-2018 SPA时代 🔗 语言:ES5