devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端面试五_let t = +new date()

作者：2023面试高手 | 2024-04-15 22:20:02

赞

踩

let t = +new date()

25、列出你所知道的设计模式并简述

设计模式的定义：

● 设计模式是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。

 

使用设计模式的目的：

●  为了代码的可重用性、可靠性、可维护性、更容易被他人理解

 

设计模式的分类：主要分为三大类

创建型模式：5种，Factory Method工厂方法模式、Abstract Factory抽象工厂模式、Singleton单例模式、Builder建造者模式、Prototype原型模式

结构型模式：7种，Adapter适配器模式、Decorator装饰模式、Proxy代理模式、Facade Pattern门面模式、Bridge桥梁模式、Composite合成模式、Flyweight享元模式。

行为型模式：11种，Strategy策略模式、Template Method模板方法模式、Observer观察者模式、Iterator迭代子模式、 Chain Of Responsibility责任链模式、Command命令模式、Memento备忘录模式、State状态模式、Visitor访问者模式、Mediator调停者模式、Interpreter解释器模式

 
面试被问到关于设计模式的知识时，可以拣最常用的作答，例如： 

1）工厂模式：可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置，防止代码重复。工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是对象识别问题，因为根本无法 搞清楚他们到底是哪个对象的实例 。

  1. function createPerson(name,age,job){
  2.     let obj = new Object();
  3.     obj.name = name;
  4.     obj.age = age;
  5.     obj.job = job;
  6.     obj.printName = function(){
  7.       console.log(this.name)
  8.     }
  9.     return obj;
  10. }
  11.  
  12. let person1 = createPerson('ke',10,'teacher');
  13. let person2 = createPerson('hua',20,'student');
  14. console.log(person1['name']); //两种形式访问对象的属性
  15. console.log(person1.name);

 

2）构造函数模式：解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：

  1. 1.构造函数方法没有显示的创建对象 (new Object());
  2.  
  3. 2.直接将属性和方法赋值给 this 对象;
  4.  
  5. 3.没有 renturn 语句
  6.  
  7. 4.调用构造函数的时候使用new关键字
  8.  
  9. function Person(name,age,job){
  10.    this.name = name;
  11.    this.age = age;
  12.    this.job = job;
  13.    this.printName = function(){
  14.       console.log(this.name);
  15.    }
  16. }
  17.  
  18. let person1 = new Person('hua',10,'student');
  19. let person2 = new Person('ke',20,'teacher');

 

3） 构造器模式+原型模式

定义一筐球，自己设计数据结构，然后能实现不同业务功能

思路：应该是用构造函数+原型链的模式实现封装，在构造函数中定义对象的属性，在函数原型对象 上定义方法

  1. function Balls(){
  2.     this.type = ['red','white','red','white'];
  3.     this.weight = [10,20,30,40];
  4. }
  5.  
  6. //在原型上定义方法，即要实现的业务功能
  7. //找出红球
  8. Balls.prototype.findRedBalls = function(){
  9.   let type = this.type;
  10.   let result = [];
  11.   type.forEach((val)=>{
  12.       if( val==='red' ){
  13.           result.push(val);
  14.       }
  15.   });
  16. }
  17.  
  18. //找出重量大于10的红球
  19. Balls.prototype.findRedAndLarge10Balls = function(){
  20.      let type = this.type;
  21.      let weight = this.weight;
  22.      let result = [];
  23.      type.forEach((val,key)=>{
  24.          if( val === 'red' && weight[key]>10  ){
  25.              result.push(val);
  26.          }
  27.      });
  28. }
  29.  
  30. //可以继续往原型上添加方法，即添加业务功能

- 代理模式：给一个对象提供一个代理对象，并由代理对象控制原对象的引用。实际开发中，按照使用目的的不同，代理可以分为：远程代理、虚拟代理、保护代理、Cache代理、防火墙代理、同步化代理、智能引用代理

 
- 适配器模式：把一个类的接口变换成客户端所期待的另一种接口，从而使原本因接口不匹配而无法在一起使用的类能够一起工作。 

- 模板方法模式：提供一个抽象类，将部分逻辑以具体方法或构造器的形式实现，然后声明一些抽象方法来迫使子类实现剩余的逻辑。不同的子类可以以不同的方式实现这些抽象方法（多态实现），从而实现不同的业务逻辑。 

 

 

 

 

1、单例模式

单例模式的定义

1）单例模式是一种常用的软件设计模式

2）保证一个类只有一个实例，并提供全局访问

通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案

 

实现原理----用一个变量标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象；否则创建该类的实例对象，并且将该实例对象用该标志保存

例子：用代理方式创建一个单例模式：给Body添加一个DIV

CreateDiv是一个简单的类，结合ProxySingleton达到单例模式的效果

  1. const CreateDiv = function(html){
  2.   this.html = html;
  3.   this.init();
  4. }
  5.  
  6. CreateDiv.prototype.init = function(){
  7.   let div = document.createElement('div');
  8.   div.innerHTML = this.html;
  9.   document.body.appendChild(div);
  10. }
  11.  
  12. const ProxySingleton = (function(html){
  13.   let obj=null;
  14.   return function(){
  15.     if(obj){
  16.       return obj;
  17.     }
  18.     return obj = new CreateDiv(html);
  19.   }
  20. })();
  21.  
  22. let obj1 = new ProxySingleton('div1');
  23. let obj2 = new ProxySingleton('div2');
  24. console.log(obj1===obj2);  //true

简单理解单例模式

1）单例模式只允许创建一个对象，因此节省内存，加快对象访问速度，因此对象需要被公用的场合适合使用，如多个模块使用同一个数据源连接对象等等

2） 单例的缺点就是不适用于变化的对象，如果同一类型的对象总是要在不同的用例场景发生变化，单例就会引起数据的错误，不能保存彼此的状态

用单例模式，就是在适用其优点的状态下使用

 

单例模式的优点

1）实例控制 --------单例模式会阻止其他对象实例化其自己的单例对象的副本，从而确保所有对象都访问唯一实例

2）灵活性------------因为类控制了实例化过程，所以类可以灵活更改实例化过程

 

单例模式的缺点

1）开销----- 虽然数量很少，但如果每次对象请求引用时都要检查是否存在类的实例，将仍然需要一些开销。可以通过使用静态初始化解决此问题。

2）可能的开发混淆--------使用单例对象（尤其在类库中定义的对象）时，开发人员必须记住自己不能使用new关键字实例化对象。因为可能无法访问库源代码，因此应用程序开发人员可能会意外发现自己无法直接实例化此类。

3）对象生存期-----不能解决删除单个对象的问题。在提供内存管理的语言中（例如基于.NET Framework的语言），只有单例类能够导致实例被取消分配，因为它包含对该实例的私有引用。在某些语言中（如 C++），其他类可以删除对象实例，但这样会导致单例类中出现悬浮引用

 

惰性单例（P67）------在需要的时候才创建对象实例，对象实例的创建是通过立即执行函数(用一变量标志是否创建过对象)+闭包（函数返回值为函数）

管理单例的逻辑不变，可以抽象出来：用一个变量标志是否创建过对象，是，则下次直接返回这个已经创建好的对象，否则将创建的对象保存在该标志里面

  1. // getSingle管理单例的职责
  2. //fn用于创建对象的方法
  3. const getSingle = function(fn){
  4.     let result;
  5.     return function(){
  6.         return result || ( result = fn.apply(this,arguments) );
  7.     }
  8. }
  9.  
  10. //具体的fn，创建对象
  11. const createLoginLayer = function(){
  12.     let div = document.createElement('div');
  13.     div.innerHTML = 'login layer';
  14.     div.style.display = 'none'; //将登陆窗隐藏
  15.     document.body.appendChild(div);
  16.     return div;
  17. }
  18.  
  19. let createSingleLoginLayer = getSingle( createLoginLayer );
  20. // 真正创建的时机,即等到需要的时候在创建
  21. document.getElementById('loginBtn').onclick = function(){
  22.     let loginLayer = createSingleLoginLayer();
  23.     loginLayer.style.display = 'block';
  24. }

用单例模式实现功能----页面渲染完成一个列表后，给这个列表绑定click事件，如果通过ajax动态往列表追加数据，在使用事件代理的前提下，click事件实际上只需要在第一次渲染列表的时候被绑定一次，但我们不想判断是否是第一次渲染列表，可以利用单例模式，即将管理单例的函数和负责具体功能的函数进行组合

  1. let getSingle = function(fn){
  2.   let result;
  3.   return function(){
  4.     result || (result = fn.apply(this,arguments));
  5.   }
  6. };
  7.  
  8. let bindEvent = getSingle( function(){
  9.   document.getELementById('div1').onclick = function(){
  10.     console.log('click');
  11.   };
  12.   return true;
  13. } );
  14.  
  15. let render = function(){
  16.   console.log('开始渲染');
  17.   bindEvent();
  18. };
  19.  
  20. render();//div只被绑定一次
  21. render();
  22. render();

 

 

