狼丶宇先森的网络科技空间

桥接模式（Bridge）：桥接模式是一种结构型设计模式，其目的是将抽象部分和实现部分分离，允许它们可以独立地变化。该模式通过创建一个桥接类，连接抽象和实现，使得它们可以独立地进行扩展和变化，而不会相互影响。桥接模式支持在多个维度上的变化，并提供了一种灵活的设计方法。桥接模式的参与者包括抽象部分（Abstraction）、扩展抽象部分（Refined Abstraction）、实现部分（Implementation）和扩展实现部分（Concrete Implementation）。

装饰者模式是一种允许在不修改现有对象的情况下，动态地向对象添加新的功能和行为的设计模式。它基于组合而非继承的原则，通过将一个对象与一个或多个装饰器进行组合来实现这一目的。使用装饰者模式的主要目的是提高代码的可重用性和可扩展性。通过将新的功能封装在装饰器中，我们可以将其应用到多个不同的对象上，并且可以轻松地添加或删除特定的功能。比如，假设你正在开发一个在线商店，你可能有一个名为 "Product" 的基本商品类，但是你需要在每个产品上添加额外的属性（例如颜色、尺寸、价格等）。使用装饰者模式，你可以创建

一、写在前面代理模式(Proxy)：由于一个对象不能直接引用另一个对象，所以需要通过代理对象在这两个对象之间起到中介的作用。上述的简介，你能想到这个模式是怎么样的吗？本系列文章，迟来的更新。关注公众号“笔优站长”可阅读全部文章哟。二、场景实例 —— 跨域请求地址的更新变换假如有这样的一个场景，由于用户相册模块上传的照片量越来越大，导致服务器端需要将图片上传模块重新部署到另外一个域（可理解为另一台服务器）中，这样对于前端来说，用户上传图片的请求路径发生变化，指向其他服务器，这就导致跨域问

