学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例: var makeSound = function(animal){ if(animal.show instanceof Function){ animal.show(); } } var dog = { show: function(){ console.log('汪汪'); } } var c…

今天,我拿到了张容铭写的这本<JavaScript设计模式>这本书,开始了关于JavaScript更深一点的学习. 看到这本书开始的时候,虽然之前通过看书.一些比较好的视频的讲解,对JavaScript有了基础的认识,但是,在看到书的内容的时候,我内心还是有一种自己差的十万八千里的感觉,之前的代码写法不行,使用全局变量.全局函数,只是面向过程的编程的方法,扩展性.可重用性太低.以后我将每天更新博客,将自己所学每一种设计模式都po出来,我要自己看到自己的进步!!加油! 今天的内容是————面向对…

1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属性和方法时使用的this关键字,因为这些方法定义在构造器的作用域中,所以它们可以访问到私有属性和方法;只有那些需要直接访问私有成员的方法才应该被设计为特权方法. 共有属性和方法:直接链在prototype上的属性和方法,不可以访问构造器内的私有成员,可以访问特权成员,子类会继承所有的共有方法. 共有…

一.享元模式的定义及使用场景 享元模式是为了解决性能问题而诞生的设计模式,这和大部分设计模式为了提高程序复用性的原因不太一样,如果系统中因为创建了大量类似对象而导致内存占用过高,享元模式就非常有用了. 享元模式的关键是区分内部状态和外部状态,剥离了外部状态的对象成为共享对象.有多少种内部状态的组合,系统中便最多存在多少个共享对象.而外部状态存在于共享对象的外部,在必要时被传入共享对象来组成一个完整的对象.一般情况下,以下情况发生时,可以使用享元模式: 1)一个程序使用了大量的类似对象: 2)由于…

一.编程设计原则 1)单一职责原则(SRP): 这里的职责是指“引起变化的原因”:单一职责原则体现为:一个对象(方法)只做一件事. 事实上,未必要在任何时候都一成不变地遵守原则,实际开发中,因为种种原因违反SRP的情况并不少见,比如jQuery中的attr方法,既负责赋值,又负责取值.这对于jQuery的维护者来说,带来了一些困难,然而对于jQuery的用户来说,则方便了使用. 因此很多时候,需要在方便性和稳定性之间有一些取舍. 2)最少知识原则(LKP): 最少知识原则是说,一个软件实体应当尽…

一.状态模式的定义 状态模式的关键是区分事务内部和外部的状态,事务内部状态改变往往会带来事务的行为改变. 状态模式中有意思的一点是,一般我们谈到封装,都是优先封装对象的行为,而非对象的状态.但在状态模式中刚好相反,状态模式的关键是把事务的每种状态都封装为单独的类,跟此种状态有关的行为都封装在这个类的内部.与此同时,我们还可以把状态的切换规则实现分布在状态类中,这样就有效消除了原本存在的大量条件分支语句. 二.状态模式的应用案例——文件上传 在现实中,状态模式的应用案例有很多,如文件上传程序有文件…

一.职责链的定义和使用场景 职责链模式的定义是,职责链模式将一系列可能会处理请求的对象连接成一条链,请求在这些对象之间一次传递,直到遇到一个可以处理它的对象.从而避免请求的发送者和接收者之间的耦合关系. 职责链模式的优点是:请求发送者只需要直到链中的第一个节点,从而解耦了发送者和一组接收者之间的强联系.此外,使用了职责链模式之后,链中的节点对象可以灵活地拆分重组,增加或者删除 一个节点,以及改变节点在链中的位置都是轻而易举的. 职责链模式的缺点是:首先不能保证某个请求一定会被链中的某个节点处理,…

一.组合模式定义及使用场景 组合模式将对象组合成树形结构,用以表示“部分—整体”的层次结构,除了用来表示树形结构之外,组合模式还可以利用对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性. 实现组合模式的关键: 在java等静态语言中,需要单个对象和组合对象都实现同样的抽象接口,对外提供同样的方法,(具有的属性可以不同哈),这可以通过抽象类或者接口来实现. 在javascript中,对象的多态性是与生俱来的,没有编译器去检查对象的类型,因此实现组合模式的要点是保证组合兑现个单个对象用…