2、策略模式

定义：定义一序列的算法，把他们封装起来，并使它们可以相互替换。目的就是将算法的使用与算法的实现分离开来（将不变的部分和变化的部分分隔开）

在js中的策略模式：函数形式的策略对象

策略模式的程序至少有两部分：策略类（在一个对象（函数）里面封装具体的算法，也就是业务功能）；环境类（接受客户的请求，随后把请求委托给某一个策略类---即定义一个函数，在里面根据具体的参数来执行策略类里面具体的策略）

 

在js里面，通过将不同的策略（函数---实现相应的业务功能）封装在一个对象里面；然后在具体的环境下，通过传进来的参数，调用具体的策略

 

使用策略模式计算奖金------年终奖 = 基本工资 * 绩效等级

js版本的策略模式：将不同的策略定义成函数，把所有的策略定义在一个对象里面，然后在定义环境类

发出计算奖金（即调用calBonus()）的命令，会根据传入的参数不同，计算得到不同的结果，体现了多态

  1. // 根据不同的等级来计算年终奖，年终奖 = 基本工资 * 等级数
  2. // 将所有的策略封装在一个对象里面
  3. let strategies = {
  4.     S(salary){
  5.         return salary*4;
  6.     },
  7.     A(salary){
  8.         return salary*3;
  9.     },
  10.     B(salary){
  11.         return salary*2;
  12.     }
  13. }
  14.  
  15. //定义一个函数充当环境类，来接受用户的请求
  16. let calBonus = function(level,salary){
  17.     return strategies[level](salary);
  18. }
  19. console.log(calBonus('S',15000));

缓动动画和表单验证体现了多态（同一个命令可以有不同的行为）

 

用原生js实现动画效果的原理：通过连续改变元素的某个css属性，如left   right   bottom  color   background-color等属性来实现，连续改变是通过setInterval   setrTimeout等实现，在里面会有进行结束条件的判断

 

根据不同的缓动算法，让小球动起来

首先，用一个对象封装不同的缓动算法

然后在定义一个动画类，即构造函数，里面定义一些设置动画时用到的属性

在动画类原型上定义一个启动动画的函数，定义一些初始化的参数，并且调用缓动函数

在动画类原型上定义缓动函数，即每一帧的动画，也就是要修改的css的属性

  1. // 让小球按照不同的缓动算法运动起来
  2. // 将策略模式封装在一个对象里面
  3. //策略类的参数依次为：已经消耗的时间，小球原始位置，目标位置，动画持续时间
  4. const tween = {
  5.   linear(t,b,c,d){
  6.     return c*t/d+b;
  7.   },
  8.   easeIn(t,b,c,d){
  9.     return c*(t/=d)*t+b;
  10.   },
  11.   sineaseIn(t,b,c,d){
  12.     return c*(t/=d)*t*t+b;
  13.   }
  14. };
  15.  
  16. // 定义动画类，就是一个构造函数，里面定义一些动画需要的属性
  17. let Animate = function(dom){
  18.   this.dom = dom;          //运动的dom节点
  19.   this.startTime = 0;     
  20.   this.duration = null;
  21.   this.startPos = 0;
  22.   this.endPos = 0;
  23.   this.propertyName = null; //dom节点需要改变的css属性名
  24.   this.easing = null;       //缓动算法
  25. }
  26.  
  27. //启动动画，就是初始化一些属性，然后调用缓动函数（定义每帧的动画）
  28. Animate.prototype.start = function(propertyName,endPos,duration,easing){
  29.   this.startTime = +new Date; //动画启动时间
  30.   this.startPos = this.dom.getBoundingClientRect()[propertyName];
  31.   this.propertyName = propertyName;
  32.   this.endPos = endPos;
  33.   this.duration = duration;
  34.   this.easing = tween[easing];
  35.  
  36.   let self = this;
  37.   let timeId = setInterval(function(){
  38.     if( self.step() === false ){
  39.       clearInterval( timeId );
  40.     }
  41.   },20);
  42. }
  43.  
  44. // 缓动
  45. Animate.prototype.step = function(){
  46.   let t = +new Date; //取得当前时间
  47.   if( t >= this.startTime + this.duration ){
  48.     this.update(this.endPos); //更新小球的css属性
  49.     return false;  //用于清除定时器，取消定时功能
  50.   }
  51.   let pos = this.easing( t-this.startTime,this.startPos,this.endPos-this.startPos,this.duration );
  52.   //pos为小球当前的位置
  53.   this.update(pos);//更新小球的css属性
  54. }
  55.  
  56. // 更新小球的css属性
  57. Animate.prototype.update = function(pos){
  58.   this.dom.style[this.propertyName] = pos + 'px';
  59. }
  60.  
  61. // 测试用例
  62. let div = document.getElemenetById('div1');
  63. let animate = new Animate(div);
  64. animate.start('left',500,1000,'easeIn');

 

使用策略模式实现表单验证，用户名不能为空，密码长度不能少于6位，手机号码必须符合格式

  1. // 用户名不能为空，密码长度不能少于6位，手机号码必须符合格式
  2. // 将校验逻辑封装在策略对象里面
  3. let strategies = {
  4.   // 用户名不能为空
  5.   isNonEmpty(value,errorMsg){
  6.     if( value==='' ){
  7.       return errorMsg;
  8.     }
  9.   },
  10.   // 密码长度不能少于6位
  11.   minLength( value,length,errorMsg ){
  12.     if( value.length < length ){
  13.       return errorMsg;
  14.     }
  15.   },
  16.   // 手机号码必须符合格式
  17.   isMobile( value,errorMsg ){
  18.     if( !/(^1[3|5|8][0-9]{9}$)/.test(value) ){
  19.       return errorMsg;
  20.     }
  21.   }
  22. };
  23.  
  24. // 将Validator类作为Context,负责接收用户的请求并委托给具体的strategy
  25. let Validator = function(){
  26.   this.cache = [];//保存校验规则
  27. }
  28.  
  29. Validator.prototype.add = function( dom,rules ){
  30.   let self = this;
  31.   for( let i=0,rule;rule=rules[i++]; ){
  32.     (function(rule){
  33.       let strategyArr = rule.strategy.split(':');
  34.       let errorMsg = rule.errorMsg;
  35.       self.cache.push(function(){
  36.         let strategy = strategyArr.shift();
  37.         strategyArr.unshift(dom.value);
  38.         strategyArr.push(errorMsg);
  39.         return strategies[strategy].apply(dom,strategyArr);
  40.       });
  41.     })(rule);
  42.   }
  43. };
  44.  
  45. Validator.prototype.start = function(){
  46.   // 将保存在this.cache中所有校验规则取出来，执行
  47.   for( let i=0,validatorFunc; validatorFunc=this.cache[i++]; ){
  48.     let msg = validatorFunc(); //开始校验，并取得校验后的返回值
  49.     if(msg){ //有返回值，证明校验没有通过
  50.       return msg;
  51.     }
  52.   }
  53. }
  54.  
  55. let registerForm = document.getElementById('registerForm');
  56.  
  57. let validateFunc = function(){
  58.   let validator = new Validator();
  59.   // 添加规则
  60.   validator.add(registerForm.userName,[{strategy:'isNonEmpty',errorMsg:'用户名不能为空'},{strategy:'minLength:10',errorMsg:'用户名长度不能小于10'}]);
  61.   validator.add(registerForm.passWord,[{'minLength:6','密码长度不能少于6位'}]);
  62.   validator.add(registerForm.phoneNumber,[{'isMobile','手机号码不正确'}]);
  63.   // 获得校验结果
  64.   let errorMsg = validator.start();
  65.   return errorMsg;
  66. }
  67.  
  68. // 提交表单前验证
  69. registerForm.onsubmit = function(){
  70.   let errorMsg = validateFunc();
  71.   if(errorMsg){
  72.     console.log(errorMsg);
  73.     // 阻止表单提交
  74.     return false;
  75.   }
  76. }

 

 

 

3、代理模式---为一个对象提供一个代用品或占位符，以便控制对它的访问

- 代理模式：给一个对象提供一个代理对象，并由代理对象控制原对象的引用。实际开发中，按照使用目的的不同，代理可以分为：远程代理、虚拟代理、保护代理、Cache代理、防火墙代理、同步化代理、智能引用代理

保护代理------过滤掉一些不符合条件的请求，即控制不同权限的对象对目标对象的访问（在js中不易实现）

虚拟代理-----把一些开销很大的对象，延迟到真正需要的时候在创建（在js中常用）。比如虚拟代理实现图片预加载

缓存代理-----为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前的一样，则可以直接返回前面存储的缓存结果

