最常见的装饰者模式 比如我们要给onload增加新的方法,我们又不能改动内部的代码,如果改动了那么就违反了开放-封闭原则 window.onload=function(){ alert(1) } var _onload=window.onload||function(){}; window.onload=function(){ _onload(); alert(2); } 当然这个函数还是存在问题的 必须要维护_onload这个中间变量,如果后续添加的方法越来越多,那么中间变量也就会越来越多 this丢失问题 比如我们把上述的代码换成document.getElementById var _getElementById=document.getElementById; document.getElementById=function(id){ alert(1) return _getElementById(id) } 很明显这段代码执行起来会有问题,因为这里的_getElementById(id)中this指向的并不是document这个对象而是全局的window那么我们可以用call来修复,但是这样做明显不方便 var _getElementById=document.

定义 中介者模式的作用就是解除对象与对象之间的紧耦合关系.增加一个中介者对象之后,所有的相关对象都通过中介者对象来通信.而不是互相引用.所以当一个对象发生改变时候,只需要通知中介者对象即可. 14.1 现实中的中介者 机场指挥塔 博彩公司 14.2 中介者模式的例子——泡泡堂游戏 初期泡泡堂只支持双人对战.我们来定义一个构造函数 有三个方法Play.prototype.win,Play.prototype.lose,Play.prototype.die因为是两个人 所以当一个玩家死亡的时候游戏便结束 var Player=function(){ this.name=name this.enemy=null;//敌人 } Player.prototype.win=function(){ console.log(this.name+"won") } Player.

11.1 定义与组成 模板方法由两部分组成,第一部分是抽象父类,第二部分是具体实现的子类,通常在抽象父类中封装了子类的算法框架,也包括公共方法和所以方法执行的顺序.子类通过继承这个抽象类,也继承了整个算法结构,并且可以选择重写父类的方法. 应用一般在于我们有一些平行的子类,各个子类之间有一些相同的行为,也有一些不同的行为,如果相同和不同的行为都混合在各个子类中实现,说明这些相同的行为会在各个子类中出现.这些相同的行为实际上可以被搬移到另外一个单一的地方. 11.2 Coffee or Tea 11.2.1 先泡一杯咖啡 步骤如下 用水煮沸 用沸水冲泡咖啡 把咖啡倒进杯子 加糖和牛奶 var Coffee=function(){} Coffee.prototype.boilWater=function(){ console.log("把水煮沸") } Coffee.prototype.brewCoffeeGriends=function(){ console.log("

10.1 回顾宏命令 var closeDoorCommand={ execute:function(){ console.log("关门") } } var openPcCommand={ execute=function(){ console.log("开电脑") } } var openQQCommand={ execute:function(){ console.log("登陆QQ") } } var MacroCommand=function(){ return{ commandsList:[], add:function(){ this.commandsList.push(command) }, execute:function(){ for(var i=0,command;command=this.

定义 假设有一个快餐店,我们会把每个客户的需求全部记录在一个清单上,这样用户不必关系是那个厨师来负责而是关系自己点的餐能不能收到.这些清单就是命令模式 9.1 命令模式的用途 命令模式最常见的应用场景是:有些时候需要向某些对象发送请求,但是并不知道请求的接受者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接受者能够消除彼此之间的耦合关系.命令模式把客人订餐的请求封装成command对象,也就是订餐中的订单对象.这个对象可以在程序中被四处传递,就像订单可以从服务员手中传到厨师的手中,这样一来,客人不需要知道厨师的名字,从而解开了请求调用者和请求接受者之间的耦合关系. 9.2 命令模式的例子——菜单程序 假设我们要编写一个有数十个button的菜单界面,某些程序猿负责绘制按钮样式,某些程序猿负责编写点击按钮后的具体行为.那么当完成这个按钮的绘制之后,应该如何给它绑定onclick事件呢?回想一下命令模式的应用场景: 有些时候需要向某些对象发送请求,但是并不知道请求的接受者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接受者能够消除彼此之间的耦合关系. 我们可以很快找到在这样运用命令模式的理由:点击了按钮之后,必须向某些负责具体行为的对象发送请求,这些对象就是请求的接收者.但是目前并不知道接收者是什么对象,也不知道接收者究竟会做什么.设计模式的主题总是把不变的事物和变化的事物分离开来.按下按钮之后会发生的一些事情是不变的,而具体会发生什么事情是可变的. <button id="button1&

新年快乐~ 定义 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系，当一个对象的状态发送改变时,所有依赖于它的对象都讲得到通知. 8.1 现实中的发布-订阅模式 比如买房,售楼处与买房者的关系.不可能买房者整天打电话过去 而是售楼处记录下这些买房者的电话 一但有合适的楼层再打电话过去. 8.2 发布-订阅模式的作用 在上述的例子中使用发布-订阅模式有显而易见的优点 购房者不用再每天给售楼处打电话咨询问题.售楼处会作为发布者通知这些消息订阅者 购房者和售楼处之间不再强耦合在一起,当有新的购房者出现的时候,他只需要把手机号留给售楼处.不管售楼处换了几个售楼MM离职都不会影响购房者 第一点说明发布-订阅模式可以广泛应用各种异步编程中,这是一种替代传递回调函数的方案.比如ajax请求中的error,succ事件.第二点说明发布-订阅模式可以取代对象之间的硬编码的通知机制.一个对象不再显式调用另一个对象的某个接口. 8.3 DOM事件 实际上DOM事件就是一种发布-订阅模式的实现 document.body.addEventListener( 'click', function(){ alert(2); }, false ); document.body.click(); // 模拟用户点击 document.body.addEventListener( 'click',

定义 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表现.迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即时不关心对象的内部构造,也可以按照顺序访问其中的每个元素. 7.1 jquery中的迭代器 迭代器模式无非就是循环访问聚合对象中的各个元素.比如jquery的$.each函数 其中i为当前索引,n为当前元素 $.each([1,2,3],function(i,n){ console.log('当前下标为:'+i) console.log('当前值为:'+n) }) 7.2 实现自己的迭代器 var each=function(arr,cb){ for(var i=0;i=arr.length;i<l;

定义 策略模式的定义是:定义一系列算法,把它们一个个封装起来,并且使它们可以互相替换.通俗来讲就是用一个盒子装很多颗糖果 如果有需要了那么让一个人去拿 这样如果我们想增加不同的糖果只需要往盒子里面放就行了 5.1 使用策略模式计算奖金 绩效S的人年终奖有4倍工资,A的是3倍,B的是2倍 1.最初代码的实现 var calculateBonus=function(per,salary){ if(per==='S'){ return salary*4 } if(per==='A'){ return salary*3 } if(per==='B'){ return salary*2 } } calculateBonus( 'B', 20000 ); // 输出：40000 calculateBonus( 'S', 6000 ); // 输出：24000 这样写的话.

定义 单例模式的定义是：保证一个类仅有一个实例,并提供一个访问它的全局放完电 4.1 实现单例模式 要实现一个标准的单例模式并不复杂,无非是用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象。 var Singleton=function(name){ this.name=name; this.instance=null;//判断是否已经创建类 } Singleton.prototype.getName=function(){ console.log(this.name) } Singleton.getInstance=function(name){ if(!this.instance){ this.instance=new Singleton(name) } return this.instance } var a=Singleton.getInstance(

3.1 闭包 3.1变量作用域 变量作用域指的是变量的有效范围.JavaScript中是用函数来创建作用域的.在函数中声明一个变量没有带上关键词var那么这个变量会成为全局变量.带上var的情况下这个变量则会成为局部变量 var a = 1; var func1 = function(){ var b = 2; var func2 = function(){ var c = 3; alert ( b ); // 输出：2 alert ( a ); // 输出：1 } func2(); alert ( c ); // 输出：Uncaught ReferenceError: c is not defined }; func1(); 3.2变量的生存周期 对于全局变量来说,全局变量的生命周期是永久的,但是对于函数的局部变量来说,当这个函数被执行完毕后,局部变量也随之销毁.

2.1 this JavaScript中的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的. 2.1.1 this的指向 this的指向大致分为以下4种 作为对象的方法调用 作为普通函数调用 构造器调用 Function.prototype.call或者Function.prototype.apply调用 1.作为对象的方法调用当作为对象的方法调用,this指向该对象 var obj={ a:1, getA:function(){ console.log(this===obj);//true console.log(this.a);//1 } }; obj.getA() 2.作为普通函数调用当函数不作为对象的属性调用,也就是我们常说的用普通函数方法,此时的this总是指向全局对象,浏览器中是window window.name='globalname'; var getName=function(

1.1动态类型语言和鸭子类型 动态类型的程序变量需要到程序运行时候,被赋值后才会有某种类型 var a=1;// number var str='123';//string 静态类型的语言在编译时就已经确定好值了 int b;//number string c;//string 鸭子类型 如果它走起来路像鸭子,叫起来也是鸭子,那么它就是鸭子.内涵就是:用代码来模拟一下鸭子类型 var duck={ duckSinging:function(){ console.log('嘎嘎嘎') } }; var chicken={ duckSinging:function(){ console.log('嘎嘎嘎') } }; var choir=[];//合唱团 var joinChoir=function(animal){ if(animal &&