一.命令模式使用场景及定义 命令模式常见的使用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接受者是谁,也不知道请求的具体操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求的发送者和请求接受者可以解除彼此之间的耦合关系. 命令模式的本质是对命令进行封装,将发出命令的责任和执行命令的责任分隔开.请求的一方不必知道接收请求一方的接口,更不必知道请求是怎么被接收的,以及操作是否被执行,何时被执行,以及是如何执行的. 命令模式使得请求本身成为一个对象,这个对象和其他对象一样可以被存储和…

早在学习java的时候,就已经接触了继承,在java中因为有extends关键字,因此继承就比较简单.但是在JavaScript中,只能通过灵活的办法实现类的继承. 下面是我昨天在学习过程中,了解到的实现继承的一些方法,包括有具体的代码以及该方法的优缺点: 1.组合继承方式 原理:在子类的构造函数中,调用父类的构造函数,在子类原型上实例化父类,所以称为组合模式. 优点:融合了类式继承和构造函数继承的优点 缺点:父类构造函数调用了两次.第一次是使用构造函数时调用了父类的构造函数,第二次是实现子类原…

一.单例模式介绍                 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例类的特殊类.通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源.如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案. -----百度百科 单例模式实现思路:              单例模式的实现原理是在singleton模式下,如果该实例不存在,可以通过一个方法创建一个类来实现创建类的新实例,如果实例已…

