这是我参与「第四届青训营」笔记创作活动的第3天

一.什么是设计模式？

设计模式(英语 design pattern)是对面向对象设计中反复出现的问题的解决方案。

二.设计模式3大类

1.创建型 - 如何创建一个对象

2.结构型 - 如何灵活的将对象组装成较大的结构

3.行为型 - 负责对象间的高校通信和职责划分

三.浏览器中的设计模式

*单例模式

定义：全局唯一访问对象

应用场景：缓存，全局状态管理等

使用闭包来创建单例模式：

` var single = (function(){

   var unique;
   function getInstance(){
        if( unique== undefined ){
           unique = new Construct();
        }
        return unique;
   }
   function Construct(){
       //生成单例的构造函数代码
   }
   return{
       getInstance:getInstance
   }

})();`

*发布订阅模式

定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者

应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛

四.Javascript中的设计模式

*原型模式

定义：复制已有对象来创建新的对象

应用场景：JS中对象创建的基本模式

*代理模式

定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理

应用场景：监控，代理工具，前端框架实现等

*迭代器模式

定义：在不暴露数据类型的情况下访问集合中的数据

应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口

五.前端框架中的设计模式

*代理模式

定义：通过更新虚拟DOM来实现视图更新

*组合模式

定义：可多个对象组合使用，可也单个对象独立使用

应用场景：DOM，前端组件，文件目录，部门

六.总结

以前对前端模式没有什么概念，也只是听过工厂模式和组合模式等，只停留在听说过，也没真正去明白模式是干什么的。今天听了老师讲的模式，我认识到模式的重要性，听完老师讲解之后，我还去搜一下，有23种模式，常用的有单例模式、观察者模式、工厂模式、命令模式等，虽然这些模式我还没有真正的弄懂，但是我下边一定会认真的去学一遍的，既然老师讲了，说明也很重要。主要是他可以重用代码、让代码更容易被其他人理解，以及保证了代码的可靠性。

前端设计模式 | 青训营笔记