解决什么问题：告别“面条代码”，让逻辑可复用

很多前端开发者在初级阶段容易陷入一种误区：认为写代码就是堆砌功能，只要页面能跑就行。但随着业务复杂度提升，你会发现重复代码泛滥，修改一个功能牵连出多个Bug，团队协作时别人写的逻辑你也看不懂。这门课聚焦 JavaScript 设计模式，核心目的是帮你建立结构化思维。它不是教你死记硬背那些古老的学术名词，而是通过具体的业务场景，比如状态管理、事件解耦、对象创建等，演示如何用标准模式替代随意的逻辑堆砌。学完这门课，你能独立识别当前项目中的代码痛点，并应用单例、观察者、策略等常见模式进行重构，让代码从“能跑”变成“易维护、易扩展”。这对于那些工作两三年、感觉技术触底、想要突破瓶颈的上班族来说，是一个性价比很高的补课方向，因为它直接解决的是工程化落地问题，而不是虚无缥缈的理论。

适合谁看，以及基础要求

这门课不适合刚学会写 HTML 和 CSS 的新手，也不适合只会调用框架 API 而不懂底层原理的“调包侠”。它适合已经熟悉 JavaScript 基础语法、理解原型链和闭包概念，并且在实际项目中编写过一定量业务代码的开发者。如果你经常面对“代码改起来心惊胆战”的局面，或者在 Code Review 中总是被指出“耦合度太高”，那么这套内容就是为你准备的。课程会假设你具备独立开发中等复杂应用的能力，重点在于如何优化现有的代码结构。对于转行者，如果已经掌握了前端基础并接了少量外包项目，现在切入设计模式正是时候，因为它能显著提升你代码的专业度和可读性，是区分初级码农和合格工程师的关键分水岭。

建议学习路径与资料配合方法

不要试图从头到尾线性看完所有视频。建议你先浏览课程目录，挑出你最感兴趣的两个模式，比如“发布订阅”和“工厂模式”，先看它们对应的讲解视频，理解其核心思想。接着，不要只看视频里的演示代码，必须停下来，关掉播放键，尝试在本地环境中手写一遍。这是最关键的一步，因为设计模式的价值在于“用”，而不在于“听”。配合资料包中的代码片段，你可以尝试将视频中的简化案例替换成你工作中遇到的真实场景，比如把通用的事件触发改成你自己项目里的消息通知模块。遇到卡壳的地方，再回头看视频中的细节讲解。资料包里的补充文档可以作为参考词典，但不必通读，只需在需要查阅具体实现细节时快速定位。最终检验标准是：你是否能在不查阅文档的情况下，口述某个模式的适用场景、优缺点以及核心代码骨架？如果能，说明你真正内化了这部分知识。这门课的价值不在于学完多少个模式，而在于建立起一种遇到问题先思考“该用哪种结构来解决”的直觉。

课程目录