例子：虚拟代理实现图片的预加载-----直接给img设置src属性，由于图片过大或者网络不佳，图片位置往往会是一片空白。而预加载则是先用一张loading占位，用异步方式加载图片，等图片加载完成在填充到img节点

好处：符合单一职责原则---给img设置src放在myImage中，图片预加载放在proxyImage中

  1. const myImage = (functon(){
  2.   let imgNode = document.createElement('img');
  3.   document.body.appendChild(imgNode);
  4.   return {
  5.     setSrc(src){
  6.       imgNode.src = src;
  7.     }
  8.   }
  9. })();
  10.  
  11. const proxyImage = (function(){
  12.   let img = new Image;
  13.   // 异步事件
  14.   img.onload = function(){
  15.     myImage.setSrc(this.src)
  16.   }
  17.   return {
  18.     setSrc(src){
  19.       myImage.setSrc('c:/user/loading.gif');
  20.       img.src = src;
  21.     }
  22.   }
  23. })()
  24.  
  25. proxyImage.setSrc('http://imgcache.qq.com/music/one.jpg');

缓存代理：

  1. const mult = (...args) => args.reduce( (ret,val)=>ret*val, 1 );
  2. const proxyMult = (function(){
  3.   let ret={};
  4.   return function(...args){
  5.     let flag = args.join(',')
  6.     if( flag in ret ){
  7.       return ret[flag];
  8.     }
  9.     return ret[flag] = mult.apply(this,args)
  10.   }
  11. })();
  12. console.log(proxyMult(1,2,3))
  13. console.log(proxyMult(1,2,3))

 

4、迭代器模式

定义：提供一种方法，顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。

作用：将迭代过程和业务逻辑分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按照顺序访问其中的每个元素

像数组中的：forEach  map   fiter  reduce----内部迭代器，将迭代过程封装在函数里面了，只需要一次初始化

Generator------外部迭代器，需要显示的请求迭代下一个元素，

迭代器分为：内部迭代器和外部迭代器，倒序迭代器，中止迭代器，

 

  1. //内部迭代器
  2. // let each = function(arr,fn){
  3. //   for( let i=0,len=arr.length;i<len;i++ ){
  4. //     fn.call(arr[i],arr[i],i);
  5. //   }
  6. // };
  7.  
  8. // each([12,34],function(value,key){
  9. //     console.log(value,key);
  10. // });
  11.  
  12. // 终止迭代器，就是如果回调函数的执行结果返回false则提前终止循环
  13. let each = function(arr,fn){
  14.   for( let i=0,len=arr.length;i<len;i++ ){
  15.     if( fn(arr[i],i) === false ){
  16.       break;
  17.     }
  18.   }
  19. }
  20. each([1,2,3,4,5],(value)=>{
  21.   if(value>3){
  22.     return false;
  23.   }
  24.   console.log(value);
  25. });

 

5、发布-订阅模式（观察者模式）

定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在js中，一般用事件模型来替代传统的发布-订阅模式

  1. // 将发布---订阅的功能提取出来
  2. let event = {
  3.   // 缓存列表，存放订阅者订阅的事件和其回调函数
  4.   clientList:{},
  5.   // 增加订阅者订阅的事件和回调函数
  6.   listen(key,fn){
  7.     if(!this.clientList[key]){
  8.         //如果没有订阅过此类消息，则给该类消息创建一个缓存列表 
  9.         this.clientList[key] = [];
  10.     }
  11.     // 将订阅消息添加进消息缓存列表
  12.     this.clientList[key].push(fn);
  13.   },
  14.   // 发布消息
  15.   on(...args){
  16.     let key = args.shift(),
  17.         fns = this.clientList[key];
  18.     if( !fns || fns.length === 0 ){ //没有绑定对应消息
  19.         return false;
  20.     }
  21.  
  22.     for(let fn of fns){  //通知订阅该消息的所有订阅者
  23.         fn.call(this,args); //args是trigger时带上的参数
  24.     }
  25.  
  26.   },
  27.   // 取消订阅
  28.   off(key,fn){
  29.       let fns = this.clientList[key];
  30.       if(!fns){
  31.           return false;  //key对应的消息没有被人订阅，直接返回
  32.       }
  33.       if(!fn){ //没有传入fn，则表示取消key对应消息的所有订阅
  34.           fns && ( fns.length=0 )
  35.       }else{
  36.         let index = fns.findIndex(function(val){
  37.             return val===fn;
  38.         });
  39.         fns.splice(index,1); //删除订阅者的回调函数
  40.         console.log('success');
  41.       }
  42.   }
  43. };
  44.  
  45. // 给所有对象都动态安装订阅-分布功能
  46. let installEvent = obj=>{
  47.   for( let key in event ){
  48.       obj[key] = event[key];
  49.   }
  50. };
  51.  
  52. let salesOffice = {};
  53. installEvent(salesOffice);
  54.  
  55. salesOffice.listen('square88',fn1=price=>console.log('price='+price));
  56. salesOffice.listen('square88',fn2=price=>console.log('price='+price));
  57. salesOffice.on('square88',8000);
  58. salesOffice.off('square88',fn1);
  59. salesOffice.on('square88',8000);
  1. // 全局发布--订阅对象
  2. let Event = {
  3.   // 缓存列表，存放订阅者的回调函数
  4.   clientList:{},
  5.   // 增加订阅者--监听
  6.   listen(key,fn){
  7.     if(!this.clientList[key]){
  8.         //如果没有订阅过此类消息，则给该类消息创建一个缓存列表 
  9.         this.clientList[key] = [];
  10.     }
  11.     // 将订阅消息添加进消息缓存列表
  12.     this.clientList[key].push(fn);
  13.   },
  14.   // 发布消息
  15.   trigger(...args){
  16.     let key = args.shift(),
  17.         fns = this.clientList[key];
  18.     if( !fns || fns.length === 0 ){ //没有绑定对应消息
  19.         return false;
  20.     }
  21.  
  22.     for(let fn of fns){  //通知订阅该消息的所有订阅者
  23.         fn.call(this,args); //args是trigger时带上的参数
  24.     }
  25.  
  26.   },
  27.   // 取消订阅
  28.   remove(key,fn){
  29.       let fns = this.clientList[key];
  30.       if(!fns){
  31.           return false;  //key对应的消息没有被人订阅，直接返回
  32.       }
  33.       if(!fn){ //没有传入fn，则表示取消key对应消息的所有订阅
  34.           fns && ( fns.length=0 )
  35.       }else{
  36.         let index = fns.findIndex(function(val){
  37.             return val===fn;
  38.         });
  39.         fns.splice(index,1); //删除订阅者的回调函数
  40.         console.log('success');
  41.       }
  42.   }
  43. };
  44.  
  45. Event.listen('88',price=>console.log('price='+price));
  46. Event.trigger('88',88888);
  47.  
  48. // 模块间通信，每次点击a模块里面的按钮，b模块显示按钮点击次数
  49. // 将b订阅的事件添加到全局发布--订阅对象
  50. let b=(()=>{
  51.   let div = document.getElementById('show');
  52.   Event.listen('add',count => div.innerHTML=count );
  53. })()
  54. // 通过a触发全局发布--订阅对象发布消息
  55. let a = (()=>{
  56.   let count = 0;
  57.   let button = document.getElementById('count');
  58.   button.addEventListener('click',()=>Event.trigger('add',count++))
  59. })()

上面利用全局发布--订阅对象实现模块间通信

 

6、命令模式

命令模式中的命令指的是执行某些特定事情的指令

