单例模式实例 (创建类模式): let elBalance = document.getElementById('balance') function init () { var a = new Division('.page.a') var b = new Dicision('.page.b') } function renderBalance(){ var resource = new Resource() elBalance.innerText = resource.balance } f…

1.构造器模式——创建类模式   ES6:class Student{ constructor(score,quality){ this.score = score this.quality = quality } sumScore(){ return this.score + this.quality }} ES5:function Student(name,gender,score){ this.name = name; this.gende = gender; this.score = s…

最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单工厂 又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例. 两种实现方式,第一种是通过类实例化对象创建,第二种是创建一个新对象然后包装增强其属性和功能. demo代码. 2)工厂方法 通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例. 将工厂方法看作是一个实例化对象的工厂类. demo…

最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出. 1)高阶函数实现AOP AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计.安全控制.异常处理等. 把这些功能抽离出来之后,再通过“动态织入”的方式掺入业务逻辑模块中. 这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很…

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

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个…

在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编写. 先思考一下一个切换效果需要完成的操作 1.准备阶段,将各个strip归位到动画效果开始的位置. 2.动画效果处理. 3.执行. 3.完成. 所有的切换效果都具备上述3步操作. 既然这样就好抽象了. 可以对上述的操作进行单独定义,然后通过模板方法模式对各个操作进行调用. 所谓的模板方法模式,其实就是有这么…

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq…

<parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型或强类型,静态或动态语言,命令式或说明式语言.每种语言都有天生的优缺点.一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些. 术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬. 换到程序中, 静态语言里可能需要花很多功夫来实现装饰者,而js由于能随时往对象上…

说明: 未完成...更新中.... 一.javascipt设计模式分类 设计模式分类有很多标准,最流行的三种如下 1)  creational  --  主要关注对象创建 Creational design patterns deal directly with object initialization procedures focusing on the creation of situation-specific objects. Without thinking about how ob…

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

该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题./将解决问题的方法制作成模板,并且这些模板可应用于多种不同的情况.有效模式的附加要求:适合性,实用性,适用性. 模式的优点: 防止局部问题引起大问题,模式让我们的代码更有组织性 模式通常是通用的解决方式,不管我们开发哪种应用程序,都可以用模式优化我们代码的结构 模式确实可以让我们避免…