第10章 观察者模式(微信-rmshou-收集整理)/ 10-1 观察者模式-介绍和演示(微信-rmshou-收集整理)[2].mp4
 10-2 观察者模式-场景1jquery(微信-rmshou-收集整理)[2].mp4
 10-3 观察者模式-场景2NodeJs自定义事件(微信-rmshou-收集整理)[2].mp4
 10-4 观察者模式-其它场景(微信-rmshou-收集整理)[2].mp4
 第11章 迭代器模式(微信-rmshou-收集整理)/ 11-1 迭代器模式-介绍(微信-rmshou-收集整理)[2].mp4
 11-2 迭代器模式-演示(微信-rmshou-收集整理)[2].mp4
 11-3 迭代器模式-场景(ES6 Iterator)1(微信-rmshou-收集整理)[2].mp4
 11-4 迭代器模式-场景2(微信-rmshou-收集整理)[2].mp4
 11-5 迭代器模式-代码演示和总结(微信-rmshou-收集整理)[2].mp4
 第12章 状态模式(微信-rmshou-收集整理)/ 12-1 状态模式-介绍和演示(微信-rmshou-收集整理)[2].mp4
 12-2 状态模式-场景1(有限状态机)(微信-rmshou-收集整理)[2].mp4
 12-3 状态模式-场景2(写一个promise)(微信-rmshou-收集整理)[2].mp4
 第13章 其他设计模式(微信-rmshou-收集整理)/ 13-1 其他设计模式概述(微信-rmshou-收集整理)[2].mp4
 13-10 中介者模式(微信-rmshou-收集整理)[2].mp4
 13-11 访问者模式和解释器模式(微信-rmshou-收集整理)[2].mp4
 13-12 关于面试和日常使用(微信-rmshou-收集整理)[2].mp4
 13-2 原型模式(微信-rmshou-收集整理)[2].mp4
 13-3 桥接模式(微信-rmshou-收集整理)[2].mp4
 13-4 组合模式(微信-rmshou-收集整理)[2].mp4
 13-5 享元模式(微信-rmshou-收集整理)[2].mp4
 13-6 策略模式(微信-rmshou-收集整理)[2].mp4
 13-7 模板方法模式和职责连模式(微信-rmshou-收集整理)[2].mp4
 13-8 命令模式(微信-rmshou-收集整理)[2].mp4
 13-9 备忘录模式(微信-rmshou-收集整理)[2].mp4
 第14章 综合应用(微信-rmshou-收集整理)/ 14-1 综合应用-介绍和演示(微信-rmshou-收集整理)[2].mp4
 14-10 综合应用-总结(微信-rmshou-收集整理)[2].mp4
 14-2 综合应用-UML类图分析(微信-rmshou-收集整理)[2].mp4
 14-3 综合应用-画UML类图(微信-rmshou-收集整理)[2].mp4
 14-4 综合应用-代码基础环境(微信-rmshou-收集整理)[2].mp4
 14-5 综合应用-实现List组件(微信-rmshou-收集整理)[2].mp4
 14-6 综合应用-实现item&cart(微信-rmshou-收集整理)[2].mp4
 14-7 综合应用-状态模式实现购物车操作(微信-rmshou-收集整理)[2].mp4
 14-8 综合应用-实现购物车列表和折扣(微信-rmshou-收集整理)[2].mp4
 14-9 综合应用-实现日志(微信-rmshou-收集整理)[2].mp4
 第15章 课程总结(微信-rmshou-收集整理)/ 15-1 课程总结(微信-rmshou-收集整理)[2].mp4
 第1章 课程介绍(微信-rmshou-收集整理)/ 1-1导学(微信-rmshou-收集整理)[2].mp4
 第2章 面向对象(微信-rmshou-收集整理)/ 2-1 搭建开发环境1(1)(微信-rmshou-收集整理)[2].mp4
 2-10 面向对象-总结(微信-rmshou-收集整理)[2].mp4
 2-11 UML类图1-介绍(微信-rmshou-收集整理)[2].mp4
 2-12 UML类图2-关系(微信-rmshou-收集整理)[2].mp4
 2-13 总结(微信-rmshou-收集整理)[2].mp4
 2-2 搭建开发环境2(微信-rmshou-收集整理)[2].mp4
 2-3 搭建开发环境3(微信-rmshou-收集整理)[2].mp4
 2-4 搭建开发环境4(微信-rmshou-收集整理)[2].mp4
 2-5 什么是面向对象(微信-rmshou-收集整理)[2].mp4
 2-6 面向对象-继承(微信-rmshou-收集整理)[2].mp4
 2-7 面向对象-封装(微信-rmshou-收集整理)[2].mp4
 2-8 面向对象-多态(微信-rmshou-收集整理)[2].mp4
 2-9 面向对象-应用举例(微信-rmshou-收集整理)[2].mp4
 第3章 设计原则(微信-rmshou-收集整理)/ 3-1 设计原则-介绍(微信-rmshou-收集整理)[2].mp4
 3-10 面试真题2-介绍(微信-rmshou-收集整理)[2].mp4
 3-11 面试真题2-画图(微信-rmshou-收集整理)[2].mp4
 3-12 面试真题2-编码(微信-rmshou-收集整理)[2].mp4
 3-13 总结(微信-rmshou-收集整理)[2].mp4
 3-2 设计原则-何为设计1(微信-rmshou-收集整理)[2].mp4
 3-3 设计原则-何为设计2(微信-rmshou-收集整理)[2].mp4
 3-4 设计原则-5大原则(微信-rmshou-收集整理)[2].mp4
 3-5 用promise演示(微信-rmshou-收集整理)[2].mp4
 3-6 设计模式简介(微信-rmshou-收集整理)[2].mp4
 3-7 23种设计模式介绍(微信-rmshou-收集整理)[2].mp4
 3-8 面试真题1-介绍(微信-rmshou-收集整理)[2].mp4
 3-9 面试真题1-解答(微信-rmshou-收集整理)[2].mp4
 第4章 工厂模式(微信-rmshou-收集整理)/ 4-1 工厂模式-介绍(微信-rmshou-收集整理)[2].mp4
 4-2 工厂模式-演示和场景(微信-rmshou-收集整理)[2].mp4
 同类型课程.jpg 第5章 单例模式(微信-rmshou-收集整理)/ 5-1 单例模式-介绍(微信-rmshou-收集整理)[2].mp4
 5-2 单例模式-演示(微信-rmshou-收集整理)[2].mp4
 5-3 单例模式-场景(jq的$和登录框逻辑)和总结(微信-rmshou-收集整理)[2].mp4
 第6章 适配器模式(微信-rmshou-收集整理)/ 6-1 适配器模式-介绍(微信-rmshou-收集整理)[2].mp4
 6-2 适配器模式-演示(微信-rmshou-收集整理)[2].mp4
 6-3 适配器模式-场景(封装旧接口&Vue的computed)(微信-rmshou-收集整理)[2].mp4
 第7章 装饰器模式(微信-rmshou-收集整理)/ 7-1 装饰器模式-介绍(微信-rmshou-收集整理)[2].mp4
 7-2 装饰器模式-场景1(微信-rmshou-收集整理)[2].mp4
 7-3 装饰器模式-场景2(装饰类和方法)(微信-rmshou-收集整理)[2].mp4
 7-4 装饰器模式-场景3和总结(微信-rmshou-收集整理)[2].mp4
 第8章 代理模式(微信-rmshou-收集整理)/ 8-1 代理模式-介绍和演示(微信-rmshou-收集整理)[2].mp4
 8-2 代理模式-场景1(事件代理和jq的proxy)(微信-rmshou-收集整理)[2].mp4
 8-3 代理模式-场景2(明星经纪人)(微信-rmshou-收集整理)[2].mp4
 8-4 代理&适配器&装饰模式对比(微信-rmshou-收集整理)[2].mp4
 第9章 外观模式(微信-rmshou-收集整理)/ 9-1 外观模式(微信-rmshou-收集整理)[2].mp4
 课程资料/ 代码资料.zip