设计模式
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}`);
})
标签:console,log,plane,let,base,return,设计模式,cnblog
From: https://www.cnblogs.com/lingxin1123/p/17092951.html