适配器模式 适配器模式(Adapter): 将一个类(对象)的接口(方法或属性)转化成为另外一个接口,使类(对象)之间接口的不兼容问题通过适配器得以解决. 适配相似的框架 不知道大家有没有遇到过这种场景,期初一个项目没有引用jQuery这类js,然后又觉得每次用document对象点出属性很麻烦,于是自己写了个全局的方法,来实现通过id的标识获取元素. function MyQuery (id){ return document.querySelector(id); } 在这个例子中,我们用My…

适配器模式可以用来在现在接口和不兼容的类之间进行适配. 使用这种模式的对象又叫包装器,因为他们是在用一个新接口包装另一个对象. 在设计类的时候往往遇到有些接口不能与现有api一同使用的情况,借助于适配器,你可以不用直接修改这些类也能使用他们. 适配器的特点: 适配器可以被添加到现有代码中以协调俩个不同的接口.从表面上来看,适配器模式很像门面模式,他们都要对别的对象进行包装并改变其呈现的接口,二者之间的差别在于他们如何改变接口.门面元素展现的是一个简化接口,它并不提供额外的选择,而且有时是为了方便…

javascript 采用设计模式主要有下面的三方面原因: 可维护性:设计模式有助于降低模块之间的耦合程度.这使代码进行重构和换用不同的模块变得容易,也使程序员在大型项目中合作变得容易. 沟通:设计模式为处理不同类型的对象提供了一套通用的术语.程序员可以简洁的描述自己系统的工作方式. 性能:采用一些优化性能的模式,可以大幅度提高程序的执行效率,如享元模式和代理模式等 同时,滥用设计模式也会带来一些后果: 复杂性:代码变得复杂,新手难以理解 性能:多数设计模式会或多或少的降低代码的性能 实现容易,…

门面模式有俩个作用: 简化类的接口 消除类与使用它的客户代码之间的耦合 在javascript中,门面模式常常是开发人员最亲密的朋友.它是几乎所有javascript库的核心原则,门面模式可以使库提供的工具更容易理解.使用这种模式,程序员可以间接地与一个子系统打交道,与直接访问子系统相比,这样做更不容易出错. addEvent函数是一个基本的门面,你不用在每次为一个元素添加事件监听器的时候都得针对浏览器间的差异进行检查,有了这个便利,你可以把这个添加事件的底层细节抛在脑后,而把心思集中在如何构建…

本章研究的是一种封装方法调用的方式.命令模式与普通函数有所不同.它可以用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行. 它也可以用来消除调用操作的对象和实现操作的对象之间的耦合.这为各种具体的类的更换带来了极大的灵活性.这种模式可以用在许多不同的场合,不过它在创建用户界面这一方面非常有用,特别是在需要不受限的取消操作的时候.它还可以用来替代回调函数,因为它能够提高在对象之间传递的操作的模块化程度. 命令的结构: 最简形式的命令对象是一个操作和用以调用这个操作…

在事件驱动的环境中,比如浏览器这种持续寻求用户关注的环境中,观察者模式是一种管理人与其任务(确切的讲,是对象及其行为和状态之间的关系)之间的关系的得力工具.用javascript的话来讲,这种模式的实质就是你可以对程序中某个对象的状态进行观察,并且在其发生变化时可以得到通知. 观察者模式中存在俩个角色:观察者和被观察者.也可以叫做发布者和订阅者.这种模式在javascript中有几种不同的实现方法,下面将对其中的一些实现方式进行考察. 模式的实践: 在javascript中有多种方法可以实现发布…

代理(proxy)是一个对象,它可以用来控制对另一对象的访问.它与另外那个对象实现了同样的接口,并且会把任何方法调用传递给那个对象.另外那个对象通常称为本体.代理可以代替本体被实例化,并使其可被远程访问.它还可以把本体的实例化推迟到真正需要的时候,对于实例化比较费时的本体,或者因为尺寸较大以至于不用时不宜保存在内存中的本体,这特别有用.在处理那些需要较长时间才能把数据载入用户界面的类,代理也十分有用. 代理模式最基本的形式就是对访问进行控制,代理对象和本体实现的是同样的接口.实际工作还是本体在做…

