前端 JavaScript 设计模式-大纲

Posted 2023-02-26 黑木令

前端 javascript 设计模式大纲

废话不多说, 上图有真相 。

1. 一名合格的工程师必备条件:

1. 对前端开发有一定的设计能力 。
   1. 想要成为项目技术负责人, 设计能力是必要的基础 。
   2. 从写好代码, 到做好设计, 设计模式是必经之路 

2. 前端学习设计模式的困难

1. 网上的资料大都是针对后端 Java 的 。
2. 看得懂概念, 但是不知道怎么使用, 看完就忘 。
3. 现在的前端开发大都是针对业务开发, 框架的使用, 很少有精力去研究设计模式相关内容 。

3. 知识点核心

1. 讲解 JS 设计模式 。
2. 讲解内容:
   1. 面向对象
   2. 设计原则
   3. 设计模式
3. 相关技术:
   1. 面向对象
   2. UML 类图
   3. ES6

4. 涉及到的知识点

1. 面向对象:
   1. ES6 class 语法 。
   2. 面向对象三要素 。
   3. UML 类图的画法 。

2. 设计原则:
   1. 为何设计 。
   2. 5 大设计原则 。
   3. 从设计到模式 。

3. 设计模式:
   1. 常用设计模式 。
   2. 结合 ES6 与 nodeJS 核心技术 。
   3. 结合常用框架 。

4. 综合示例:
   1. 设计方案 。
   2. 代码演示 。
   3. 设计模式对应关系的分析 。

5. 涉及到的知识点细节

1. 面向对象:
   1. 使用 webpack 和 babel 搭建 ES6 编译环境 。
   2. ES6 class 面向对象的语法 。
   3. 面向对象的三要素: 继承 / 封装 / 多态 .

2. 设计原则:
   1. 通过 《 LINUX/UNIX设计哲学 》 理解何为设计 。
   2. 5 大设计原则分析和理解, 以及代码演示 。
   3. 设计模式 --> 从 "设计" 到 "模式" 。

3. 设计模式(23中设计模式):
   1. 概述: 创建型, 结构型, 行为型 。
   2. 常用设计模式, 详细介绍; 结合经典实用场景 。
   3. 非常用设计模式, 理解概念, 示例演示 。

4. 综合示例:
   1. 使用 JQ 实现一个简单的购物车 。
   2. 做设计分析, 画 UML 类图 。
   3. 代码示例 。
   4. 总结其中使用的 7 种设计模式 。

如图所示:

《前端设计模式》专栏下篇: 搭建开发环境

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端设计模式” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。