定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点 普通的单例模式: 使用一个变量来标记当前是否已经为某个类创建过对象,如果是的话,在下一次获取该类的实例时,直接返回之前创建的对象.比如:使用一个变量instance标记是否创建了这个类对象,现在需要用到一个Single类,先判断instance是否为null,若不是则直接return返回,若是则new Singleton(); var instance = null; return function(){ if(!instance){…

一.装饰者模式定义 装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象.这种为对象动态添加职责的方式就称为装饰者模式.装饰者对象和它所装饰的对象拥有一致的接口,对于用户来说是透明的. 和java等语言不同的是,java的装饰器模式是给对象动态添加职责,javascript中,给对象添加职责的能力是与生俱来的,更侧重于给函数动态添加职责. 二.java中的装饰者模式实现 package com.bobo.shejimoshi.derector; public cl…

一.发布订阅模式定义 jQuery中的callbacks,defered,promise本质上就是发布订阅模式的实现.ES6的promise内部实现未开源,不了解具体机制 发布订阅模式又叫做观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布—订阅模式的优点十分明显,一是可以实现时间上的解耦,二是可以实现对象之间的解耦. 发布—订阅模式的缺点也很明显,订阅者订阅一个消息后,如果该消息最后都没有发生,这个订阅者依旧会存在于内存中. ja…

一.代理模式定义 代理模式的关键是:当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问.代理模式需要和本体对外提供相同的接口,对用户来说是透明的.代理模式的种类有很多,诸如防火墙代理,保护代理(帮助过滤掉一些请求,控制不同权限的对象对目标对象的访问),虚拟代理(将一些开销很大的对象,延迟到真正需要的时候才创建),缓存代理等.在javascript中使用较多的是虚拟代理. 二.虚拟代理实现图片预加载 在这个例子中,不使用虚拟代理固然也能够解决问题,不过采用虚拟…

一.策略模式定义: 定义一些列的算法/规则,将它们封装起来,使得它们可以互相替换/组合使用.其目的在于将算法/规则封装起来,将算法/规则的使用与实现分离出来. 通过策略模式,可以减少算法计算过程中大量的if-else分支,并提高复用性. 一个策略模式的程序至少由两部分组成,一个是一组策略类,策略类封装了具体算法,并负责具体的实现过程:第二个部分是环境类context,context接受客户的请求,随后将请求委托给具体的某一个策略类.context中需要有一个变量来保存对对象的引用. 二.java…

单例模式的定义:确保一个实例,并提供全局访问. 惰性单例的定义:只在需要的时候才创建对象. 在开发中,有些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等. java中的单例 关键在于使用一个变量来标志当前是否为某个类创建过对象. public class Singleton { private Singleton() {} private static Singleton single=null; //静态工厂方法 public static Singleton getI…

一.this指向问题 1)默认绑定,即作为独立的普通函数调用 此时this指向全局对象window,如果是严格模式下,则指向undefined; 2)隐式绑定,即具有调用上下文(一种场景就是作为对象的属性调用) 隐式绑定会将this绑定到这个上下文对象,如obj.getA():this就指向.之前的函数调用者:对象属性引用链中只有上一层或者说最后一层在调用位置中起作用.如obj1.obj2.foo(),调用时this指向obj2; 隐式绑定常见的问题就是隐式绑定的函数会丢失绑定对象.这点在第二部…

定义:定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换.目的:将算法的使用和算法的实现分离开来.比如: if(input == 'A'){ return 1; } if(input == 'B'){ return 2; } if(input == 'C'){ return 3; } //或者 switch(input){ case 'A': console.log(1); break; case 'B': console.log(2); break; case 'C': conso…

一.中介者模式的定义和应用场景 中介者模式的作用在于解除对象之间的紧耦合关系,增加一个中介者之后,所有对象都通过中介者来通信,而不是互相引用,当一个对象发生变化的时候,仅需要通知中介者即可.从而将网状的多对多关系转换为了简单的一对多关系. 中介者模式使得各个对象之间得以解耦,以中介者和对象之间一对多的关系取代了多个对象之间多对多的关系,其缺点在于将对象之间的复杂性转移到了中介者对象的复杂性,系统增加的这个中介者对象往往是复杂和难以维护的,往往当对象之间的耦合度呈指数增长的时候,就需要考虑引入中介…

一.迭代器模式定义 迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,并且不需要暴露该对象的内部表示. 在当前大部分语言中,都已经内置了迭代器模式.迭代器有内部迭代器和外部迭代器之分,一般现有语言中实现的大多是内部迭代器. 二.jquery中的each实现 对于数组采用数字下标访问,防止原型链上其他非数值属性的干扰. //类似jquery中的each迭代器 $.each=function(obj,callback){ var value, i=, isArray=isArrayLike(o…

一.闭包 闭包某种程度上就是函数的内部函数,可以引用外部函数的局部变量.当外部函数退出后,如果内部函数依旧能被访问到,那么内部函数所引用的外部函数的局部变量就也没有消失,该局部变量的生存周期就被延续. 一个经典的例子如下: <script> //this丢失现象 document.addEventListener('DOMContentLoaded',function(){ var divs=document.getElementsByTagName('div'); console.log(d…

个人理解的应用场景 举个例子,比如想要创建各种类型的车的实例,车的类型有很多种,但创建每种类型车的接口定义可能是一样的,就用到了此模式 相关概念的通俗解释 上述例子中接口的定义叫builder 接口到每种类型的车的具体实现叫concrete builder 真正用于创建车的类叫director 实现模式的思路 1.首先要定义builder的接口 2.然后各个concretebuilder类去实现这个接口 3.director中接收一个builder实例作为参数,最后返回一个一类车的实例 示例代码…

这篇博客只是自己对设计模式的理解的备忘~ 看完了<JavaScript设计模式>这本书,一直没有写博客记录一下,最近抽出时间来重读了一下,就顺便记录一下~ 如果你只是想粗略了解一下JavaScript的设计模式,继续读下去,就好了,如果你想详细了解的话,推荐汤姆大叔的系列博客 深入理解JavaScript系列 下面有些内容也是摘自汤姆大叔的博客~~ 1.Constructor(构造器)模式 声明一个首字母大写的function,通过在构造器前面加new关键字,实例化一个对象. 可以使用原型来定…

设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切图.做少量交互效果的FE甚至可能不会用到,但是当你开始使用Angular/Backbone等框架的时候,就无法避免设计模式.MVC/MVVM这些东西了(反正我是伤脑筋). 我学设计模式是刚开始接触编程大概三个月的时候,看一本书<大话设计模式>,里面用C#语言来写,我很无语,因为强类型的编程语言对于…

我的学习笔记是根据我的学习情况来定期更新的,预计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设计模式. 这次我们要介绍的是创建型设计模式,创建型设计模式是一类处理对象创建的设计模式,通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度. 在创建型设计…