本章探讨另一种优化模式-享元模式,它最适合于解决因创建大量类似对象而累及性能的问题.这种模式在javascript中尤其有用,因为复杂的javascript代码很快就会用光浏览器的所有可用内存,通过把大量独立对象转化为少量共享对象,可以降低运行web应用程序所需的资源数量. 享元模式用于减少应用程序所需对象的数量.这是通过对对象的内部状态划分为内在数据和外在数据俩类实现的.内在数据是指类的内部方法所需要的信息,没有这种数据的话类就不能正常运转.外在数据则是可以从类身上剥离并存储在其外部的信息.我…

单体是一个用来划分命名空间,并将一批相关方法和属性组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次. 单体模式,就是将代码组织为一个逻辑单元,这个逻辑单元中的代码可以通过单一的变量进行访问. 单体基本结构是这样: var Singleton = { attribute1:true, attribute2:, method1:function(){}, method2:function(){} } 借助闭包实现单体: Namespace.Singleton = {} 定义之后立即执行的…

组合模式是一种专为创建Web上的动态用户界面而量身定制的模式,使用这种模式,可以用一条命令在对各对象上激发复杂的或递归的行为. 在组合对象的层次体系中有俩种类型对象:叶对象和组合对象.这是一个递归定义,但这正是组合模式如此有用的原因所在.一个组合对象由一些别的组合对象和叶对象组成,其中只有叶对象不再包含子对象,叶对象是组合对象中最基本的元素,也是各种操作的落实地点. 存在一批组织成某种层次体系的对象(具体的结构在开发期间可能无法得知) 希望这批对象或其中的一部分对象实施一个操作 表单验证实例:…

