说明:继续学习努力
PS:学习自---掘金的JavaScript设计模式核心原理与应用
小册
一、介绍
- 1.概念
在不改变原对象的基础上,通过对其进行包装拓展,使原有对象可以满足用户的更复杂需求。
- 2.举例
在人工智能时代,我们公司制造了一个机器人,这个机器人呢,可以扫地可以巡逻。后来,因为某国发生了战争,需要定制我们的机器人,需要满足作战的需求0.0。这时候我们就进行修改机器人,改成了战争机器人。后来又来了一批订单要求我们可以送外卖,我们就又进行了开发。然后。。。无数个业务,我们公司应该发了吧。
a few moments later
很多人都离职了,我也打算离职了,新来员工和我交接,然后里面东西人家也不是很懂,初始产品已经改了很多了,项目越来越难维护了。老板也不让我走,给我买了套上海的房子(醒醒小伙子)。
二、代码分析
- 1.初始化机器人
创建机器人类,拥有打扫和巡逻功能
class Robot {
// 初始化能力
initAbility() {
this.clean();
this.patrol();
}
// 打扫
clean() {
console.log('在打扫卫生,版本');
}
// 巡逻
patrol() {
console.log('进行巡逻')
}
}
// 初识机器人调用
const robot = new Robot();
robot.initAbility()
打印结果:
- 2.创建打仗装饰器,可以进行打仗
具有穿盔甲和发射武器的能力
// 定义装饰器类
class FightDecorator {
constructor(obj) {
this.obj = obj;
}
initAbility() {
this.obj.initAbility();
this.handleDeco();
}
// 装饰器内的方法
handleDeco() {
this.corselet()
this.arms()
}
// 穿盔甲
corselet() {
console.log('我穿上了盔甲');
}
// 发射武器
arms() {
console.log('发射武器');
}
}
// 使用装饰器进行装饰
const robot2 = new Robot();
const fightRobot = new FightDecorator(robot2);
fightRobot.initAbility()
打印结果:
- 3.创建外卖机器人装饰器
可以进行送外卖和对接美团系统
class TakeAwayDecorator {
constructor(obj) {
this.obj = obj;
}
initAbility() {
this.obj.initAbility();
this.handleDeco()
}
handleDeco() {
this.bike();
this.system();
}
// 骑电瓶车
bike() {
console.log('我是骑车机器人');
}
// 对接系统
system() {
console.log('我能够对接美团系统');
}
}
const robot3 = new Robot();
const takeAwayDecorator = new TakeAwayDecorator(robot3);
takeAwayDecorator.initAbility()
打印结果:
PS:ES7部分装饰器语法糖&react的HOC等我复习完webpack打包和react部分再介绍,这里先学这么多
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!