应用场景：需要向某些对象发送请求，但不知道接受者是谁；也不知道被请求的操作是什么

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <script src="jquery-3.1.1.min.js"></script>
  6.     </head>
  7.     <body>
  8.       <div id='ball' style="position:relative;background:#000;width:50px;height:50px"></div>
  9.       输入小球移动后的位置：<input id='pos'>
  10.       <button id='moveBtn'>start move</button>
  11.       <button id='cancelBtn'>cancel move</button>
  12.       <script>
  13.         let ball = document.getElementById('ball'),
  14.             pos = document.getElementById('pos'),
  15.             moveBtn = document.getElementById('moveBtn'),
  16.             cancelBtn = document.getElementById('cancelBtn'),
  17.             MoveCommand ,
  18.             moveCommand; 
  19.         // 让小球按照不同的缓动算法运动起来
  20.         // 将策略模式封装在一个对象里面
  21.         //策略类的参数依次为：已经消耗的时间，小球原始位置，目标位置，动画持续时间
  22.         const tween = {
  23.           linear(t,b,c,d){
  24.             return c*t/d+b;
  25.           },
  26.           easeIn(t,b,c,d){
  27.             return c*(t/=d)*t+b;
  28.           },
  29.           sineaseIn(t,b,c,d){
  30.             return c*(t/=d)*t*t+b;
  31.           }
  32.         };
  33.  
  34.         // 定义动画类，就是一个构造函数，里面定义一些动画需要的属性
  35.         let Animate = function(dom){
  36.           this.dom = dom;          //运动的dom节点
  37.           this.startTime = 0;     
  38.           this.duration = null;
  39.           this.startPos = 0;
  40.           this.endPos = 0;
  41.           this.propertyName = null; //dom节点需要改变的css属性名
  42.           this.easing = null;       //缓动算法
  43.         }
  44.  
  45.         //启动动画，就是初始化一些属性，然后调用缓动函数（定义每帧的动画）
  46.         Animate.prototype.start = function(propertyName,endPos,duration,easing){
  47.           this.startTime = +new Date; //动画启动时间
  48.           this.startPos = this.dom.getBoundingClientRect()[propertyName];
  49.           this.propertyName = propertyName;
  50.           this.endPos = endPos;
  51.           this.duration = duration;
  52.           this.easing = tween[easing];
  53.  
  54.           let self = this;
  55.           let timeId = setInterval(function(){
  56.             if( self.step() === false ){
  57.               clearInterval( timeId );
  58.             }
  59.           },20);
  60.         }
  61.  
  62.         // 缓动
  63.         Animate.prototype.step = function(){
  64.           let t = +new Date; //取得当前时间
  65.           if( t >= this.startTime + this.duration ){
  66.             this.update(this.endPos); //更新小球的css属性
  67.             return false;  //用于清除定时器，取消定时功能
  68.           }
  69.           let pos = this.easing( t-this.startTime,this.startPos,this.endPos-this.startPos,this.duration );
  70.           //pos为小球当前的位置
  71.           this.update(pos);//更新小球的css属性
  72.         }
  73.  
  74.         // 更新小球的css属性
  75.         Animate.prototype.update = function(pos){
  76.           this.dom.style[this.propertyName] = pos + 'px';
  77.         }
  78.  
  79.         MoveCommand = function(receiver,pos){
  80.           this.receiver = receiver;
  81.           this.pos = pos;
  82.           this.oldPos = null;
  83.         };
  84.         MoveCommand.prototype.execute = function(){
  85.           this.receiver.start('left',this.pos,2000,'easeIn');
  86.           this.oldPos = this.receiver.dom.getBoundingClientRect()[this.receiver.propertyName];
  87.         };
  88.         MoveCommand.prototype.undo = function(){
  89.           this.receiver.start('left',this.oldPos,2000,'easeIn');
  90.         };
  91.  
  92.         moveBtn.onclick = function(){
  93.           let animate = new Animate(ball);
  94.           moveCommand = new MoveCommand(animate,pos.value);
  95.           moveCommand.execute();
  96.         };
  97.         cancelBtn.onclick = function(){
  98.           moveCommand.undo();
  99.         };
  100.       </script>
  101.     </body>
  102. </html>

宏命令：是一组命令的集合，一次可以执行一批命令。宏命令是命令模式和组合模式的联用产物

子命令对象和宏命令对象要有同名的API属性

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <script src="jquery-3.1.1.min.js"></script>
  6.     </head>
  7.     <body>
  8.       <button id='btn'>execute command</button>
  9.       <script>
  10.           /***********定义宏命令对象*************/ 
  11.           let MacroCommand = function(name){
  12.             // 存放不同命令的容器
  13.             this.commandList = [];
  14.             this.name = name;
  15.           };
  16.           // 往容器添加不同的命令，用于组合不同的命令对象
  17.           MacroCommand.prototype.add = function(command){
  18.             this.commandList.push(command);
  19.           };
  20.           // 执行容器里面的所有的命令对象，也就是组合对象
  21.           // 组合对象和基本对象同名的API
  22.           MacroCommand.prototype.execute = function(){
  23.             console.log('执行宏命令对象：'+this.name);
  24.             for(let i=0,command;i<this.commandList.length;i++){
  25.               command = this.commandList[i];
  26.               command.execute();
  27.             }
  28.           };
  29.  
  30.           /*************定义基本对象************/ 
  31.           let ChildCommand = function(name){
  32.             this.name = name;
  33.           };
  34.           // 基本对象同名的API
  35.           ChildCommand.prototype.execute = function(){
  36.             console.log('执行基本命令：'+this.name);
  37.           };
  38.           // 防止误操作，基本对象不能在有子对象
  39.           ChildCommand.prototype.add = function(){
  40.             console.log('基本对象不能再有子对象');
  41.             throw new Error('基本对象不能再有子对象');
  42.           };
  43.  
  44.           /*************组合基本对象，构成宏命令************/ 
  45.           let macroCommand = new MacroCommand('宏对象1'),
  46.               childCommand1 = new ChildCommand('关门'),
  47.               childCommand2 = new ChildCommand('关电脑'),
  48.               childCommand3 = new ChildCommand('开电视');
  49.           macroCommand.add(childCommand1);
  50.           macroCommand.add(childCommand2);
  51.           macroCommand.add(childCommand3);
  52.           /*************给按钮绑定宏命令**************/ 
  53.           document.getElementById('btn').onclick = function(){
  54.             macroCommand.execute();
  55.           };
  56.       </script>
  57.     </body>
  58. </html>

 

7、组合模式----树形结构

定义：就是用小的子对象来构建更大的对象，而这些小的子对象本身也也许是由更小的对象构成

特点：可以用树形方式创建对象的结构；把相同的操作应用在组合对象和单个对象上（相同的API）

使用场景：

1）表示对象的部分-整体层次结构。只需要通过请求树中的最顶层对象，便能对树做统一的操作

2）客户希望统一对待树中的所有对象。忽略组合对象和叶对象的区别，他们会各自做自己的事情

文件扫描，适合使用组合模式，路径是树形结构

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <script src="jquery-3.1.1.min.js"></script>
  6.     </head>
  7.     <body>
  8.       <button id='btn'>execute command</button>
  9.       <script>
  10.           /***********定义宏命令对象*************/ 
  11.           let MacroCommand = function(name){
  12.             // 存放不同命令的容器
  13.             this.commandList = [];
  14.             this.name = name;
  15.             this.parent = null;
  16.           };
  17.           // 往容器添加不同的命令，用于组合不同的命令对象
  18.           MacroCommand.prototype.add = function(command){
  19.             this.commandList.push(command);
  20.             command.parent = this;
  21.           };
  22.           // 执行容器里面的所有的命令对象，也就是组合对象
  23.           // 组合对象和基本对象同名的API
  24.           MacroCommand.prototype.execute = function(){
  25.             console.log('组合对象：'+this.name);
  26.             for(let i=0,command;i<this.commandList.length;i++){
  27.               command = this.commandList[i];
  28.               command.execute();
  29.             }
  30.           };
  31.           // 移除某个子命令，相当于在上级删除该命令
  32.           MacroCommand.prototype.remove = function(){
  33.             if(!this.parent){ //根节点或者游离节点
  34.               return;
  35.             }
  36.             for( let commands=this.parent.commandList,len=commands.length-1,command;len>=0;len-- ){
  37.               command = commands[len];
  38.               if(command === this){
  39.                 console.log('移除组合对象：'+this.name);
  40.                 commands.splice(len,1);
  41.               }
  42.             }
  43.           };
  44.  
  45.           /*************定义基本对象************/ 
  46.           let ChildCommand = function(name){
  47.             this.name = name;
  48.             this.parent = null;
  49.           };
  50.           // 基本对象同名的API
  51.           ChildCommand.prototype.execute = function(){
  52.             console.log('基本命令：'+this.name);
  53.           };
  54.           // 防止误操作，基本对象不能在有子对象
  55.           ChildCommand.prototype.add = function(){
  56.             console.log('基本对象不能再有子对象');
  57.             throw new Error('基本对象不能再有子对象');
  58.           };
  59.           // 移除操作
  60.           ChildCommand.prototype.remove = function(){
  61.             if(!this.parent){
  62.               return;
  63.             }
  64.             for( let commands=this.parent.commandList,len=commands.length-1,command;len>=0;len-- ){
  65.               command = commands[len];
  66.               if(command === this){
  67.                 console.log('移除基本对象：'+this.name);
  68.                 commands.splice(len,1);
  69.               }
  70.             }
  71.  
  72.           };
  73.  
  74.           /*************组合基本对象************/ 
  75.           let childCommand1 = new ChildCommand('关门'),
  76.               childCommand2 = new ChildCommand('关电脑'),
  77.               childCommand3 = new ChildCommand('开电视'),
  78.               macroCommand = new MacroCommand('组合对象'),
  79.               macroCommand1 = new MacroCommand('组合对象1');
  80.           /*********组合**********/ 
  81.           macroCommand1.add(childCommand1);
  82.           macroCommand1.add(childCommand2);
  83.           /*********组合**********/ 
  84.           macroCommand.add(childCommand3);
  85.           macroCommand.add(macroCommand1);
  86.           /*************给按钮绑定组合对象**************/ 
  87.           document.getElementById('btn').onclick = function(){
  88.             macroCommand1.remove();
  89.             macroCommand.execute();
  90.           };
  91.       </script>
  92.     </body>
  93. </html>

 

 

