设计模式-cnblog

设计模式

1.装饰者模式

  • 不改变对象自身代码的基础上新增功能
// 装饰者模式 
// 不改变对象自身代码的基础上新增功能
let a = ()=>{
    console.log('a');
}
// 开闭原则  
// let newa = ()=>{
//     console.log('a');
//     console.log('b');
// }

// newa();

let newa = ()=>{
    a();
    console.log('b');
}
// newa()
// 飞机大战  发射普通子弹   发射导弹   发射原子弹

function Plane() {

}
Plane.prototype.fire = function () {
    console.log('普通子弹');
}

function  MissileDecorator(plane) {
    this.plane = plane;
}

MissileDecorator.prototype.fire = function () {
    this.plane.fire();
    console.log('导弹');
}

function AtomDecorator(plane) {
    this.plane = plane;
}

AtomDecorator.prototype.fire = function () {
    this.plane.fire(); // 普通子弹 导弹 
    console.log('原子弹');
}

let plane = new Plane();
plane = new MissileDecorator(plane);
plane = new AtomDecorator(plane)
plane.fire();

2. 策略模式

  • 有效解决if，else 不可维护的情况
// 策略模式   有效的解决if else 逻辑复杂不可维护的情况
// s a b c d  
// 5 4 3 2 1
// a   b 
let strategys = {
    s(base){
      console.log('女朋友');
      console.log('iphone');
      return base*5;   
    }, 
    a(base){
      console.log('书包');
      return base*4;   
    },
    b(base){
        return base*3;   
    }, 
    c(base){
        return base*2;   
    },
    d(base){
        return base;   
    },
    e(base){
       return 0;
    }
}

function catulateBonus(base,grade){
    return strategys[grade](base)
}






// function catulateBonus(base,grade){
//     if(grade==='s'){
//       console.log('女朋友');
//       console.log('iphone');
//       return base*5;
//     }else if(grade==='a'){
//       console.log('书包');
//       return base*4;
//     }else if(grade==='b'){
//       console.log('对联');
//       return base*3; 
//     }else if(grade==='c'){
//       return base*2; 
//     } else if(grade==='d'){
//       return base*1; 
//     } else {
//       return 0; 
//     }
// }
// // 老王 
// const result  = catulateBonus(1000,'s');
// console.log(result);
// // 小明
// const resulta  = catulateBonus(2000,'a');
// console.log(resulta);

3. 代理模式

  • 请求转发
// 代理模式   转发请求
// 情景剧: 梁山伯与祝英台的故事
// 梁山伯把玫瑰送给媒婆 并委托替他向祝英台表白
// 鲜花
function Flower(owner,name) {
  this.owner = owner;
  this.name = name;
}
// 主角: 梁山伯
let liangShanbo = {
    sendFlower(target){
        let flower = new Flower('liangShanbo','rose');
        target.receiveFlower(flower);
    }
}
// 二号主人公: 媒婆   
let matchMaker = {
    receiveFlower(flower){
        zhuYingTai.receiveFlower(flower)
    }
}
// 女主角: 祝英台
let zhuYingTai = {
   receiveFlower(flower){
      console.log(`zhuYingTai receive ${flower.name} from ${flower.owner}`);
   }
}

// 梁山伯把玫瑰送给媒婆 并委托替他向祝英台表白
liangShanbo.sendFlower(matchMaker);

4. 发布订阅模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布订阅模式</title>
</head>
<body>
  <!-- 
    发布—订阅模式又叫 观察者模式 
    它定义对象间的一种一对多的依赖关系
    当一个对象的状状 态发生改变时
    所有依赖于它的对象都将得到通知 
  --> 
  <script>
    // 用户就是发布者  document 绑定的click事件
    document.addEventListener('click',(event)=>{
        console.log(event);
    })
  </script>
</body>
</html>

5.迭代器模式

// 迭代器模式

const array = [1,2,3,4,5];

// forEach  迭代器模式 最基础应用
// array.forEach((item,index)=>{
    // console.log(`item:${item}`);
    // console.log(`index:${index}`);
// })

// 倒序迭代器
let reverseEach = function (obj,callback) {
    if(!Array.isArray(obj)){
        throw Error('params is must an array!')
    }
    for (let i = obj.length-1; i>=0; i--) {
        callback.call(obj[i],obj[i],i)
    }
}

reverseEach(array,(item,index)=>{
    console.log(`item:${item}`);
    console.log(`index:${index}`);
})
posted @ 2023-02-05 10:14  凌歆  阅读(28)  评论(0)    收藏  举报