设计模式-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 凌歆阅读(21) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript高级第02天笔记-cnblog

· 浏览器-cnblog

· JavaScript设计模式

· 设计模式-观察者模式

· JS-设计模式

公告

昵称：凌歆
园龄： 2年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

设计模式-cnblog

设计模式

1.装饰者模式

2. 策略模式

3. 代理模式

4. 发布订阅模式

5.迭代器模式

公告

搜索

常用链接

我的标签

随笔分类 (68)

随笔档案 (142)

阅读排行榜

	// 装饰者模式
	// 不改变对象自身代码的基础上新增功能
	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();

	// 策略模式有效的解决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);

	// 代理模式转发请求
	// 情景剧: 梁山伯与祝英台的故事
	// 梁山伯把玫瑰送给媒婆并委托替他向祝英台表白
	// 鲜花
	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);

	<!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>

	// 迭代器模式

	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}`);
	})