一、写在前面适配器模式(Adapter)：将一个类(对象）的接口(方法或者属性）转化成另外一个接口，以满足用户需求，使类(对象）之间接口的不兼容问题通过适配器得以解决。上述的简介，你能想到这个模式是怎么样的吗？本系列文章上次更新是一个月前了，很抱歉，最近项目太忙了，我已经加了一个月的班了，月平均工时12.1个小时。回到家的时候基本上都是23点左右了，实在太累了。关注公众号“笔优站长”可阅读全部文章哟。二、场景实例 —— JQuery生活中的适配器可能直接说适配器，还是有朋友会出现一脸懵逼

一、写在前面外观模式（Facade）：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。还记得前两天的设计模式吗？但是今天的这个虽然你可能没听过，但是日常的开发中你肯定用到过了。关注公众号“笔优站长”可阅读全部文章哟。二、场景小例子 —— 添加一个点击事件现在为页面文档document对象绑定了一个click事件来实现隐藏提示框的交互功能，直接用onclick为document绑定

一、写在前面在前面的文章中，创建型模式的介绍以及使用以及讲述完成了，后面进入新的一个篇章“结构型设计模式”，它与创建型模式有何不同呢？结构型设计模式关注于如何将类或对象组合成更大、更复杂的结构，以简化设计。关注公众号“笔优站长”可阅读全部文章哟。结构型设计模式可分为以下几种：外观模式适配器模式代理模式装饰者模式桥接模式组合模式享元模式后面的文章会依次对上述的几种模式进行拆分与解析，若写的不好的地方请指出！废话不多说，下一篇正式开始。二、写在后面有问题请留言或者@博主,谢谢

一、写在前面单例模式（Prototype）：关注公众号“笔优站长”可阅读全部文章哟。二、场景小例子 —— 创建一个焦点图假设页面中有很多焦点图(网页中很常见的一种图片轮播，切换效果)，那么我们要实现这些焦点图最好的方式就是通过创建对象来一一实现，所以我们就需要有一个焦点图类，比如我们把这个类定义为LoopImages。/** * 图片轮播类 * @param {*} imgArr 轮播图数组 * @param {*} container 轮播图图片容器 */var LoopImages

一、写在前面原型模式（Prototype）：用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性以及方法。语言中的原型：在JavaScript中的继承是靠原型链实现的，那么这就是JavaScript中的原型模式。原型模式就是将原型对象指向创建对象的类，使这些类共享原型对象的方法与属性。当然JavaScript是基于原型链实现对象之间的继承，这种继承是基于一种对属性或者方法的共享，而不是对属性和方法的复制。关注公众号“笔优站长”可阅读全部文章哟。二、场景小例子 —— 创建一个焦点图假

一、写在前面建造者模式（Builder）：将一个复杂对象的构建层与其表示层相互分离，同样的构建过程可采用不同的表示。前几天的工厂模式学习，你会认为创建任何对象只需要工厂模式就可以了吗？关注公众号“笔优站长”可阅读全部文章哟。二、场景小例子 —— 发布用户简历今天，在公司里临时接到在页面发布用户简历的需求，具体的如下：有一些找工作的人，想借助咱们的网站发布自己的简历，但是这些简历有一个要求，除了可以将他们的兴趣爱好以及一些特长发布在页面里，其他信息，如他们的联系方式，不要发布在网站上。要让需求公司来

一、写在前面抽象工厂模式（Abstract Factory）：通过对类的工厂抽象使其业务用于对产品类簇的创建，而不负责创建某一类产品的实例。还记得前两次在讨论工厂方法模式时提到的抽象类么……关注公众号“笔优站长”可阅读全部文章哟。二、一个小例子 —— 抽象类上次介绍工厂方法时曾提到过抽象类，那么在JavaScript中如何创建一个抽象类呢?抽象类有什么用?与抽象类相关的又有哪些模式呢?抽象类?你知道abstract在JavaScript中还是一个保留字吗？所以目前来说还不能像传统面向对象语言那样轻松

一、写在前面工厂方法模式（Factory Method）：通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。关注公众号“笔优站长”可阅读全部文章哟。二、一个小场景广告是公司主要的一个经济来源，这不，很多企业等着要来公司首页打广告呢。需求如下：新来了一批广告资源需要投放，关于计算机培训的，一批是Java的，用绿色的字体。还有一批是PHP的，要用黄色的字体，红色背景。（PHP是世界上最好的语言，所以要用黄色的字体 ）于是我们就准备创建这样两个类，然后通过实例对象方式来完成这个需求。代码如下

一、写在前面简单工厂模式（Simple Factory）：又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象的实例。主要用来创建同一类对象。二、一个小场景有这样的一个场景，假如我们要做一个登录模块，需求如下：用户名输入框的地方，如果用户输入的内容不符合规范就自定义个警示框警示一句“用户名不能多于16个字母或者数字”。大多数的情况下会这样写var LoginAlert = function (text){ this.content = text;}LoginAlert.show = fu

一、写在前面创建型设计模式是一类处理对象创建的设计模式，通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。创建型模式可分为以下几种：简单工厂模式工厂方法模式抽象工厂模式建造者模式原型模式单例模式后面的文章会依次对上述的几种模式进行拆分与解析，若写的不好的地方请指出！废话不多说，下一篇正式开始。...

一、大类简介根据每种设计模式的侧重点不同，可以分为以下几种：创建型模式结构型模式行为型模式技巧型模式架构型模式开发人员通常想知道在他们的工作流程中是否有一个（或一组）理想的模式。这个问题没有一个真正的单一答案：我们要完成的每个脚本和Web应用都可能会有它自己的独特需求，我们需要思考模式对实现来说在哪些方面能够提供真正的价值。例如，有些项目可能很需要观察者模式提供的解耦（降低应用中各部分的彼此依赖）好处，但对其它根本不关切解耦的项目来说几乎用不上这个模式的好处。换言之，一旦我们对设计模式