8、模板方法模式

定义：只需使用原型链继承就可以实现简单的模式

组成：由抽象的父类和具体实现的子类组成。抽象父类封装子类的算法框架，公共方法和封装子类中所有方法的执行顺序方法。子类通过继承抽象类，可以重写父类方法

应用场景：模板方法模式常用于搭建项目的框架，定好框架的骨架，然后继承框架的结构之后，往里面添加功能；

web开发中，搭建一系列的UI组件，组件的构建过程：

1）初始化一个div容器

2）通过ajax请求拉取到相应的数据

3）把数据渲染到div容器里面，完成组件构造

4）通知用户组件渲染完毕

1）、4）相同，子类只需要重写2）、3）

 

模板方法模式中的钩子方法：用于解决一些特例，隔离变化。在父类中容易发生变化的地方放置钩子，钩子有一个默认的实现，由子类决定要不要挂钩。钩子方法的返回结果决定模板方法后面的执行步骤

茶与咖啡例子

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <script src="jquery-3.1.1.min.js"></script>
  6.     </head>
  7.     <body>
  8.       <button id='btn'>execute command</button>
  9.       <script>
  10.           /**********抽象父类，泡一杯饮料的整个过程*********/ 
  11.           let Beverage = function(){};
  12.           //下面3个空方法，由子类重写，父类提供接口 
  13.           Beverage.prototype.boilWater = function(){
  14.             console.log('把水煮沸');
  15.           };
  16.           // 防止子类没有重写这些方法带来的错误
  17.           Beverage.prototype.brew = function(){
  18.             throw new Error('子类必须重写brew');
  19.           };
  20.           Beverage.prototype.pourInCup = function(){
  21.             throw new Error('子类必须重写pourInCup');
  22.           };
  23.           Beverage.prototype.addCondiments = function(){
  24.             throw new Error('子类必须重写addCondiments');
  25.           };
  26.           // 钩子方法，true-表示挂钩，false-表示不挂钩,默认为true
  27.           Beverage.prototype.customerWantsCondiments = function(){
  28.             return true;
  29.           };
  30.           //这个就是模板方法，封装子类的算法框架，指导子类以何种顺序执行哪些方法
  31.           Beverage.prototype.init = function(){
  32.             this.boilWater();
  33.             this.brew();
  34.             this.pourInCup();
  35.             // 这里需要判断钩子方法的返回值，做下一步的处理
  36.             if( this.customerWantsCondiments() ){ //挂钩返回true，表示加饮料
  37.               this.addCondiments();
  38.             } 
  39.           };
  40.  
  41.           /*******创建子类Coffee，继承父类，并且重写父类中的方法********/ 
  42.           let CoffeeWithHook = function(){};
  43.           // 通过原型链继承父类
  44.           CoffeeWithHook.prototype = new Beverage();
  45.           // 重写父类中的方法
  46.           CoffeeWithHook.prototype.brew = function(){
  47.             console.log('用沸水冲泡咖啡');
  48.           };
  49.           CoffeeWithHook.prototype.pourInCup = function(){
  50.             console.log('把咖啡倒进杯子');
  51.           };
  52.           CoffeeWithHook.prototype.addCondiments = function(){
  53.             console.log('加糖和牛奶');
  54.           };
  55.           // 重写父类中的钩子函数
  56.           CoffeeWithHook.prototype.customerWantsCondiments = function(){
  57.             return window.confirm('咖啡中需要添加饮料吗？');
  58.           };
  59.  
  60.           /*********创建子类Tea，继承父类，并且重写父类中的方法************/ 
  61.           let TeaWithHook = function(){};
  62.           // 通过原型链继承父类
  63.           TeaWithHook.prototype = new Beverage();
  64.           // 重写父类中的方法
  65.           TeaWithHook.prototype.brew = function(){
  66.             console.log('用沸水浸泡茶叶');
  67.           };
  68.           TeaWithHook.prototype.pourInCup = function(){
  69.             console.log('把茶倒进杯子');
  70.           };
  71.           TeaWithHook.prototype.addCondiments = function(){
  72.             console.log('加柠檬');
  73.           };
  74.            // 重写父类中的钩子函数
  75.           TeaWithHook.prototype.customerWantsCondiments = function(){
  76.             return window.confirm('茶中需要添加饮料吗？');
  77.           };
  78.           /******创建Tea和Coffee实例对象********/ 
  79.           let coffee = new CoffeeWithHook(),
  80.               tea = new TeaWithHook();
  81.           coffee.init();
  82.           tea.init();
  83.  
  84.       </script>
  85.     </body>
  86. </html>

 

9、职责链模式

使多个对象都有机会处理请求，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止，避免请求的发送者和处理者之间的耦合关系。

链中的节点可以灵活拆分和重组

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <script src="jquery-3.1.1.min.js"></script>
  6.     </head>
  7.     <body>
  8.       <button id='btn'>execute command</button>
  9.       <script>
  10.         // orderType---订单类型，1-500元定金用户，2-200元定金用户，3-普通购买用户
  11.         // pay----是否已经支付定金,true-已经支付，false相反
  12.         // stock---当前用于普通购买的手机库存数量，已支付金额的用户不受此影响
  13.         /******购买模式的节点函数，不能处理请求返回特定字符串需要往后面传递******/ 
  14.         let order500 = function(orderType,pay,stock){
  15.           if(orderType===1 && pay===true){
  16.             console.log('500元定金预购，得到100元优惠券');
  17.           }else{
  18.             return 'nextSuccessor'; //把请求往后传
  19.           }
  20.         };
  21.         let order200 = function(orderType,pay,stock){
  22.           if(orderType===2 && pay===true){
  23.             console.log('200元定金预购，得到50元优惠券');
  24.           }else{
  25.             return 'nextSuccessor'; //把请求往后传
  26.           }
  27.         };
  28.         let orderNormal = function(orderType,pay,stock){
  29.           if(stock>0){
  30.             console.log('普通购买，无优惠券');
  31.           }else{
  32.             console.log('手机库存不足');
  33.           }
  34.         };
  35.  
  36.         /******把函数包装进职责链节点*****/ 
  37.         let Chain = function(fn){
  38.           this.fn = fn;  //需要被包装的函数
  39.           this.successor = null; //在链中的下一个节点
  40.         };
  41.         // 指定在链中的下一个节点
  42.         Chain.prototype.setNextSuccessor = function(successor){
  43.           return this.successor = successor;
  44.         };
  45.         // 传递请求给某个节点
  46.         Chain.prototype.passRequest = function(){
  47.           let ret = this.fn.apply(this,arguments);
  48.           if(ret === 'nextSuccessor'){
  49.             return this.successor &&  this.successor.passRequest.apply(this.successor,arguments);
  50.           }
  51.           return ret;
  52.         };
  53.  
  54.         /******把3个函数包装职责链中的节点******/ 
  55.         let chainOrder500 = new Chain(order500),
  56.             chainOrder200 = new Chain(order200),
  57.             chainOrderNormal = new Chain(orderNormal);
  58.         /*******指定节点在职责链中的顺序******/ 
  59.         chainOrder500.setNextSuccessor(chainOrder200);
  60.         chainOrder200.setNextSuccessor(chainOrderNormal);
  61.         /*******把请求传递给第一个节点******/ 
  62.         chainOrder500.passRequest(1,true,500);//500元定金预购，得到100元优惠券
  63.         chainOrder500.passRequest(2,true,500);//200元定金预购，得到50元优惠券
  64.         chainOrder500.passRequest(3,true,500);//普通购买，无优惠券
  65.         chainOrder500.passRequest(1,false,0);//手机库存不足
  66.       </script>
  67.     </body>
  68. </html>

 

 

10、中介者模式

解除对象与对象之间的耦合关系，使网状的多对多关系变成简单的一对多关系。将逻辑判断都放在中介者对象里面，触发者只需要向中介者传递本身，所有的节点对象只跟中介者通信

 

将所有的逻辑判断都写在中介者里面，然后在外面，只需要对对象书写监听事件，在监听事件里面调用中介者提供的API

