自己的网站可以做淘客吗,网站设计联盟,wordpress 产品视频上传,网络策划案通过例子持续学习JS设计模式中#xff0c;接下来请跟随我的步伐走进我的学习笔记世界~
什么是设计模式#xff1f;我们为什么需要学习设计模式#xff1f;
设计模式是可以更好解决问题的一种方案。
这意味着什么#xff1f;如果你开发的项目的功能是固定的#xff0c;永…通过例子持续学习JS设计模式中接下来请跟随我的步伐走进我的学习笔记世界~
什么是设计模式我们为什么需要学习设计模式
设计模式是可以更好解决问题的一种方案。
这意味着什么如果你开发的项目的功能是固定的永远不会调整业务那么你就不需要使用设计模式等任何技巧。您只需要使用通常的方式编写代码并完成需求即可。
但是我们的开发项目的需求是不断变化的这就需要我们经常修改我们的代码。也就是说我们现在写代码的时候需要为未来业务需求可能发生的变化做好准备。
这时你会发现使用设计模式可以让你的代码更具可扩展性。
1 命令模式 我的理解 定义一个类里面写方法用的时候引入这个类调用类.方法()使用。 定义 有时候需要向某些对象发送请求但是并不知道请求的接收者是谁。此时希望用一种松耦合的方式来设计程序使得请求发送者和请求接收者能够消除彼此之间的耦合关系。 适用场景绘制按钮不知道某个按钮未来将用来做什么可能用来刷新菜单界面也可能用来增加一些子菜单只知道点击这个按钮会发生某些事情。那么当完成这个按钮的绘制之后应该如何给它绑定onclick 事件呢? 我们很快可以找到在这里运用命令模式的理由:点击了按钮之后必须向某些负责具体行为的对象发送请求这些对象就是请求的接收者。但是目前并不知道接收者是什么对象也不知道接收者究竟会做什么。此时我们需要借助命令对象的帮助以便解开按钮和负责具体行为对象之间的耦合。
const btn1 function () {};
const btn2 function () {};// 定义一个命令发布者的类
class Executor {setCommand(btn, command) {btn.onclick function() {command.execute()}}
}// 定义一个命令接收者
class Menu {refresh() {console.log(刷新菜单)}addSubMenu() {console.log(增加子菜单)}
}// 定义一个刷新菜单的命令对象的类
class RefreshMenu {constructor(receiver) {// 命令对象与接收者关联this.receiver receiver}// 暴露出统一的接口给命令发布者Executorexecute() {this.receiver.refresh()}
}// 定义一个增加子菜单的命令对象的类
class AddSubMenu {constructor(receiver) {// 命令对象与接收者关联this.receiver receiver}// 暴露出统一的接口给命令发布者Executorexecute() {this.receiver.addSubMenu()}
}var menu new Menu()
var executor new Executor()var refreshMenu new RefreshMenu(menu)
// 给按钮1添加刷新功能
executor.setCommand(btn1, refreshMenu)var addSubMenu new AddSubMenu(menu)
// 给按钮2添加增加子菜单功能
executor.setCommand(btn2, addSubMenu)// 如果想给按钮3增加删除菜单的功能就继续增加删除菜单的命令对象和接收者的具体删除方法而不必修改命令对象
btn1.onclick();
btn2.onclick();2 单例模式
定义 保证一个类仅有一个实例并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否如果存在则直接返回如果不存在就创建了再返回这就确保了一个类只有一个实例对象。适用场景 一个单一对象。比如弹窗无论点击多少次弹窗只应该被创建一次。
class CreateUser {constructor(name) {this.name name;this.getName();}getName() {return this.name;}
}
// 代理实现单例模式
var ProxyMode (function() {var instance null;return function(name) {if(!instance) {instance new CreateUser(name);}return instance;}
})();
// 测试单体模式的实例
var a new ProxyMode(aaa);
var b new ProxyMode(bbb);
// 因为单体模式是只实例化一次所以下面的实例是相等的
console.log(a b); //true3 策略模式
定义 定义一系列的算法把他们一个个封装起来并且使他们可以相互替换。 策略模式的目的就是将算法的使用和算法的实现分离开来。适用场景 如果您的函数具有以下特征判断条件很多各个判断条件下的代码相互独立。然后你可以将每个判断条件下的代码封装成一个独立的函数接着建立判断条件和具体策略的映射关系使用策略模式重构你的代码。
/** 假设您目前正在从事一个电子商务商店的项目。
* 每个产品都有一个原价我们可以称之为 originalPrice。
* 但并非所有产品都以原价出售我们可能会推出允许以折扣价
* 出售商品的促销活动。商家可以在后台为产品设置不同的状态。
* 然后实际售价将根据产品状态和原价动态调整。
* 具体规则xxxxxxxxx
* 如果你需要写一个getPrice函数你应该怎么写呢*/let priceStrategies {pre-sale: preSalePrice,promotion: promotionPrice,black-friday: blackFridayPrice,default: defaultPrice
}function getPrice(originalPrice, status) {return priceStrategies[status](originalPrice)
}function blackFridayPrice(origialPrice) {if (origialPrice 100 originalPrice 200) {return origialPrice - 20} else if (originalPrice 200) {return originalPrice - 50} else {return originalPrice * 0.8}
}function defaultPrice(origialPrice) {return origialPrice
}function getPrice(originalPrice, status) {if (status pre-sale) {return preSalePrice(originalPrice)}if (status promotion) {return promotionPrice(originalPrice)}if (status black-friday) {return blackFridayPrice(originalPrice)}if(status default){return defaultPrice(originalPrice)}
}
