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

我的学习笔记是根据我的学习情况来定期更新的,预计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…