购买商品

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <script src="jquery-3.1.1.min.js"></script>
  6.     </head>
  7.     <body>
  8.       <div>
  9.         选择颜色：<select id='colorSelect'>
  10.                     <option value=''>请选择</option>
  11.                     <option value='red'>red</option>
  12.                     <option value='blue'>blue</option>
  13.                   </select>
  14.         选择内存：<select id='memorySelect'>
  15.                     <option value=''>请选择</option>
  16.                     <option value='32g'>32g</option>
  17.                     <option value='64g'>64g</option>
  18.                   </select>
  19.         输入购买数量：<input type="text" id='numberInput'><br/><br/>
  20.         已选择颜色：<div id='colorInfo'></div><br/>
  21.         已选择内存：<div id='memoryInfo'></div><br/>
  22.         输入的数量：<div id='numberInfo'></div><br/>
  23.         <button id='nextBtn' disabled="true">请选择手机颜色、内存和购买数量</button>
  24.       </div>
  25.       <script>
  26.         //数据 
  27.         let goods = {
  28.           'red|32g':3,
  29.           'red|16g':0,
  30.           'blue|32g':1,
  31.           'blue|16g':6
  32.         }; 
  33.  
  34.         let colorSelect = document.getElementById('colorSelect'),
  35.             memorySelect = document.getElementById('memorySelect'),
  36.             numberInput = document.getElementById('numberInput');
  37.         //中介者,将所有的逻辑判断都写在该中介者里面
  38.         let mediator = (function(){
  39.           let colorInfo = document.getElementById('colorInfo'),
  40.               memoryInfo = document.getElementById('memoryInfo'),
  41.               numberInfo = document.getElementById('numberInfo'),
  42.               nextBtn = document.getElementById('nextBtn');
  43.           return {
  44.             changed:function(obj){
  45.               let color = colorSelect.value,
  46.                   memory = memorySelect.value,
  47.                   number = numberInput.value,
  48.                   stock = goods[color + '|' + memory];//库存量
  49.  
  50.               //判断发生变化的对象
  51.               if( obj === colorSelect ){
  52.                 colorInfo.innerHTML = color;
  53.               }else if( obj === memorySelect ){
  54.                 memoryInfo.innerHTML = memory;
  55.               }else if( obj === numberInput ){
  56.                 numberInfo.innerHTML = number;
  57.               }
  58.  
  59.               // 对一些边界条件进行判断
  60.               if(!color){
  61.                 nextBtn.disabled = true;
  62.                 nextBtn.innerHTML = '请选择手机颜色';
  63.                 return;
  64.               }
  65.               if( !memory ){
  66.                 nextBtn.disabled = true;
  67.                 nextBtn.innerHTML = '请选择内存大小';
  68.                 return;
  69.               }
  70.               if( !Number.isInteger(number-0) || number<=0 ){
  71.                 nextBtn.disabled = true;
  72.                 nextBtn.innerHTML = '请输入正确的数量';
  73.                 return;
  74.               }
  75.  
  76.               nextBtn.disabled = false;
  77.               nextBtn.innerHTML = '加入购物车';
  78.             }
  79.           }
  80.         })();
  81.  
  82.         //添加事件监听，并且调用中介者中的函数
  83.         colorSelect.onchange = function(){
  84.           mediator.changed(this);
  85.         };
  86.  
  87.         memorySelect.onchange = function(){
  88.           mediator.changed(this);
  89.         };
  90.  
  91.         numberInput.oninput = function(){
  92.           mediator.changed(this);
  93.         };
  94.  
  95.       </script>
  96.     </body>
  97. </html>

11、装饰者模式

可以动态的给某个对象添加一些额外的职责，而不会影响从这个类中派生的其他对象

在不改变源码的情况下，能给函数添加功能，符合开放-封闭原则

通过保存原引用就可以改写某个函数

原理：利用闭包规定对原函数和新添加功能函数的执行顺序

  1. ///1、fn---原函数，beforefn----新添加的功能函数
  2. // 利用闭包实现对原函数和新添加功能的函数的执行顺序的规定
  3. let before = function(fn,beforefn){
  4.   return function(){
  5.     beforefn.apply(this,arguments);
  6.     fn.apply(this,arguments);
  7.   }
  8. };
  9.  
  10. let a = before(function(){console.log(1)},function(){console.log(2)});
  11. a = before(a,function(){console.log(3)});
  12. a();
  13.  
  14. // 2、
  15. let after = function(fn,afterfn){
  16.   return function(){
  17.     fn.apply(this,arguments);
  18.     afterfn.apply(this,arguments);
  19.   }
  20. };
  21.  
  22. let b = after(function(){console.log(1)},function(){console.log(2)});
  23. b = after(b,function(){console.log(3)});
  24. b();

例子：打开登录浮层后上报数据

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <script src="jquery-3.1.1.min.js"></script>
  6.     </head>
  7.     <body>
  8.       <button id='button' tag='login'></button>
  9.       <script>
  10.         //1、fn---原函数，beforefn----新添加的功能函数
  11.         // 利用闭包实现对原函数和新添加功能的函数的执行顺序的规定
  12.         Function.prototype.before = function(beforefn){
  13.           let _self = this;
  14.           return function(){
  15.             beforefn.apply(this,arguments);
  16.             return _self.apply(this,arguments);
  17.           }
  18.         };
  19.  
  20.         // 2、
  21.         Function.prototype.after = function(afterfn){
  22.           let _self = this;
  23.           return function(){
  24.             let ret = _self.apply(this,arguments);
  25.             afterfn.apply(this,arguments);
  26.             return ret;
  27.           }
  28.         };
  29.  
  30.         let showLogin = function(){
  31.           console.log('打开登录浮层');
  32.         };
  33.         let log = function(){
  34.           console.log('上报标签为：'+this.getAttribute('tag'));
  35.         };
  36.  
  37.         // 将两个功能的函数进行合并
  38.         showLogin = showLogin.after(log);//打开登录浮层后，上报数据
  39.         document.getElementById('button').onclick = showLogin;
  40.  
  41.       </script>
  42.     </body>
  43. </html>

用AOP的方式动态改变函数的参数

给ajax请求中的数据添加Token字段，而不用改变原来的ajax方法，使得ajax在别处可以使用

  1. ///1、fn---原函数，beforefn----新添加的功能函数
  2. // 利用闭包实现对原函数和新添加功能的函数的执行顺序的规定
  3. Function.prototype.before = function(beforefn){
  4.   let _self = this;
  5.   return function(){
  6.     beforefn.apply(this,arguments);
  7.     return _self.apply(this,arguments);
  8.   }
  9. };
  10.  
  11. // 干净的ajax
  12. let ajax = function(type,url,param){
  13.   console.log(param); //发送ajax请求代码略
  14. };
  15. // 产生Token字段的函数
  16. let getToken = function(){
  17.   return 'Token';
  18. };
  19. // 通过before()为ajax的参数添加Token
  20. let newAjax = ajax.before(function(type,url,param){
  21.   param.token = getToken();
  22. });
  23.  
  24. newAjax('GET','http://xxx.com',{name:'jiang'});
  25. // 输出结果
  26. // { name: 'jiang', token: 'Token' }
  27.

AOP(面向切面的编程)主要是将一些与核心业务逻辑模块无关的功能抽离出来，这些功能通常包括日志统计，安全控制，或者是异常处理等等

插件式的表单验证

先验证表单数据的合法性，验证通过在提交

  1.   <!doctype html>
  2.   <html>
  3.       <head>
  4.           <meta charset="utf-8"/>
  5.           <script src="jquery-3.1.1.min.js"></script>
  6.       </head>
  7.       <body>
  8.         用户名：<input id='username' type='text'/>
  9.         密码：<input type="password" id="password" />
  10.         <input id='submitBtn' type='button' value='submit'/>
  11.         <script>
  12.           let username = document.getElementById('username'),
  13.               password = document.getElementById('password'),
  14.               submitBtn = document.getElementById('submitBtn');
  15.  
  16.           // 装饰者模式,如果beforefn的执行结果返回false，表示不再执行后面的原函数
  17.           Function.prototype.before = function(beforefn){
  18.             let _self = this;
  19.             return function(){
  20.               if( beforefn.apply(this.arguments) === false ){
  21.                 return;
  22.               }
  23.               return _self.apply(this,arguments);
  24.             }
  25.           };
  26.           // 验证表单数据,作为before()函数的参数
  27.           let validata = function(){
  28.             if( username.value === '' ){
  29.               console.log('username can not be void');
  30.               return false;
  31.             }
  32.             if( password.value === '' ){
  33.               console.log('password can not be void');
  34.               return false;
  35.             }
  36.           };
  37.           // 定义提交函数功能
  38.           let formSubmit = function(){
  39.             let param = {
  40.               username:username.value,
  41.               password:password.value
  42.             };
  43.             ajax('http://xxx.com/login',param);
  44.           };
  45.           // 将验证数据的合法性代码扩展到提交函数中
  46.           formSubmit = formSubmit.before(validata);
  47.           // 点击按钮，验证数据的合法性，通过则提交
  48.           submitBtn.onclick = function(){
  49.             formSubmit();
  50.           };
  51.         </script>
  52.       </body>
  53.   </html>