在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和else逻辑代码,这些代码维护起来非常麻烦,但是麻烦的事情远远不止于此.通常一个项目中不止涉及单个的表单或者数据的认证,他们往往成群结队地出现.所以一开始为了他们而编写的if和else逻辑代码不仅会显得非常臃肿,而且随着项目的扩展,使你的代码或变得越来越黏糊,就像.......是的,就像意大利面条一样!为了改动小…

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

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素 许多浏览器都支持 Javascript 的 Array.prototype.forEach 迭代器可以分为 内部迭代器 和 外部迭代器 一.jQuery 中的迭代器 $.each( [1,2,3,4], function (i, n) { console.log( "当前下表为…

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问 代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效率.状态判断等. 代理模式中最常用的是虚拟代理和缓存代理 一.虚拟代理 虚拟代理是把一些开销很大的对象,延迟到真正需要它的时候才去创建执行 示例: 虚拟代理实现图片预加载 // 图片加载函数 var myImage = (function(){ var imgNode = document.crea…

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

一.定义 装饰者模式可用来透明地把对象包装在具有同样接口的另一个对象之中.这样一来,你可以给一个方法添加一些行为,然后将方法调用传递给原始对象.相对于创建子类来说,使用装饰者对象是一种更灵活的选择(装饰者提供比继承更有弹性的替代方案). 装饰者用于通过重载方法的形式添加新功能,该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的. 二.举例 2.1 装饰者是一种实现继承的替代方案.当脚本运行时,在子类中添加行为会影响原有类所有的实例,而装饰者却不然.取而代之的是它能给不同对象各自添加新…

一.定义 适配器模式可用来在现有接口和不兼容的类之间进行匹配.使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象.在设计类的时候旺旺会遇到有些接口不能与现有API一同使用的情况.借助于适配器,你不用直接修改这些类也能使用它们. 适配器可以被添加到现有代码中以协调两个不同的接口.如果现有代码的接口能很好的满足需要,那就可能没有必要使用适配器.但要是现有接口对于手头的工作来说不够直观或实用,那么可以使用适配器来提供一个更简化或更丰富的接口. var client…

一.前言 门面模式,也称Facade(外观)模式.核心的两点作用—— 1> 简化类的接口(让接口变得更加容易理解.容易应用.更加符合对应业务),来掩盖一个非常不同或者复杂的实现 2> 消除类与使用它的客户代码之间的耦合 可以把门面模式想成是简化API来展示给其他开发人员,通常都是可以提高可用性. 二.举例 例子一.事件监听 function addEvent(el, type, fn) { if (window.addEventListener) { el.addEventListener(t…

一个类或对象中往往会包含别的对象.在创建这种成员对象时,你可能习惯于使用常规方式,也即用new关键字和类构造函数.问题在于这回导致相关的两个类之间产生依赖性. 工厂模式用于消除这两个类之间的依赖性,它使用一个方法来决定究竟要实例化哪个具体的类.这里介绍简单工厂模式(动态选择并生成实例)及真正的工厂模式(亦称工厂方法),后者使一个类的实例化延迟到了子类.而子类可以重写接口方法以便创建的时候指定自己的对象类型. 一.简单工厂 拿生产自行车举例子,先看它的类及对应的方法—— var Bicycle =…

桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化. 一.使用场景 使用场景一:事件监控 对于前端而言,最典型的使用场景——事件监控.如—— addEvent(element, 'click', getBeerById); // 可以看出这是一个只能工作在浏览器中的API,根据时间监听期回调函数的工作机制,事件对象会被作为第一个参数传递给这个函数. // 在本例中并没有使用这个参数,而只是从this对象获取ID.如果你对这个API函数做单元测试,就很困难了. // 对于…

(转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性了,有了面向对象之后,自然就会想——那是不是还有设计模式呢?由于js面向对象的方式是基于原型(prototype)的,而不是传统基于类型(class),所以js的设计模式也和经典的设计模式有些差异. 关于设计模式 先说说什么是设计模式吧.很多人都觉得“设计模式”这东西很玄乎,把Gof四人帮的<Desig…

概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者).发布者的状态发生变化时就会通知所有的订阅者,使得它们能够自动更新自己. 观察者模式的使用场合就是:当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式. 观察者模式的中心思想就是促进松散耦合,一为时间上的解耦,二为对象之间的解耦.让耦合的…

引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但是不在乎钱,可以选择坐飞机. 如果没有钱,可以选择坐大巴或者火车. 如果再穷一点,可以选择骑自行车. 在程序设计中,我们也常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法. 这些算法灵活多样,而且可以随意互相替换.这种解决方案就是本文…

引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象. 在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等. 模式定义 保证一个类仅有一个实例,并提供一个访问它的全…

了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的方式就是返回一个内联函数(何为内联函数?就是在函数内部声明的函数): 2.在JavaScript中有作用域和执行环境的问题,在函数内部的变量在函数外部是无法访问的,在函数内部却可以得到全局变量.由于种种原因,我们有时候需要得到函数内部的变量,可是用常规方法是得不到的,这时我们就可以创建一个闭包,用来…

-->面向对象中的23种设计模式简介 最近看了一本书,推荐给大家<JavaScript设计模式与开发实践>图灵出版社的,讲的非常棒! 详细讲解了js开发中常用的14种设计模式,有很多例程,不过对于蒲某这样的前端菜鸟来说还是有些深奥了,代码非常简洁精彩让人拍案叫好啊~ 不得不说这本书从图书馆借来也有一段时间了,表示一直没能吃透,所以只能看一点写一点感想了~…

JavaScript设计模式 一. 设计模式 一个模式就是一个可重用的方案: 有效的解决方法.易重用.善于表达该解决方案: 未通过"模式特性"测试的模式称为模式原型: 三规则:适用性.有用性.可用性: 三个分类: 创建型设计模式 构造器模式(Constructor).工厂模式(Factory).抽象工厂模式(Abstract). 原型模式(Prototype).单例模式(Singleton).建造者模式(Builder) 结构设计模式 装饰模式.外观模式.适配器模式.代理模式 行为设计…

最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线空间功能和命名空间功能,以达到先发布再订阅的功能和防止名称冲突的效果.但是令人感到遗憾的是最终代码并没有给出足够的注释.这让像我一样的小白就感到非常的困惑,于是我将这份最终代码仔细研究了一下,并给出了自己的一些理解,鉴于能力有限,文中观点可能并不完全正确,望看到的大大们不吝赐教,谢谢! 下面是添加了个人注释的…