js面试之14种设计模式(6)

更新时间:2023-04-03 13:49:09 阅读：评论：0

序列文章

js面试之函数(1)
js面试之对象(2)
js面试之数组的几个不low操作(3)
js面试之http0.9~3.0对比分析(4)
js面试之数据结构与算法 (5)

前言

设计模式如果应用到项目中，可以实现代码的复用和解耦，提高代码质量。本文主要介绍14种设计模式

写ui,封装框架必备

1.简单工厂模式

1.定义：又叫静态工厂方法，就是创建对象，并赋予属性和方法
2.应用：抽取类相同的属性和方法封装到对象上
3.代码：

    let urfactory = function (role) {  function ur(opt) {    this.name = opt.nameputi;    this.viewpage = opt.viewpage;  }  switch (role) {    ca 'superadmin':      return new ur(superadmin);      break;    ca 'admin':      return new ur(admin);      break;    ca 'ur大学四年的计划':      return new ur(ur);      break;    default:      throw new error('参数错误, 可选参数:superadmin、admin、ur')  }}//调用let superadmin = urfactory('superadmin');let admin = urfactory('admin') let normalur = urfactory('ur')//最后得到角色,可以调用

2.工厂方法模式

1.定义：对产品类的抽象使其创建业务主要负责用于创建多类产品的实例
2.应用:创建实例
3.代码:

var factory=function(type,content){  if(this instanceof factory){    var s=new this[type](content);    return s;  }el{    return new factory(type,content);  }}//工厂原型中设置创建类型数据对象的属性factory.prototype={  java:function(content){    console.log('java值为',content);  },  php:function(content){    console.log('php值为',content);  },  python:function(content){    console.log('python值为',content);  },}//测试用例factory('python','我是python');

3.原型模式

1.定义:设置函数的原型属性
2.应用:实现继承
3.代码:

function animal (name) {  // 属性  this.name = name || 'animal';  // 实例方法  this.sleep = function(){    console.log(this.name + '正在睡觉！');  }}// 原型方法animal.prototype.eat = function(food) {  console.log(this.name + '正在吃：' + food);};function cat(){ }cat.prototype = new animal();cat.prototype.name = 'cat';//　test codevar cat = new cat();console.log(cat.name);//catconsole.log(cat.eat('fish'));//cat正在吃：fish  undefinedconsole.log(cat.sleep());//cat正在睡觉！ undefinedconsole.log(cat instanceof animal); //true console.log(cat instanceof cat); //true

4.单例模式

1.定义:只允许被实例化依次的类
2.应用:提供一个命名空间
3.代码:

let singleca = function(name){    this.name = name;};singleca.prototype.getname = function(){    return this.name;}// 获取实例对象let getinstance = (function() {    var instance = null;    return function(name) {        if(!instance) {//相当于一个一次性阀门,只能实例化一次            instance = new singleca(name);        }        return instance;    }})();// 测试单体模式的实例,所以one===twolet one = getinstance("one");let two = getinstance("two");

5.外观模式

1.定义:为子中的一组接口提供一个一致的界面
2.应用:简化复杂接口
3.代码:
外观模式

6.适配器模式

1.定义:将一个接口转换成客户端需要的接口而不需要去修改客户端代码，使得不兼容的代码可以一起工作
2.应用:适配函数参数
3.代码:
适配器模式

7.装饰者模式

1.定义:不改变原对象的基础上,给对象添加属性或方法
2.代码

let decorator=function(input,fn){  //获取事件源  let input=document.getelementbyid(input);  //若事件源已经绑定事件  if(typeof input.onclick=='function'){    //缓存事件源原有的回调函数    let oldclickfn=input.onclick;    //为事件源定义新事件    input.onclick=function(){      //事件源原有回调函数      oldclickfn();      //执行事件源新增回调函数      fn();    }  }el{    //未绑定绑定    input.onclick=fn;  }}//测试用例decorator('textinp',function(){  console.log('文本框执行啦');})decorator('btn',function(){  console.log('按钮执行啦');})

8.桥接模式

1.定义:将抽象部分与它的实现部分分离，使它们都可以独立地变化
2.代码
桥接模式

9.模块方法模式

1.定义:定义一个模板,供以后传不同参数调用
2.代码:
模块方法模式

10.观察者模式

1.作用:解决类与对象,对象与对象之间的耦合
2.代码:

let obrver=  (function(){    let _message={};    return { 507     //注册接口,        //1.作用:将订阅者注册的消息推入到消息队列        //2.参数:所以要传两个参数,消息类型和处理动作,        //3.消息不存在重新创建,存在将消息推入到执行方法              regis托福培训班学费t:function(type,fn){        //如果消息不存在,创建        if(typeof _message[type]==='undefined'){          _message[type]=[fn];        }el{          //将消息推入到消息的执行动作          _message[type].push(fn);        }      },      //发布信息接口        //1.作用:观察这发布消息将所有订阅的消息一次执行        //2.参数:消息类型和动作执行传递参数        //3.消息类型参数必须校验      fire:function(type,args){        //如果消息没有注册,则返回        if(!_message[type]) return;          //定义消息信息          var events={            type:type, //消息类型            args:args||{} //消息携带数据          },          i=0,          len=_message[type].length;          //遍历消息          for(;i<len;i++){            //依次执行注册消息            _message[type][i].call(this,events);          }      },      //移除信息接口        //1.作用:将订阅者注销消息从消息队列清除        //2.参数:消息类型和执行的动作        //3.消息参数校验      remove:function(type,fn){        //如果消息动作队列存在        if(_message[type] instanceof array){          //从最后一个消息动作序遍历          var i=_message[type].length-1;          for(;i>=0;i--){            //如果存在该动作在消息队列中移除            _message[type][i]===fn&&_message[type].splice(i,1);          }        }      }    }  })()//测试用例  //1.订阅消息  obrver.regist('test',function(e){    console.log(e.type,e.args.msg);  })  //2.发布消息  obrver.fire('test',{msg:'传递参数1'});  obrver.fire('test',{msg:'传递参数2'});  obrver.fire('test',{msg:'传递参数3'});