装饰者和代理模式的区别

共同点：

1）描述了为对象提供一定程度上的间接引用，实现部分都保留了对另外一个对象的引用，并且向那个对象发送请求

 

12、状态模式

状态模式的关键：区分事物内部的状态，事物内部的状态往往会带来事物的行为改变。把事物的每种状态都封装成单独的类，跟这个状态有关的行为都被封装在这个类的内部，每个状态类有同名的API方法，并且需要持有总对象的引用；然后在定义一个总对象，在里面实力化每一个状态类

例子：有一种灯，按一下打开弱光，在按一下是强光，再按一下关闭电灯，如此循环反复

适合用状态模式：同一个元素，每次操作会带来不同的行为，则可以用状态模式实现

  1.   <!doctype html>
  2.   <html>
  3.       <head>
  4.           <meta charset="utf-8"/>
  5.           <script src="jquery-3.1.1.min.js"></script>
  6.       </head>
  7.       <body>
  8.         <script>
  9.             // 状态类中有一些共同的API，那么为了保证每一个状态类都实现
  10.             // 这个方法，就定义一个抽象父类的抽象方法，让其子类都实现该接口
  11.             // 否则在程序运行期间就抛出错误
  12.             /******状态类的抽象父类*******/
  13.             let State = function(){};
  14.             State.prototype.buttonWasPressed = function(){
  15.               throw new Error('父类的buttonWasPressed必须重写');
  16.             };
  17.             /*****关闭电灯状态类*******/ 
  18.             let OffLightState = function(light){
  19.               // light是基本对象
  20.               this.light = light;
  21.             };
  22.             // 通过原型链继承抽象类State
  23.             OffLightState.prototype = new State();
  24.             // 重写父类的抽象方法
  25.             OffLightState.prototype.buttonWasPressed = function(){
  26.               console.log('弱光');
  27.               // 状态由关闭切换到弱光
  28.               this.light.setState(this.light.weakLightState);
  29.             };
  30.  
  31.             /*****弱光状态类*******/ 
  32.             let WeakLightState = function(light){
  33.               // light是总对象
  34.               this.light = light;
  35.             };
  36.             // 通过原型链继承抽象类State
  37.             WeakLightState.prototype = new State();
  38.             WeakLightState.prototype.buttonWasPressed = function(){
  39.               console.log('强光');
  40.               // 状态由弱光切换到强光
  41.               this.light.setState(this.light.strongLightState);
  42.             };
  43.  
  44.             /*****强光状态类*******/ 
  45.             let StrongLightState = function(light){
  46.               // light是总对象
  47.               this.light = light;
  48.             };
  49.             // 通过原型链继承抽象类State
  50.             StrongLightState.prototype = new State();
  51.             StrongLightState.prototype.buttonWasPressed = function(){
  52.               console.log('关灯');
  53.               // 状态由强光切换到关闭
  54.               this.light.setState(this.light.offLightState);
  55.             };
  56.  
  57.             /*****基本对象*******/ 
  58.             let Light = function(){
  59.               // 创建每个状态类的实例对象
  60.               this.offLightState = new OffLightState(this);
  61.               this.weakLightState = new WeakLightState(this);
  62.               this.strongLightState = new StrongLightState(this);
  63.               // 控制灯状态切换的按钮
  64.               this.button = null;
  65.               // 持有当前状态的状态类对象
  66.               this.currState = null;
  67.             };
  68.             // 创建button对象，并且设置click事件，将请求委托给当前持有的状态对象执行
  69.             Light.prototype.init = function(){
  70.               // 创建button
  71.               let button = document.createElement('button'),
  72.                   self = this;
  73.               this.button = document.body.appendChild(button);
  74.               this.button.innerHTML = '开关';
  75.               // 设置当前状态类
  76.               this.currState = this.offLightState;
  77.               this.button.onclick = function(){
  78.                 self.currState.buttonWasPressed();
  79.               };
  80.             };
  81.             // 切换ligth对象的状态
  82.             Light.prototype.setState = function(newState){
  83.               this.currState = newState;
  84.             };
  85.  
  86.             // 测试
  87.             let light = new Light();
  88.             light.init();
  89.         </script>
  90.       </body>
  91.   </html>

