随笔分类 -  前端设计模式

从一个软件工程师的角度去看待前端
设计模式之职责链模式
摘要：什么是职责链模式 职责链模式的定义是：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。职责链模式的名字非常形象，一系列可能会处理请求的对象被连接成一条链，请求在这些对象之间依次传递，直到遇到一个可以处理它 阅读全文
posted @ 2021-12-09 10:33 自在一方 阅读(98) 评论(0) 推荐(0)
设计模式之模板模式
摘要：什么是模板模式 模板方法模式是一种只需使用继承就可以实现的非常简单的模式。 模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选 阅读全文
posted @ 2021-12-07 11:02 自在一方 阅读(688) 评论(0) 推荐(0)
设计模式之命令模式
摘要：命令模式定义 命令模式(Command)的定义是：用于将一个请求封装成一个对象，从而使你可用不同的请求对客户进行参数化；对请求排队或者记录请求日志，以及执行可撤销的操作。也就是说改模式旨在将函数的调用、请求和操作封装成一个单一的对象，然后对这个对象进行一系列的处理。此外，可以通过调用实现具体函数的对 阅读全文
posted @ 2021-12-02 09:12 自在一方 阅读(157) 评论(0) 推荐(0)
设计模式之状态模式
摘要：什么是状态模式 允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。 简单的解释一下： 第一部分的意思是将状态封装成独立的类，并将请求委托给当前的状态对象，当对象的内部状态改变时，会带来不同的行为变化。 第二部分是从客户的角度来看，我们使用的对象，在不同的状态下具有截然不同的行为 阅读全文
posted @ 2021-11-30 08:38 自在一方 阅读(94) 评论(0) 推荐(0)
设计模式之享元模式
摘要：什么是享元模式 享元模式（Flyweight），运行共享技术有效地支持大量细粒度的对象，避免大量拥有相同内容的小类的开销(如耗费内存)，使大家共享一个类(元类)。 文件上传的例子 上传文件方法比如浏览器插件、Flash 和表单上传等，为了简化例子，我们先假设只有插件和 Flash 这两种。不论是插件 阅读全文
posted @ 2021-11-29 09:12 自在一方 阅读(85) 评论(0) 推荐(0)
设计模式之迭代器模式
摘要：###迭代器模式定义 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。 ###JQ里面的迭代器 迭代器模式无非就是循环访问聚合对 阅读全文
posted @ 2021-11-25 08:56 自在一方 阅读(73) 评论(0) 推荐(0)
设计模式之观察者模式
摘要：观察者模式的定义 观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。 —— Graphic Design Patterns 现实生活中的观察者模式 最近领导拉了个群，群名字叫XXXX项目奋斗群，项目 阅读全文
posted @ 2021-11-22 11:26 自在一方 阅读(120) 评论(0) 推荐(0)
设计模式之策略模式
摘要：什么是策略模式 策略模式说白了就是要实现某一个功能，有多种方案可以选择。我们定义一系列的算法，把它们一个个封装起来，并且使它们可以相互转换。 ###真实的例子 既然提到具体的功能，那只能通过开发常遇到的一些案例去解读策略模式 比如我们要给一个公司开发一个年终奖发奖励的功能： 当绩效类型为“S”时，4 阅读全文
posted @ 2021-11-17 14:58 自在一方 阅读(79) 评论(0) 推荐(0)
设计模式之代理模式中常见的四种模式
摘要：事件代理 什么是事件代理 “事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。 顺便提一下事件传播分成三个阶段： 捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获 阅读全文
posted @ 2021-11-12 10:35 自在一方 阅读(130) 评论(0) 推荐(0)
设计模式之-代理模式
摘要：什么是代理模式 代理模式，式如其名——在某些情况下，出于种种考虑/限制，一个对象不能直接访问另一个对象，需要一个第三者（代理）牵线搭桥从而间接达到访问目的，这样的模式就是代理模式。 刘备三顾茅庐的故事 话说遥想刘备当年，...省略一万字，就是赖上了诸葛亮，那个三顾茅庐，终于撩上了诸葛亮。emm。。。 阅读全文
posted @ 2021-11-11 12:08 自在一方 阅读(79) 评论(0) 推荐(0)
设计模式之适配器模式
摘要：什么是适配器模式 适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一些工作。速成包装器（wrapper）。 生活中的设配器 其实生活中运用了很多的适配，比如你先有了圆形接头 阅读全文
posted @ 2021-11-09 08:46 自在一方 阅读(68) 评论(0) 推荐(0)
设计模式之装饰者模式
摘要：介绍 装饰者提供比继承更有弹性的替代方案。 装饰者用用于包装同接口的对象，不仅允许你向方法添加行为，而且还可以将方法设置成原始对象调用（例如装饰者的构造函数）。 装饰者用于通过重载方法的形式添加新功能，该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的 当然这定义一般很难理解，我们从现实 阅读全文
posted @ 2021-11-08 08:55 自在一方 阅读(85) 评论(0) 推荐(0)
单例模式——面试真题
摘要：下面我们通过平时遇到的面试题继续巩固一下昨天学的单例模式。 描述 实现Storage，使得该对象为单例，基于 localStorage 进行封装。实现方法 setItem(key,value) 和 getItem(key)。 思路 首先我们单例模式最主要的就是有这么一个instance的东西，然后判 阅读全文
posted @ 2021-11-05 11:45 自在一方 阅读(410) 评论(0) 推荐(0)
单例模式--理解及实际应用
摘要：什么叫单例模式 在传统开发工程师眼里，单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。 单例模式的 阅读全文
posted @ 2021-11-03 08:38 自在一方 阅读(353) 评论(0) 推荐(0)
工厂模式·抽象工厂——理解“开放封闭”
摘要：抽象工厂模式（Abstract Factory），提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。——《设计模式：可复用面向对象软件的基础》 一上来就是一个高（bu）端（neng）大（li）气（jie）的定义。抽象工厂这块知识，对入行以来一直写纯 JavaScript 的同学可能 阅读全文
posted @ 2021-11-02 12:03 自在一方 阅读(180) 评论(0) 推荐(0)
简单工厂函数
摘要：前文提到过在实际开发中，不发生变化的代码可以说是不存在的。我们能做的只有将这个变化造成的影响最小化 —— 将变与不变分离，确保变化的部分灵活、不变的部分稳定。那么我们的设计模式的时候就是为了区分变和不变，本文通过一些例子去体验开发过程中随着需求变动，设计一个好的模式是多么重要。 ###简单讲一下构造 阅读全文
posted @ 2021-11-01 16:59 自在一方 阅读(104) 评论(0) 推荐(0)
设计模式之‘道’与‘术’
摘要：想做靠谱的开发，先掌握设计模式。 ##设计模式的学习之道 ##通过设计模式这一系列的学习，希望达到以下三个目的： 1.充分理解前端设计模式的核心思想和基本理念，在具体的场景中掌握抽象的设计原则。 2.会写代码，会写好代码； 3.在实际沟通时言（hui）之（chui）有（niu）物（bi） ##设计模 阅读全文
posted @ 2021-11-01 11:36 自在一方 阅读(191) 评论(0) 推荐(0)