![](https://img-blog.csdnimg.cn/2021011120052462.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
设计模式
设计模式
IamSmaLLR.
这个作者很懒,什么都没留下…
展开
-
Widget(组件式)/MVC/MVP
Widget:(Web Widget指的是一块可以在任意页面中执行的代码块)Widget模式是指借用Web Widget思想将页面分解成部件,针对部件开发,最终组合成完整的页面。实现原理:第一步处理数据,第二步获取模板,第三步处理模板,第四步编译执行。类似Vue中的组件化开发。MVC即模型(model)——视图(view)——控制器(controller),用一种业务逻辑、数据、视图分离的方式组织架构代码。MVC用来分层,对页面处理也是指依据MVC的思想,将页面分成3层,数据层部分、视图层部分和控制器原创 2021-01-19 11:37:36 · 533 阅读 · 1 评论 -
同步模块模式/异步模块模式
模块化:将复杂的系统分解成高内聚、低耦合的模块,使系统开发变得可控、可维护、可拓展,提高模块的复用率。模块化开发是分而治之的思想,实现对复杂系统的分解,使系统随着其功能的增加而变得可控、可拓展、可维护。这就要求我们对模块细化,随着系统功能的增加模块的数量也随之增加。模块开发的成本随之减少,但是模块的接口数量却随之增加,接口的使用成本和开发维护成本也增加,所以合理的模块分割尤其重要。同步模块模式————SMD(Synchronous Module Definition):发出请求后,无论模块是否存在,立即原创 2021-01-19 11:18:07 · 492 阅读 · 0 评论 -
等待者模式
等待者模式(waiter):通过对多个异步进程监听,来触发未来发生的动作。等待者模式是用来解决那些不确定先后完成的异步逻辑的,它监听所有异步逻辑的完成,才会执行成功回调函数。如果一个异步逻辑执行失败,则会执行失败回调函数。感觉promise是基于等待者模式设计的。。。...原创 2021-01-18 14:32:06 · 108 阅读 · 0 评论 -
参与者模式
参与者模式(participator):在特定的作用域中执行给定的函数,并将参数原封不动地传递。js中的call和apply方法可以使在特定作用于中执行某个函数并传入参数,但添加的事件回调函数不能移除,需要借助参与者模式,其实就是bind方法,实现需要一个闭包function bind(fn,context){ return function(){ return fn.apply(context,arguments); }}var demoObj = { title原创 2021-01-18 14:16:19 · 209 阅读 · 0 评论 -
惰性模式
惰性模式(layier):减少每次代码执行时的重复性的分支判断,通过对对象重定义来屏蔽原对象中的分支判断。//单体模式定义命名空间var A ={}A.on = function(dom,type,fn){ if(dom.addEventListener){ dom.addEventListener(type,fn,false); }else if(dom.attachEvent){ dom.attachEvent('on'+type,fn);原创 2021-01-17 11:22:13 · 184 阅读 · 1 评论 -
简单模板模式
简单模板模式(Simple template):通过格式化字符串拼凑出视图避免创建视图时大量节点操作。优化内存开销。一个一个创建DOM元素插入视图会带来极大的内存消耗,创建模板后,用数据去格式化字符串来渲染视图并插入到容器里,性能提升许多。模板生成器A.view = function(name){ var v = { code : '<pre><code>{#code#}</code></pre>', img :原创 2021-01-17 10:54:57 · 136 阅读 · 0 评论 -
节流模式
节流模式(Throttle):对重复的业务逻辑进行节流控制,执行最后一次操作并取消其他操作,以提高性能。实现一个节流器var throttle = function(){ var isClear = arguments[0],fn; if(typeof isClear === 'boolean'){ fn = arguments[1]; fn.__throttleID && clearTimeout(fn.__throttleID);原创 2021-01-16 13:38:40 · 455 阅读 · 0 评论 -
数据访问对象模式
数据访问对象模式(Data access object-DAO):抽象和封装对数据源的访问和存储,DAO通过对数据源链接的管理方便对数据的访问与存储。数据访问对象类DAO,方便管理自己本地存储库。数据访问对象类是对本地存储的一次封装,基本上是对数据的增删改查操作。本地存储保存在localstorage中,对于同一个站点,没有分割库,所以要将每次存储的数据字段前面添加前缀表示。//创建一个DAO类var BaseLocalStorage = function(preId,timeSign){原创 2021-01-16 13:11:15 · 291 阅读 · 0 评论 -
委托模式
委托模式(Entrust):多个对象接收并处理同一请求,他们将请求委托给另一个对象统一处理请求。事件流就是委托模式的一个典型的例子,事件流从捕获开始,到触发该事件,再到事件冒泡三个阶段。可以将子元素的事件委托给更高层面上的父元素去绑定执行事件委托是一种提高程序性能,降低内存空间的技术手段,它利用了事件冒泡的特性,只需要在某个祖先元素上注册一个事件,就能管理其所有后代元素上同一类型的事件。用一个例子来描述委托,先创建一个HTML文档,包含一个容器元素,以及它的3个子元素。<div id="del原创 2021-01-15 14:59:18 · 859 阅读 · 0 评论 -
链模式
链模式(Operate of Responsibility):通过在对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用。从而简化对该对象的多个方法的多次调用时,对该对象的多次引用。链模式是基于原型继承的,并且在每一个原型方法的实现上都返回当前对象的this,使当前对象一直处于原型链作用域的顶端,这样即可实现链式调用。一个简单的例子: function countNum(count){ this.count = count } countNum.prototype ={原创 2021-01-15 14:38:44 · 444 阅读 · 0 评论 -
解释器模式
解释器模式(Interpreter):对于一种语言,给出其文法表示形式,并定义一种解释器,通过使用这种解释器来解释语言中定义的句子。解释器是对客户提出的需求,经过解析而形成的一个抽象解释程序。是否可以应用解释器模式的一条准则是能否根据需求解析出一套完整的语法规则,不论该语法规则简单或者是复杂都是必须的,解析器需要按照这套规则才能实现相应的功能。...原创 2021-01-14 11:37:07 · 46 阅读 · 0 评论 -
迭代器模式
迭代器模式(Iterator):在不暴露对象内部结构的同时,可以顺序地访问聚合对象内部的元素。迭代器是用来顺序的访问一个聚合对象内部的元素的,可以简化我们遍历操作。例如以一个轮播图为例,图片元素对象就是一组聚合对象,创建一个迭代器来专门处理这些图片数据。 var Iterator = function(item,container){ var container = container && document.getElementById(container) || docu原创 2021-01-14 11:30:16 · 73 阅读 · 0 评论 -
备忘录模式
备忘录模式(Memento):在不破坏对象的封装性的前提下,在对象之外捕获并保存该对象内部的状态以便日后对象使用或者对象恢复到以前的某个状态。通过备忘录模式可以来缓存请求过的数据,当每次发送请求的时候对当前状态做一次记录,将你请求下的数据以及对应的页码缓存下来,将来某一时刻想要返回到某一浏览过的页面,直接在缓存中查询即可,不必重新发送新的请求。例如一个应用的换肤功能,第一次打开要向服务器发送请求来获取响应数据,但第二次不必再发送,直接使用第一次缓存下来的数据即可。MVC架构中M(model)部分,很多原创 2021-01-13 11:12:44 · 86 阅读 · 0 评论 -
中介者模式
中介者模式(Mediator):通过中介者对象封装了一系列对象之间的交互,是对象之间不在相互引用,降低它们之间的耦合。中介者模式和观察者模式类似都是使用消息的收发机制实现的,在观察者模式中,一个对象既可以是消息的发送者也可以是消息的接收者,他们之间信息交流依托于信息系统实现的解耦。而中介者模式中消息的发送者只有一个,就是中介者对象,而且中介者对象不能订阅消息,只有那些活跃对象(订阅者)才能订阅中介者的消息,中介者对象只能是消息的发送者。var Mediator = (function () {原创 2021-01-13 10:48:09 · 99 阅读 · 0 评论 -
访问者模式
访问者模式(Vistor):针对于对象结构中的元素,定义在不改变该对象的前提下访问结构中元素的新方法。例如IE中的attachEvent中的this指向的不知当前这个元素而是window对象,所以可以使用call或者apply方法来改变函数执行时的作用域,让某个对象在其他作用域中执行。function bindIEEvent(dom,type,fn,data){ var data = data || {}; dom.attachEvent('on'+type,function(e){原创 2021-01-12 12:17:10 · 59 阅读 · 0 评论 -
命令模式
命令模式(Command):将请求与实现解耦并封装成独立对象,从而使不同的请求对客户端的实现参数化。命令对象//模块实现模块var viewCommand = (function(){ //方法集合 var Action = { //创建方法 create : function(){}, //展示方法 display : function(){} } //命令接口 return function e原创 2021-01-12 11:39:33 · 89 阅读 · 0 评论 -
职责链模式
职责链模式(Chain of Responsibility):解决请求的发送者与请求的接收者之间的耦合,通过职责链上的多个对象对分解请求流程,实现请求在多个对象之间的传递,直到最后一个对象完成请求的处理。对于一个用户信息提交表单的“半成品”需求,在需求不确定时,可以将需求独立出一个个的模块对象去处理,让模块分工协作来完成整体功能,例如绑定事件是第一部分,有的是keyup,有的是change事件,第二部分是创建XHR对象进行异步请求获取数据,第三部分对适配响应数据,将接收到的数据格式化成可处理的形式,最后一原创 2021-01-11 22:26:39 · 103 阅读 · 0 评论 -
策略模式
策略模式(Strategy):将定义的一组算法封装起来,使其相互之间可以替换。封装的算法具有一定独立性,不会随客户端变化而变化。结构上与状态模式类似,在内部封装一个对象,然后通过返回的接口对象实现对内部对象的调用,不同的是策略模式不需要管理状态、状态间没有依赖关策略之间可以相互替换、在策略对象内部保存的都是相互独立的一些算法。//价格策略对象var PriceStrategy = function(){ //判断结果保存在内部状态中 var stragtegy = {原创 2021-01-11 22:12:45 · 74 阅读 · 0 评论 -
抽象工厂模式
抽象工厂模式(Abstract Factory):通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例。抽象类即定义一个产品簇,并声明一些必备的方法,如果子类没有去重写方法调用时会抛出错误。抽象类创建的对象是抽象的,所以不能使用它来创建一个真实的对象,一般用它作为父类创建一些子类。 //抽象工厂方法var VehicleFactory = function(subTyp...原创 2021-01-04 19:45:54 · 60 阅读 · 0 评论 -
简单工厂模式
https://www.cnblogs.com/imwtr/p/9451129.html#o1简单工厂模式(Simple Factory):又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例。主要用于创建同一类对象。举例一个简单工厂 //篮球基类var Basketball = function(){ this.intro = '篮球盛行于美国'}Besketball....原创 2021-01-03 10:49:06 · 58 阅读 · 0 评论 -
单例模式
单例模式(Singleton):又被称为单体模式,是只允许实例化一次的对象类。jQuery库,单例模式就为它提供了一个命名空间。单例模式常用来定义命名空间,解决变量可能会重复的问题,在访问时都通过xxx.xxx方法进行访问。 var set ={ g:function(id){ return document.getElementById(id); }, ...原创 2021-01-05 21:35:58 · 58 阅读 · 0 评论 -
建造者模式
建造者模式(Builder):将一个复杂对象的构建层与其表示层相互分离,同样的结构过程可采用不同的表示。建造者模式更注重的是创建的细节。例如一个应聘者的实例,在创建过程中需要注意应聘者的兴趣爱好,姓名等个人信息,以及期望职位等等。 //创建一个人类 var Human = function(param){ this.skill = para...原创 2021-01-04 06:59:27 · 57 阅读 · 0 评论 -
工厂方法模式
工厂方法模式(Factory Method):通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。 //当需求在改变时,使用传统的简单工厂模式不仅要添加类,还要修改工厂函数。//使用工厂方法模式,并且使用安全模式创建,防止不了解的开发人员忘记new。//安全模式创建工厂类var Factory = function(type,content){ if(this insta...原创 2021-01-03 05:03:55 · 87 阅读 · 0 评论 -
原型模式
原型模式(prototype):用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法。原型模式就是将原型对象指向创建对象的类,使这些类共享原型对象的方法与属性。js是基于原型链实现对象之间的继承,这种继承是基于一种对属性或者方法的共享,而不是对属性和方法的复制。例如一个图片轮播类 var LoopImages = function(imgArr,container){ ...原创 2021-01-05 21:42:42 · 47 阅读 · 0 评论 -
外观模式
外观模式(Facade):为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更容易。定义一个统一接口方法,提供一个更见的高级接口,简化对复杂的底层接口不统一的使用需求。对于一个页面文档绑定click事件容易被覆盖,即使用DOM0级,所以需要使用DOM2级的addEventListener来实现,当不可以使用时再使用0级进行绑定 //外观模式实现function ...原创 2021-01-06 19:20:52 · 80 阅读 · 0 评论 -
适配器模式
适配器模式(Adaper):将一个类(对象)的接口(方法或者属性)转化成另外一个接口,以满足用户的需要,使类(对象)之间接口的不兼容问题通过适配器得以解决。实际上就是为两个代码库所写的代码兼容允许而书写额外的代码。 例如一个A框架想要适配JQuery对象 A.g = function(id){ //通过JQuery获取JQuery对象,然后返回第一个成员 return $(id)...原创 2021-01-06 15:00:40 · 85 阅读 · 0 评论 -
装饰者模式
装饰者模式(Decorator):在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户更复杂的需求。在原有基础上添加新的功能来满足用户的需求 var decorator = function(input,fn){ //获取事件源 var input = document.getElementById(input); //如果事件源已经绑定...原创 2021-01-07 01:03:07 · 80 阅读 · 0 评论 -
桥接模式
桥接模式(Bridge):在系统沿着多个维度变化的同时,又不增加其复杂度并以达到解耦。在写代码时要注意对相同的逻辑做抽象提取处理,使得代码更加简洁,复用率也会更高,可读性也更高,这是面向对象编程的一个目的。例如一个使得元素字体颜色和背景颜色改变的功能,可以抽象为一个函数,在触发事件是执行这个函数即可。 //抽象function changeColor (dom,color,bg){ d...原创 2021-01-08 05:01:29 · 112 阅读 · 0 评论 -
代理模式
代理模式(Proxy):由于一个对象不能直接引用另一个对象,所以需要通过代理对象在这两个对象之间起到中介的作用。跨域问题:域名相同端口不同,域名相同协议不同,域名和域名对应的ip,主域和子域,子域和子域都存在同源策略的限制。将不同源的两个域抽象为两个对象,想要实现通信,就需要找个代理对象来实现通信。1.简单的使用img之类通过src属性可以向其他域下的服务器发送请求,不过是get请求,而且是单向...原创 2021-01-07 14:53:00 · 59 阅读 · 0 评论 -
组合模式
组合模式(Composite):又称为部分-整体模式,将对象组合成树形结构以表示“部分整体”的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。通过继承一个虚拟父类来实现组合,根据层次关系来实现整体之间的关系,组合模式用到了继承,比如组合继承和寄生组合继承。各个模块继承父类形成一个独立的个体,互不影响,避免相互间的耦合,增强了组合后的模块的复杂性。 组合模式更常用于创建表单上,对于...原创 2021-01-08 23:15:41 · 57 阅读 · 0 评论 -
享元模式
享元模式(Flyweight):运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销。享元模式主要对数据、方法共享分离,它将数据和方法分成内部数据、内部方法和外部数据、外部方法。内部方法和内部数据指的是相似或者共有的数据和方法,所以将这一部分提取出来减少开销,以提高性能。 例如一个新闻页面的分页效果 //创建一个享元对象var Flyweight =function(...原创 2021-01-09 05:33:27 · 73 阅读 · 0 评论 -
模板方法模式
模板方法模式(Template Method):父类中定义一组操作算法骨架,而将一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。模板方法模式就是将多个模型抽象化归一,从中抽象提取出来一个最基本的模板,这个模块可作为实体对象也可以作为抽象对象,其他模块只需要继承这个模板方法,也可以拓展某些方法。假设设计一个提示框的基类,其他框类只需要在继承的基础上,拓...原创 2021-01-09 01:18:41 · 110 阅读 · 0 评论 -
状态模式
状态模式(State):当一个对象的内部状态发生改变时,会导致其行为的改变,看起来像是改变了对象。当代码中的条件判断语句多而复杂,可以使用状态模式,将被一种条件作为一种状态,面对不同的判断结果,其他就是选择对象内的一种状态。 //投票结果状态对象var ResultState = function(){ //判断结果保存在内部状态中 var State = { ...原创 2021-01-10 09:48:35 · 186 阅读 · 1 评论 -
观察者模式
观察者模式(Observer):又被称作发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主题对象与观察者之间的功能的耦合。 创建观察者对象,有一个消息容器,三个方法:订阅消息方法,取消订阅方法,发送订阅的消息方法 // 将观察者放在闭包中,当页面加载就立即执行var Observer = (function(){ //防止消息队列被暴漏而被篡改所以将消息容器作为静态私有变量保存...原创 2021-01-10 01:55:57 · 86 阅读 · 0 评论 -
MVVM模式
MVVM模式由三部分组成:模型(model)、视图(View)和视图模型(ViewModel).MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller(MVC)模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向原创 2021-01-10 14:40:12 · 2725 阅读 · 0 评论