链模式 概念介绍 链模式(Operatc of Responsibility): 通过在对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用.从而简化对该对象的多个方法的多次调用时,对该对象的多次引用. 原型式继承 链模式顾名思义就是像链子一样一个接一个的,我们可以通过点语法在一个方法的后面接着调用另一个方法,那么这种模式是怎么做到的呢?一般来说链模式是基于原型继承的,并且在每一个原型方法的实现上都返回当前对象this,使当前对象一直处于原型链作用域的顶端.这样我们就可以实现链式调用 我…

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

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

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

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

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

策略模式 策略模式(Strategy):将定义的一组算法封装起来,使其相互之间可以替换.封装的算法具有一定的独立性,不会随客户端变化而变化. 其实策略模式在我们生活中可应用的地方还是比较多的,比如在商城搞促销的时候,会有很多打折的情况比如5折呀,7折呀,还会有各种返利,比如满200-100这类的活动,这种场景,我们的策略模式就可以应用上去 示例演示 //创建折扣策略对象 var DiscountStrategy = function() { //创建内部算法对象 var stragtegy =…

访问者模式 概念介绍 访问者模式(Visitor): 针对于对象结构中的元素,定义在不改变该对象的前提下访问结构中元素的新方法 解决低版本IE兼容性 我们来看下面这段代码,这段代码,我们封装了一个绑定事件的方法,接着我们调用这个方法,通过点击页面上的元素,改变元素的样式. var bindEvent=function(dom,type,fn){ if(dom.addEventListener){ dom.addEventListener(type,fn,false); }else if(dom.…

备忘录模式 概念介绍 备忘录模式(Memento): 在不破坏对象的封装性的前提下,在对象之外捕获并保存该对象内部的状态以便日后对象使用或者对象恢复到以前的某个状态. 简易分页 在一般情况下我们需要做分页都是前台传递页数,有的时候还需要传递每页显示行数,然后请求后台数据,后台获取数据后在传递给前台展示出来,我们一起来实现以下这个简易分页吧. 首先我们先编写后台代码,我们在ASP.NET MVC的Home控制器里增加一个Page方法,这个Page方法返回Json格式数据. public JsonR…

迭代器模式 概念介绍 迭代器模式(Iterator): 在不暴露对象内部结构的同时,可以顺序地访问聚合对象内部的元素. 迭代器 程序中的循环是一种利器,循环语句也使我们程序开发更简洁高效,但是有时一遍又一遍的重复性循环却让代码显得循环不堪. 这个时候我们就可以用迭代器来简化我们的循环遍历操作,下面我们创建一个迭代器类. //迭代器 var Iterator=function(items,container){ //获取父容器,若container参数存在,并且可以获取该元素则获取,否则获取doc…

解释器模式 概念介绍 解释器模式(Interpreter):给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 获取元素在页面中的路径 我们都知道获取一个元素很简单通过document.getElementById方法我们可以很轻易的获取到文档中ID为某个字段的元素,那么如果我们想要获取元素在页面中的路径我们又改怎么办呢? 我们可以想象一下,页面就是一个很大的文档树.从最开始的html开始到同级的head,body再到body下的子元素.最后再定位到…

## 委托模式 ### 概念介绍 **委托模式(Entrust): **多个对象接收并处理同一请求,他们将请求委托给另一个对象统一处理请求. ### 利用委托优化循环 如果我们有一个需求需要让用户点击过的列表改变颜色,我们该怎么处理?我想肯定有很多人,和我之前的想法一样 首先我们想要让用户点击过的列表改变颜色,首先我们肯定要获取需要添加点击事件的li标签,然后再去用for循环给每个li添加点击事件让其变颜色,就像下面这样 ``` var li=document.getElementsByTagN…

节流模式 概念介绍 节流模式(Throttler): 对重复的业务逻辑进行节流控制,执行最后一次操作并取消其他操作,以提高性能. 优化滚动事件 有的时候我们再为滚动条添加动画的时候,会发现滚动条不停的抖动,那么为什么会发生这种事情呢?我们简单的写个例子演示下 首先我们需要给页面一定的高度让其产生滚动条,然后我们监听页面在滚动的时候发生了什么. 首先我们编写个简单的方法在调用的时候像控制台输出,接着,我们调用滚动条的滚动事件,看看控制台里发生了什么 function scrollFn(){ con…

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

状态模式 概念介绍 状态模式(State):当一个对象的内部状态发生改变时,会导致其行为的改变,这看起来像是改变了对象 示例演示 在我们写项目的过程中或多或少会遇到如下的多分支判断 function show(value){ if(value==0){ console.log(0); }else if(value==1){ console.log(1); }else if(value==2){ console.log(2); } } 万一哪天需求变更需要调整结果,那就很麻烦了.那么我们有什么办法…

命令模式 概念描述 命令模式(Command): 将请求与实现解耦并封装成独立的对象,从而使不同的请求对客户端的实现参数化 示例代码 命令模式我们可以看成是将创建模块的逻辑封装在一个对象里,这个对象提供一个参数化的请求接口,通过调用这个接口并传递一些参数实现调用命令对象内部中的一些方法. 对于命令模式来说,请求部分很简单,只需要按照给定的参数格式书写指令即可,所以实现部分封装才是重点,因为它要为请求部分提供所需方法. 下面我们来看一个具体的例子,我们通过命令模式来封装一个画布对象并实现调用命令对…

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

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

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

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

观察者模式 观察者模式(Observer): 又被称为发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合. 创建一个观察者对象 首先我们创建一个闭包对象,让其在页面加载就立即执行 var Observer=(function(){ //为了防止消息队列暴露而被篡改,我们将消息容器设置为静态私有变量 var _messages={}; return{ //注册信息接口 regist:function(){}, //发布信息接口 fire:function(){},…

简单模板模式 概念介绍 简单模板模式(Simple template): 通过格式化字符串拼凑出视图避免创建视图时大量节点操作,优化内存开销. 创建模板 在实际的业务中如果我们需要进行前后台交互,或多或少会遇到需要把后台数据,绑定到我们通过js生成的html里,然后再展示到页面上的需求,比如现在我要生成如下样式并展示到页面上. 首先我们肯定会分析这个页面的结构然后去创建相应的节点并在页面中展示,比如像下面这样 //我们可以创建一个模板类的命名空间 var T=T||{}; //我们接着创建一个根…

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

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