北京web*端常见的设计模式，*端领域中的设计模式（二）

现在web前端也是一个非常热门的行业，想要学习web前端开发的同学请看这里北京web前端常见的设计模式 ，通过对前端领域中的设计模式（二）?? 的了解，希望以上信息可以帮助到您

1.前端领域中的设计模式（二）

继续我们上文设计模式前端相关实现3.2、结构型设计设计模式3.2.1、装饰器模式装饰器模式： 允许向一个现有的对象添加新的功能，同时又不改变其结构，为现有的对象(类)的一个包装。主要基本原则：开放封闭原则和单一职责模式模式介绍：在了解模式之前，我们先来聊一下前端中的高阶函数。高阶函数就是一个函数A可以接收函数B为参数。如： 常见应用场景：三大框架中的高高阶组件设计、ES7以后的装饰器、vue mixins（vue 替代）、core-包等3.2.2、适配器模式适配器模式：两个不兼容的接口之间的桥梁，它涉及一个单一的类，该类负责加入独立的或不兼容的接口功能。简单理解： 接口（方法）转换器。举例说明： 美国电器 110V，在*使用美国电器需要220V 的转换器。主要基本原则：开放封闭原则模式介绍： 该种设计模式提高了类的透明度、灵活性、复用度等，但是在大型项目开发中，不易过多的使用适配器原则，会使项目错综复杂，不易整体把握控制。前端中实际场景实现：常见应用场景：babel实现思想，npm/浏览器兼容等3.2.3、代理模式代理模式: 一个类代表另外一个类的功能，创建一个具有现有对象的对象，为外界提供访问接口。实际理解：如windows的快捷打开方式。主要基本原则：开放封闭原则、里氏替换原则模式介绍：该种模式就是为对象提供一个代理，控制对这个对象的访问，在开发中我们经常遇到的代理可分为四种类型： 事件代理，虚拟代理、缓存代理和保护代理。事件代理：前端中应该大家都很熟悉事件代理和事件委托。前端中，通过事件冒泡，制定一个时间处理程序，就可以管理某一类型的所有事件，有效的提升性能与操作。浏览器端的实现如： 虚拟代理：图片预加载功能，先给 img 标签展示一个占位图，然后创建一个 Image 实例，让这个实例的 src 指向真实的目标图片地址，当其真实图片加载完成之后，再将 DOM 上的 img 标签的 src 属性指向真实图片地址。简单实现：缓存代理：一般使用在计算量较大的场景中,如去重优化，计算缓存，实现如下：保护代理：也可以称为代理拒绝，保护代理用于控制不同权限的对象对目标对象的访问，在js中场景不算多，大家知道起原理便可。3.2.4、桥接模式桥接模式：抽象化和实现话解耦，使得二者可以独立变化，前端简单理解，函数的封装，提升代码的可维护性。在多维变化的编程中比较实用。举一个简单的例子： N个操作系统 、M个电脑。主要基本原则：开放封闭原则模式介绍：分离接口和实现部分，将抽象和实现充分解耦，产生更好的结构话系统，提高了系统的可扩展性，对用户隐藏了实现细节。简单实现：使用场景：前端各大框架和npm包中都有或多或少的使用场景，大家可自行寻找学习。3.2.5、外观模式外观模式：隐藏系统的复杂性，向使用方提供一个可以访问系统的接口，它涉及到一个单一的类，该类提供了客户端请求的简化方法和对现有系统类方法的委托调用。主要涉及模式：开放封闭原则、单一匹配原则模式介绍：该模式对出口进行了统一封装，提高了系统的安全性和统一性。简单实现通过调用stopEvent简化了对冒泡事件和默认事件的调用。统一了调用接口。使用场景：不用同步得到结果的编程思路， 如webpack打包思想等。3.2.6、组合模式组合模式: 部分整体模式，把相识的对象当做一个单一的对象，与桥接模式区别在于，组合模式是一个树形结构为基准的设计模式。主要设计原则：接口封闭开放原则模式介绍：该种设计模式具有高层模块调用简单、底层模块自由添加的特点，不过从设计结构来说，这种树形结构设计违反了依赖反转原则。具体实现：常见场景： 具有树形结构的业务场景。3.2.7、享元模式享元模式：减少创建对象的数量，减少对内存的消耗和提升性能，属于优化编程的设计模式。模式介绍：该模式运用共享技术来有效支持大量细粒度的对象，系统中如果创建了大量类似的对象，，占用了大量的内容，思考享元模式优化方案就非常有必要了。下面我们思考一个场景：100套女装、100套男装，需要寻找模特来试妆，怎样创建最少的model。简单设计思想：该模式核心为找到多个对象的共性问题，及多个类似对象的共同点，具体场景具体分析。该模式的设计思路与对象池设计类似，也可使用对象池优化具体可参考工厂模式，设计一个对象池工厂。下一篇：前端领域中的设计模式（三）

看了以上有关前端领域中的设计模式（二）??的讲解，如果还有什么疑问可以直接来电咨询