文件上传，音乐，视频播放器

  1.   <!doctype html>
  2.   <html>
  3.       <head>
  4.           <meta charset="utf-8"/>
  5.           <script src="jquery-3.1.1.min.js"></script>
  6.       </head>
  7.       <body>
  8.         <script>
  9.               /**************************************/
  10.               // window.external.upload,在页面中模拟创建上传插件
  11.               // 上传是一个异步的过程，控件不停的调用js提供的全局函数window.external.upload
  12.               // 通知js目前的上传进度，控件会把当前文件的状态state作为该函数的参数
  13.               // 只是模拟
  14.               window.external.upload = function(state){
  15.                 // sign,uploading,pause,done,error
  16.                 console.log(state);
  17.               };
  18.               /**************************************/
  19.               /***********<embed>创建上传插件对象*********/ 
  20.               let plugin = (function(){
  21.                 // 创建插件对象
  22.                 let Plugin = document.createElement('embed');
  23.                 Plugin.style.display = 'none';
  24.                 Plugin.type = 'application/txftn-webkit';
  25.                 // 定义插件的方法
  26.                 Plugin.sign = function(){
  27.                   console.log('开始扫描文件');
  28.                 };
  29.                 Plugin.uploading = function(){
  30.                   console.log('开始上传文件');
  31.                 };
  32.                 Plugin.pause = function(){
  33.                   console.log('暂停文件上传');
  34.                 };
  35.                 Plugin.done = function(){
  36.                   console.log('文件上传成功');
  37.                 };
  38.                 Plugin.error = function(){
  39.                   console.log('文件上传失败');
  40.                 };
  41.                 Plugin.del = function(){
  42.                   console.log('删除文件成功');
  43.                 };
  44.                 // 将插件添加到DOM中并返回
  45.                 document.body.appendChild(Plugin);
  46.                 return Plugin;
  47.               })();
  48.  
  49.               /**************************************/
  50.               /***********文件上传状态抽象类*********/ 
  51.               let State = function(){};
  52.               // 按钮1点击事件,用于切换上传和暂停状态
  53.               State.prototype.clickHandler1 = function(){
  54.                 throw new Error('子类必须重写clickHandler1');
  55.               };
  56.               // 按钮2点击事件，用于删除上传文件功能
  57.               State.prototype.clickHandler2 = function(){
  58.                 throw new Error('子类必须重写clickHandler2');
  59.               };
  60.               /**************************************/
  61.               /************扫描状态类***************/ 
  62.               let SignState = function(uploadObj){
  63.                 // 对基本对象的持有
  64.                 this.uploadObj = uploadObj;
  65.               };
  66.               // 继承状态抽象类
  67.               SignState.prototype = new State();
  68.               // 重写抽象方法
  69.               SignState.prototype.clickHandler1 = function(){
  70.                 console.log('扫描中，点击无效');
  71.               };
  72.               SignState.prototype.clickHandler2 = function(){
  73.                 console.log('文件正在扫描，不能删除');
  74.               };
  75.               /**************************************/
  76.               /************上传状态类***************/ 
  77.               let UploadingState = function(uploadObj){
  78.                 this.uploadObj = uploadObj;
  79.               };
  80.               // 继承状态抽象类
  81.               UploadingState.prototype = new State();
  82.               // 重写抽象方法
  83.               UploadingState.prototype.clickHandler1 = function(){
  84.                 // 状态由上传切换到暂停
  85.                 this.uploadObj.pause();
  86.               };
  87.               UploadingState.prototype.clickHandler2 = function(){
  88.                 console.log('文件正在上传中，不能删除');
  89.               };
  90.               /**************************************/
  91.               /************暂停状态类***************/ 
  92.               let PauseState = function(uploadObj){
  93.                 this.uploadObj = uploadObj;
  94.               };
  95.               // 继承状态抽象类
  96.               PauseState.prototype = new State();
  97.               // 重写抽象方法
  98.               PauseState.prototype.clickHandler1 = function(){
  99.                 // 状态由暂停切换到上传
  100.                 this.uploadObj.uploading();
  101.               };
  102.               PauseState.prototype.clickHandler2 = function(){
  103.                 // 删除文件
  104.                 this.uploadObj.del();
  105.               };
  106.               /**************************************/
  107.               /************上传成功状态类***************/ 
  108.               let DoneState = function(uploadObj){
  109.                 this.uploadObj = uploadObj;
  110.               };
  111.               // 继承状态抽象类
  112.               DoneState.prototype = new State();
  113.               // 重写抽象方法
  114.               DoneState.prototype.clickHandler1 = function(){
  115.                 console.log('文件已经完成上传，点击无效');
  116.               };
  117.               DoneState.prototype.clickHandler2 = function(){
  118.                 // 删除文件
  119.                 this.uploadObj.del();
  120.               };
  121.               /******************************************/
  122.               /************上传失败状态类***************/ 
  123.               let ErrorState = function(uploadObj){
  124.                 this.uploadObj = uploadObj;
  125.               };
  126.               // 继承状态抽象类
  127.               ErrorState.prototype = new State();
  128.               // 重写抽象方法
  129.               ErrorState.prototype.clickHandler1 = function(){
  130.                 console.log('文件上传失败，点击无效');
  131.               };
  132.               ErrorState.prototype.clickHandler2 = function(){
  133.                 // 删除文件
  134.                 this.uploadObj.del();
  135.               };
  136.               /******************************************/
  137.               /************定义状态类基本对象***************/ 
  138.               let Upload = function(fileName){
  139.                 // 在其构造函数中创建每一个状态类的实例对象
  140.                 this.signState = new SignState(this);
  141.                 this.uploadingState = new UploadingState(this);
  142.                 this.pauseState = new PauseState(this);
  143.                 this.doneState = new DoneState(this);
  144.                 this.errorState = new ErrorState(this);
  145.                 // 设置一些信息变量
  146.                 this.plugin = plugin;
  147.                 this.fileName = fileName;
  148.                 // 触发事件的源对象
  149.                 // 上传与暂停状态切换
  150.                 this.button1 = null;
  151.                 // 删除上传文件
  152.                 this.button2 = null;
  153.                 // 设置初始化的状态
  154.                 this.currState = this.signState;
  155.                 // 保留对创建的DOM的引用
  156.                 this.dom = null;
  157.               };
  158.               /***********************************************************/ 
  159.               Upload.prototype.init = function(){
  160.                 let that = this;
  161.                 // 往页面中创建跟上传流程有关的DOM节点
  162.                 this.dom = document.createElement('div');
  163.                 this.dom.innerHTML = `<span>文件名称：${this.fileName}</span>
  164.                                       <button data-action='button1'>扫描中</button>
  165.                                       <button data-action='button2'>删除</button>`;
  166.                 document.body.appendChild(this.dom);
  167.                 // 绑定按钮事件
  168.                 this.button1 = this.dom.querySelector( '[data-action="button1"]' );
  169.                 this.button2 = this.dom.querySelector( '[data-action="button2"]' );
  170.                 this.bindEvent();
  171.               };
  172.               /***********************************************************/ 
  173.               // 负责具体的按钮事件绑定，点解按钮,context不做任何操作，
  174.               // 把请求委托给当前的状态类来执行
  175.               Upload.prototype.bindEvent = function(){
  176.                 let self = this;
  177.                 this.button1.onclick = function(){
  178.                   self.currState.clickHandler1();
  179.                 };
  180.                 this.button2.onclick = function(){
  181.                   self.currState.clickHandler2();
  182.                 };
  183.               };
  184.               /***********************************************************/ 
  185.               // 将状态对应的逻辑行为放在基本状态类Upload类中
  186.               Upload.prototype.sign = function(){
  187.                 this.plugin.sign();
  188.                 this.currState = this.signState;
  189.               };
  190.               Upload.prototype.uploading = function(){
  191.                 this.button1.innerHTML = '正在上传，点击暂停';
  192.                 this.plugin.uploading();
  193.                 this.currState = this.uploadingState;
  194.               };
  195.               Upload.prototype.pause = function(){
  196.                 this.button1.innerHTML = '已经暂停，点击继续上传';
  197.                 this.plugin.pause();
  198.                 this.currState = this.pauseState;
  199.               };
  200.               Upload.prototype.done = function(){
  201.                 this.button1.innerHTML = '上传完成';
  202.                 this.plugin.done();
  203.                 this.currState = this.doneState;
  204.               };
  205.               Upload.prototype.error = function(){
  206.                 this.button1.innerHTML = '上传失败';
  207.                 this.plugin.done();
  208.                 this.currState = this.errorState;
  209.               };
  210.               Upload.prototype.del = function(){
  211.                 this.plugin.del();
  212.                 this.dom.parentNode.removeChild(this.dom);
  213.               };
  214.               /***********************************************************/ 
  215.               /***********************************************************/ 
  216.               // 测试
  217.               let uploadObj = new Upload('设计模式');
  218.               uploadObj.init();
  219.  
  220.               window.external.upload = function(state){
  221.                 uploadObj[state]();
  222.               };
  223.               // 开始扫描
  224.               window.external.upload('sign');
  225.  
  226.               // 用setTimeout()来模拟异步上传的过程
  227.               // 1秒后开始上传
  228.               setTimeout(function(){
  229.                 window.external.upload('uploading');
  230.               },8000);
  231.  
  232.               // 5秒后上传完成
  233.               setTimeout(function(){
  234.                 window.external.upload('done');
  235.               },15000);
  236.         </script>
  237.       </body>
  238.   </html>

对于开灯关灯，可以使用js的事件委托和状态机实现，Function.prototype.call

  1. // 使用js的状态机，通过委托技术
  2. // Function.prototype.call把请求委托给某个字面量对象执行
  3. // 状态机
  4. let FSM = {
  5.   off:{
  6.     buttonWasPressed(){
  7.       console.log('关灯');
  8.       this.button.innerHTML = '开灯';
  9.       this.currState = FSM.on;
  10.     }
  11.   },
  12.   on:{
  13.     buttonWasPressed(){
  14.       console.log('关灯');
  15.       this.button.innerHTML = '关灯';
  16.       this.currState = FSM.off;
  17.     }
  18.   }
  19. };
  20. // 类
  21. let Light = function(){
  22.   // 设置当前状态
  23.   this.currState = FSM.off;
  24.   this.button = null;
  25. };
  26. Light.prototype.init = function(){
  27.   let button = document.createElement('button'),
  28.       self = this;
  29.   button.innerHTML = '已经关灯';
  30.   this.button = document.body.appendChild(button);
  31.   this.button.onclick = function(){
  32.     // 把请求委托给状态机
  33.     self.currState.buttonWasPressed.call(self);
  34.   };
  35. };
  36. // 测试
  37. let light = new Light();
  38. light.init();

 

12、适配器模式

作用：解决两个软件实体间的接口不兼容问题，别名包装器

例子：对于一个用于根据不同的地图，但是都是渲染地图的功能，但是每个地图的渲染的API不一样，这时候需要对地图的API做一个适当的包装，也就是封装成一个适配器类，即在这个对象里面有一个同名的API

  1. let googleMap = {
  2. 	show(){
  3. 		console.log('开始渲染谷歌地图');
  4. 	}
  5. };
  6. let baiduMap = {
  7. 	display(){
  8. 		console.log('开始渲染百度地图');
  9. 	}
  10. };
  11. let baiduMapAdapter = {
  12. 	show(){
  13. 		return baiduMap.display();
  14. 	}
  15. }
  16. let renderMap = function(map){
  17. 	if( map.show instanceof Function ){
  18. 		map.show();
  19. 	}
  20. };
  21.  
  22. // 测试
  23. renderMap(googleMap); //开始渲染谷歌地图
  24. renderMap(baiduMapAdapter); //开始渲染谷歌地图

数据格式有所变化，需要对旧的数据的格式进行转换 

  1. // 广东省所有城市和id
  2. let getGuangDongCity = function(){
  3. 	let guangdongCity = [
  4. 		{	name:'shenzhen',
  5. 			id:11
  6. 	    },
  7. 		{	name:'guangzhou',
  8. 			id:12
  9. 		}
  10. 	];
  11. 	return guangdongCity;
  12. };
  13. let render = function(fn){
  14. 	console.log('开始渲染广东省地图');
  15. 	document.write(JSON.stringify(fn()));
  16. };
  17. // render(getGuangDongCity);
  18. // 新数据格式
  19. // let guangdongCity = {
  20. // 	shenzhen:11,
  21. // 	guangzhou:12,
  22. // 	zhuhai:13
  23. // };
  24.  
  25. // 新增一个数据格式转换的适配器
  26. let addressAdapter = fucntion(oldAddressFn){
  27. 	let address = {},
  28. 		oldAddress = oldAddressFn();
  29. 	for( let i=0,data;i<oldAddress.length;i++ ){
  30. 		data = oldAddress[i];
  31. 		address[data.name] = data.id;
  32. 	}
  33.  
  34. 	return function(){
  35. 		return address;
  36. 	};
  37. };
  38. render( addressAdapter(getGuangDongCity) );

13、享元模式

是一种用于性能优化的模式，其核心是运用共享技术来有效支持大量细粒度的对象

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/430450
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号