缺什么补什么:别把 Backbone 当古董晾着
很多前端转岗或查漏补缺的学习者,写惯了现代框架后,遇到维护老项目或接手遗留代码库就抓瞎。Backbone.js 虽然不再是主流新项目首选,但它代表了早期 MVC 思想在客户端的落地,是理解数据与视图分离演进的一块关键拼图。这门课解决的不是让你去新项目里硬套这套老框架,而是补上你对模型、集合、视图这套分层机制的底层认知,让你在面对基于它的老代码库时,能看懂结构、能改对逻辑、能定位事件绑定的坑,而不是对着几万行老代码无从下手。很多人觉得直接看现代框架源码就行,但如果不亲手写过这套基于事件驱动的数据绑定,很难真正理解现代框架解决痛点在哪。
适合什么基础,资料怎么配合练
这门课默认你已经熟悉原生 JavaScript 的 DOM 操作、闭包和原型链,如果连 this 指向都搞不清,先补 JS 基础再来。建议先集中看模型对象、修改模型、删除校验这几块,把单条数据怎么定义、怎么校验、怎么触发事件跑通;接着看创建视图和模板,理解视图怎么把模型数据渲染到页面;最后进入集合部分,搞懂多条数据怎么统一管理。配套练习时,别光看视频跟着敲,自己建一个本地页面,比如仿一个简单的商品列表,用模型定义商品,用集合管理列表,用视图渲染列表项和表单。重点练校验和事件绑定:故意传非法数据看校验怎么拦,改了模型属性看视图有没有跟着变。练的时候多翻官方文档对照 API,别只记视频里的写法,不同版本签名有差异,自己动手查比记死代码靠谱。资料里的示例代码别原样照抄,改掉属性名和校验规则,逼自己理解每一行作用。
学完能独立做什么
看完应能回答几个核心问题:Backbone 的 Model 和 View 怎么通信?事件系统在哪一层起作用?集合的增删改查怎么触发对应视图更新?学完你能独立做到:接手一个 Backbone 老项目,能快速定位数据流走向,知道改哪个模型属性会触发哪段视图重渲染,能新增一个带校验的表单功能并挂到现有集合里,能排查事件重复绑定或内存泄漏的常见毛病。别指望学完就能拿去投新岗位简历,它的价值是让你在老技术栈面前不发虚,遇到遗留代码能动手改而不是只能推给别人。如果工作中碰不到老项目,这课也能帮你建立对前端架构演进的直观认知,知道从手动操作 DOM 到数据驱动视图这步跨越到底解决了什么麻烦。
课程目录
1-1 [Backbone第一天] 体验backbone (31:05) 1-2 [Backbone第一天] 模型对象 (35:51) 1-3 [Backbone第一天] 修改模型 (19:32) 1-4 [Backbone第一天] 模型事件 (12:09) 1-5 [Backbone第一天] 删除校验 (23:17) 1-6 [Backbone第一天] 创建视图 (29:45) 1-7 [Backbone第一天] 模板 (13:26) 1-8 [Backbone第一天] 视图模板 (03:28) 1-9 [Backbone第一天] 视图模板2 (11:33) 1-10 [Backbone第一天] 淘宝商品 (23:51) 1-11 [Backbone第一天] 事件 (17:36) 2-1 [Backbone第二天] 创建集合 (29:23) 2-2 [Backbone第二天] 操作模型 (27:58) 2-3 [Backbone第二天] 事件 (06:31) 2-4 [Backbone第二天] 淘宝商品列表 (25:39) 2-5 [Backbone第二天] underscore拓展 (24:33) 2-6 [Backbone第二天] underscore拓展2 (08:40) 2-7 [Backbone第二天] 淘宝商品排序 (16:55) 2-8 [Backbone第二天] 淘宝商品排序--补充 (10:08) 2-9 [Backbone第二天] 集合过滤 (07:03) 2-10 [Backbone第二天] 淘宝商品过滤 (21:33) 2-11 [Backbone第二天] 事件模板 (13:07) 2-12 [Backbone第二天] 事件模板2 (07:08) 2-13 [Backbone第二天] 事件模板3 (28:03) 2-14 [Backbone第二天] 跨对象监听事件 (11:52) 2-15 [Backbone第二天] 淘宝商品模块通信 (05:09) 2-16 [Backbone第二天] 跨对象注销消息 (10:22) 2-17 [Backbone第二天] 拉取数据 (05:52) 3-1 [backbone第三天] seajs模块化 (26:38) 3-2 [backbone第三天] requireJs (19:16) 3-3 [backbone第三天] 路由 (01:53) 3-4 [backbone第三天] 启动路由 (31:52) 3-5 [backbone第三天] 列表页 (24:58) 3-6 [backbone第三天] 图片模型 (15:19) 3-7 [backbone第三天] 图片集合 (15:21) 3-8 [backbone第三天] 列表页 (30:59) 3-9 [backbone第三天] 图片模型 (15:19) 3-10 [backbone第三天] 图片集合 (15:21) 3-11 [backbone第三天] 列表页1 (30:59) 3-12 [backbone第三天] 列表页交互 (45:04) 3-13 [backbone第三天] 渲染大图页 (31:56) 3-14 [backbone第三天] 大图页交互 (19:41)





