给前端同学的设计模式精讲课

admin · 发表于 2022-5-17 23:43:39

课程目标

            掌握前端常用的 7 种设计模式，搭建优秀的代码结构化思维
            专注 7 种，没接触过设计模式的前端新手也能“0压力”学习


夯实代码设计的底层逻辑

                     面向对象编程思想

                     UML类图设计工具

                     SOLID 5大设计原则


                     学透常用的7种设计模式

                     工厂模式；单例模式；观察者模式

                     迭代器模式；装饰器模式

                     原型模式；代理模式



                     实践主流设计模式的真实应用

                     在场景化案例中了解它们的实际使用

                     在面试真题中自主应用

                     设计模式来进行高分解答








            课程亮点

                  不盲目求全，23 种设计模式中精选 7 种，高效冲破新鲜知识领域
                  贪多嚼不烂，学好这 7 种足以帮你搭建起一套基本完整且清晰的设计思维


                        · 工厂模式 ·
                        封装实例的创建过程，解放 new Class() ，Vue React 内部都在用。


                        · 单例模式 ·
                        全局只允许有一个实例，多则出错。用 TS 语法实现更优雅。


                        · 观察者模式 ·
                        前端（及其他 UI 编程）最常用的设计模式，工作必用，面试必考。


                        · 迭代器模式 ·
                        遍历数据不仅仅是 for 和 forEach ，还有更高级的 Iterator ，JS 早已支持了。


                        · 装饰器模式 ·
                        Decorator 现已是 JS 的标准语法，装饰器正在前端普及开来。


                        · 原型模式 ·
                        原型和原型链是 JS 必备的基础知识，还扩展了 JS 对象属性描述符。


                        · 代理模式 ·
                        编程处处有代理，无论开发环境还是线上环境。Vue3 也用 Proxy 实现数据响应式。



                  其他16种设计模式应用范围较小，在你学好主流的设计模式，搭建起良好的设计模式思维后

                  这些模式在后续工作中用到时可以进行快速学习与应用

                  讲解接地气，力保新手前端也能学好大家眼中的“晦涩”难点
                  先从SOLID五大设计原则开始，一步一步抽丝剥茧，前铺后垫，循序渐进


                        利用实际场景, 促进理解抽象的原则
                        体会设计模式的价值


                        SOLID 五大设计原则
                        前端常用的 7 种设计模式结合实际场景和 Typescript 语法
                        实战演练两个面试真题


                     面向对象和 UML 类图


                  化抽象为具象，场景化教学，让你学会忘不掉
                  不做概念堆砌，基于实际案例，22个场景讲透每种模式的特性


                  一课多用，附带掌握 JS 高阶语法
                  很多 JS 高阶语法本身就是参考设计模式实现的，学会了设计模式，就学会了这些高阶语法

                     · JS 高阶语法 ·


                              · Decorator
                              · Iterator
                              · Generator/yield
                              · Proxy/Reflect


                              · MutationObserver
                              · 对象属性描述符
                              · Object.freeze
                              · Object.seal










                  课程大纲
                                                         第1章  课程介绍
                  本章介绍课程主要内容，学习目标，学习方法和注意事项。
                                                                              第2章  面向对象 OOP 和 UML 类图 - 前端开发的必备编程思想
                  本章是课程的基础知识铺垫。课程使用 Typescript 做代码演示，所以先介绍 Typescript 类型。设计模式是基于面向对象编程 OOP 的，所以先介绍面向对象的概念。UML 类图是面向对象编程的重要设计工具。
                                                                              第3章  设计原则 - 设计模式只是套路，设计原则是指导思想
                  设计模式应该分开读：从设计到模式。因此先从基本的设计原则入手，引用《UNIX/linux设计哲学》一书来辅助讲解。然后再由设计过度到模式，介绍 23 种设计模式。
                                                                              第4章  工厂模式 - 封装实例的创建过程，解放 Vue React 内部都在用
                  工厂模式是前端常用设计模式之一。本章将详细讲解工厂模式，从概念背景，到代码示例和 UML 类图，最后到它的具体使用场景。
                                                                              第5章  单例模式 - 全局只允许有一个实例，多则出错（用 TS 语法实现更优雅）
                  单例模式是前端常用设计模式之一，而且单例模式的设计思想到处都能体现，如 Vuex 全局唯一的 store 。本章将详细讲解单例模式，从概念背景，到代码示例和 UML 类图，最后到它的具体使用场景。
                                                                                                                                                                                                                                                                                                                                                                                                            查看完整目录








                  每个IT资源网课程，都是一个专业的技术社区
                  个性化增值服务，学习有保障更高效



                        答疑专区+技术社区
                        连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。



                        独家“动态”教辅材料
                        丰富的专属教辅资料上传更新，通过
课程教案、原理图解、技术文档、演示案
例等各种教材，保障你的学习效果。





                        课程全套代码下载
                        提供课程全套源代码下载，包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。



                        实用图文资料
                        部分简单内容以图文形式呈现，与视频相
配合，既保障学习效果，又提高了学习效
率。