一个类或者对象中,往往会包含别的对象.在创建这种对象的时候,你可能习惯于使用常规方式,即用 new 关键字和类构造函数. 这会导致相关的俩个类之间产生依赖. 工厂模式,就是消除这俩个类之间的依赖性的一种模式,它使用一种方法来决定究竟实例化那个具体的类. 简单工厂模式 假设你想开几个自行车商店,每个商店都有几种型号的自行车出售,可以用这样一个类来表示: var BicycleShop = function(){} BicycleShop.prototype = { sellBicycle:func…

责任链模式可以用来消除请求的发送者和接收者之间的耦合.这是通过实现一个由隐式地对请求进行处理的对象组成的链而做到的.链中的每个对象可以处理请求,也可以将其传给下一个对象. 责任链的结构: 责任链由多个不同类型的对象组成,发送者是发出请求的对象,而接收者则是链中那些接收这种请求并且对其进行处理或者传递的对象.请求本身有时也是一个对象,它封装着操作有关的所有数据.其典型的运转流程大致如下: 发送者知道链中的第一个接收者.它向这个接收者发出请求. 每一个接收者都对请求进行分析,然后要么处理它,要么将其…

本章讨论的是一种为对象增添特性的技术,它并不使用创建新子类这种手段. 装饰者模式可以透明地把对象包装在具有同样接口的另一对象之中,这样一来,你可以给一些方法添加一些行为,然后将方法调用传递给原始对象.相对于创建子类来说,使用装饰者模式对象是一种更灵活的选择. 装饰者可用于为对象增加功能.它可以用来替代大量子类. 考虑前面的自行车类,你现在可能提供一些配件供用户选择,装饰者模式要求我们只需要创建选件类,这些类与四种自行车类都要实现Bicycle接口,但是他们只被用作这些自行车类的包装类.在这个例子…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们都知道JavaScript是面向对象的语言,但是JavaScript是弱类型语言,没有比如C#这些强类型语言那种通过class等关键字实现类的封装方式,不过我们可以通过一些特性模仿实现类型的功能. 首先我们创建一个类 var Students=function(id,name,age){ this.…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 在通常情况下,我们在js中声明一个方法一般是直接 function MethodName(){ //具体逻辑 } 这样声明当然没问题,但是如我们是在团队中进行开发,这样声明的方法有可能会污染全局变量这个时候您或许会想函数是变量吗?那么请看下面的例子 var MethodObject={ MethodNa…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 上一次我们分享了用JavaScript创建对象封装一个类,这次我们来分享如何用JavaScript实现继承和多态. 类式继承 我们首先声明一个父类 function ParentClass(){ this.perentValue=true; } 然后我们为父类添加公有方法 ParentClass.pro…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 上回我们说到组合继承在使用构造函数继承时继承了一遍父类构造函数,在实现子类原型的类式继承时又调用了一遍父类构造函数.因此父类构造函数调用了两遍,并不算最优的继承方式,下面我们再来介绍更好的方式. 原型式继承 首先我们声明一个对象 function proObject(o){ //声明一个过渡函数对象 f…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几次已经和大家分享过了,如何实现javascript的封装继承和多态,这次我们开始正式介绍javascript设计模式. 这次我们要介绍的是创建型设计模式,创建型设计模式是一类处理对象创建的设计模式,通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度. 在创建型设计…

上一次已经给大家介绍了简单工厂模式,相信大家对创建型设计模式有了初步的了解,本次我将给大家介绍的是工厂方法模式. 工厂方法模式 工厂方法模式(Factory Method):通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例. 这样说起来可能还是有很多人不理解,那么我们开始用示例来演示工厂方法模式吧 假如我们需要做一个商城的项目商城的项目里有很多板块,比如蔬果区,生鲜区,日用百货区,等等一些,他们可能所在的区域在页面中主色调完全不一样,按照我们之前分享的简单工厂模式的做法,我们也许会这…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两次我们分享了简单工厂模式,和工厂方法模式,这一次我们接着来分享抽象工厂模式 抽象工厂模式 抽象工厂模式(Abstract Factory): 通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例. 在了解抽象工厂模式前,我们要先了解一下如何在JavaScript中实现抽象类.…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几次,我们分享的都是工厂模式,工厂模式主要是为了创建对象实例或者类簇,关心的是最终创建的是什么,而不关心创建的过程,本次我们来分享创建对象的另一种模式,建造者模式,这种模式在创建独享的时候,要更复杂一些,虽然其目的也是为了创建对象,但是更多的是关心创建这个对象的过程. 建造者模式 建造者模式(Buil…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们之前分享过在JavaScript中继承是靠原型链来实现的,那么设计模式中就一定有原型模式,所以本次我们分享的就是原型模式 原型模式 原型模式(Prototype): 用原型实例指向创建对象的类,使用创建新的对象的类共享原型对象的属性以及方法. 假如我们有一个需求需要做图片轮播效果,但是,在这个页面又…

经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何将类和对象组合成更大.更复杂的结构,以简化设计. 外观模式 外观模式(Facede): 为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更容易.在JavaScript中有时也会用于对底层结构兼容性做统一的封装来简化用户使用. 这个含义看上去有点抽象,下面我将通过示例…

装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我们选中输入框的时候,输入框旁会显示相应提示,或许我们会这样做: html中我们会添加一个输入框,后面放一个隐藏的提示信息 <input type="text" id="tel" /> <span id="tel_text" styl…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两次我们分享了简单工厂模式,和工厂方法模式,这一次我们接着来分享抽象工厂模式 抽象工厂模式 抽象工厂模式(Abstract Factory): 通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例. 在了解抽象工厂模式前,我们要先了解一下如何在JavaScript中实现抽象类.…

我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几次已经和大家分享过了,如何实现javascript的封装继承和多态,这次我们开始正式介绍javascript设计模式. 这次我们要介绍的是创建型设计模式,创建型设计模式是一类处理对象创建的设计模式,通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度. 在创建型设计…

单例模式 单例模式(Singleton) : 又被称为单体模式,是只允许实例化一次的对象类.一个类有且仅有一个实例,并且自行实例化向整个系统提供. 命名空间 单例模式可能是JavaScript中我们最常见的一种模式了,这种模式经常为我们提供一个命名空间,比如我们经常使用jQuery. 下面我们来看看具体的示例吧: var MyQuery={ $:function(id){ return document.getElementById(id); }, css:function(id,key,val…

桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航栏随鼠标移入移出改变颜色的简单特效,但是部分选项卡全部变色,部分选项卡部分变色 html代码如下: <div style="width: 400px;height: 40px;"> <span style="width: 120px;height: 40px;d…

组合模式 组合模式(Composite): 又称部分-整体模式,将对象组合成树形结构以表示"部分整体"的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性. 如果有一个需求需要我们做一个门户网站,涉及到门户网站自然离不开文章列表,那么文章列表里又有文字列表,图片列表,图文列表,这么多种类的文章列表我们该怎么做呢? 首先我们可以创建一个文章列表的抽象父类,让其他的不同类型的文章列表都继承于这个类 var articles=function(){ //子组件容器 this.ch…

模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模式并加以实现 模板方法模式(Template Method): 父类中定义一组操作算法骨架,而将一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤. 总的来说模板方法模式就是将多个模型抽象化归一,从中抽象提取出来一个最基本的模板,然后其他模块只需要继承这个模…