![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
设计模式-js
用js实现的设计模式
科学的发展-只不过是读大自然写的代码
科学的发展-只不过是读大自然写的代码
展开
-
中介者模式-坦克大战-js
概要用一个中介对象来封装一系列对象交互。中介者使各对象不需要相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。类图运行代码console.log('中介在模式演示:');var indexId = 0;//抽象层--------------------class Mediator { send(byid,toid, message) {...原创 2019-10-29 15:30:11 · 142 阅读 · 0 评论 -
观察者模式-坦克大战-js
概要定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新。类图运行代码console.log('观察者模式演示:');var states = { sort: "sort", run: "run" }var indexId = 0;// 抽象层class SubjectCommandCenter { ...原创 2019-10-29 14:40:56 · 128 阅读 · 0 评论 -
命令模式-坦克大战-js
概要将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化;对请求排队或记录请求日志,以及支持可撤消的操作。类图运行效果代码console.log('命令模式演示:');class InvokerTank { constructor(scomd,rcmd) { this.sortCommand = scomd; t...原创 2019-10-29 13:44:50 · 197 阅读 · 0 评论 -
代理模式-坦克大战-js
模式概述意图(Intent):为其他对象提供一种代理以控制对这个对象的访问。动机(Motivate):在面向对象系统中,有些对象由于某种原因(比如对象创建的开销很大,或者某些操作需要安全控制,或者需要进程外的访问等),直接访问会给使用者、或者系统结构带来很多麻烦。如何在不失去透明操作对象的同时来管理/控制这些对象特有的复杂性?增加一层间接层是软件开发中常见的解决方式。类图需求...原创 2019-10-29 11:50:50 · 142 阅读 · 0 评论 -
迭代器模式-坦克大战-js
需求设计一个集合,可以遍历机能,为坦克装配机能和遍历运行机能。运行代码console.log('迭代器演示:');class Function { constructor(fun) { this.fun = fun; } exe(guige) { console.log(this.fun + guige);...原创 2019-10-29 11:08:10 · 159 阅读 · 0 评论 -
模板方法-坦克大战-js
需求设置坦克能够执行“发射”、“跑”两种机能,两种机能引几种不同会有不同的执行标准,单是两种机能是固定的。设计父类执行“发射”、“跑”的机能,两个机能的具体动作有子类负责。运行效果代码console.log('模板方法演示:');class Tank { constructor(property) { this.property = ...原创 2019-10-29 10:03:39 · 134 阅读 · 0 评论 -
享元模式-坦克大战-js
概要运用共享技术有效地支持大量细粒度的对象。类图需求坦克提供两种机能,“发射”和“跑”,不同的坦克发射和跑的速度不一样,但是无论多少坦克,基本的发射和跑的机能是一样的。说以这里,对“发射”和“跑”采用享元模式处理。设计设计的关键就是,无论多坦克,最终“发射”和“跑”的机能只用一个就够了(就是控制“发射”和“跑”要单件)。运行效果代码cons...原创 2019-10-29 09:39:22 · 136 阅读 · 0 评论 -
外观模式-坦克大战-js
概要为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用。类图需求说明两种坦克,一种是普通坦克:具体发射,跑,瞄准机能;一种是高配坦克在基础机能上加装“水陆两栖”和“卫星定位”机能。设计实现内部两个类分别实现高配和普通的机能。对外提供一个外观类定义全部的机能接口。供外部的坦克类调用。运行结果代码...原创 2019-10-29 08:21:51 · 162 阅读 · 0 评论 -
外观模式-js
代码console.log('外观模式');class ClientA { constructor(facade) { this.facade = facade; } exe() { this.facade.fun1(); }}class ClientB { constructor(facade) {...原创 2019-10-28 16:38:08 · 197 阅读 · 0 评论 -
组合模式-坦克大战-js
需求基本机能有,射击,跑,红外等,这些机能可以组合成新的新能,新的的机能又可以被另一个新的机能组合。运行代码console.log('组合模式');var index = 0;class Component { constructor() { this.components = new Array(); this.id = in...原创 2019-10-28 16:10:20 · 131 阅读 · 0 评论 -
策略模式-坦克大战-js
需求坦克的射击距离,可以是70公里,也可以是50公里,这里给坦克换不同的策略,用以执行不同的机能。运行代码console.log('策略模式');class StrategySort { constructor(specification) { this.specification = specification; } exe()...原创 2019-10-28 14:24:46 · 242 阅读 · 0 评论 -
状态模式-坦克大战-js
需求:坦克在停止状态,能走和瞄准;瞄准进入,已经瞄准状态,走向进入走形中状态。在瞄准状态,只能进行射击,射击后进入停止状态。走行中状态,只能进行停止,不能瞄准和射击。运行效果代码console.log('状态模式');/*//prototype 实验------------------------------------------console.log("p...原创 2019-10-28 13:58:29 · 207 阅读 · 0 评论 -
职责链-坦克大战-js
console.log('职责链');class Tank {}class AbstractHandler{ constructor() { this.comand = 0; this.function = ""; this.nexHandler = null; } handleRequest(comand) { ...原创 2019-10-28 11:11:18 · 132 阅读 · 0 评论 -
装饰模式-坦克大战-js
console.log('桥接模式');//调用父类实验--------------------------------------------class A { constructor() { this.a = 0; } exe() { console.log('A'); }}class B extends A { ...原创 2019-10-28 10:12:21 · 240 阅读 · 5 评论 -
桥接模式-坦克大战-js
console.log('桥接模式');class AbstractAppend { constructor() { this.speed = 0; } exe() { console.log('speed:' + this.speed); }}class AbstractTank { constructor() {...原创 2019-10-28 09:24:06 · 130 阅读 · 0 评论 -
原型坦克大战实现-js
代码console.log('原型模式');class Tank { constructor() { this.appendSort = 0; this.sort = 0; } exe() { console.log('sort:' + this.sort + this.appendSort);...原创 2019-10-28 08:50:03 · 212 阅读 · 0 评论 -
坦克大战-创建者模式实现-js
console.log("创建者模式")// 抽象层class Builder{ buildSort(tank){ tank.sort = this.sort; } buildRun(tank){ tank.run = this.run; }}class Tank{ constructor(){ th...原创 2019-10-27 18:58:19 · 133 阅读 · 0 评论 -
坦克大战-抽象工厂实现-JS
概述:坦克大战-抽象工厂实现代码console.log("抽象工厂模式")// 基础类class Sort{ sort(){ console.log("发生:"+this.guiGe); } }class Run{ run(){ console.log("速度:"+this.guiGe); }}cla...原创 2019-10-27 18:23:26 · 167 阅读 · 0 评论 -
坦克大战游戏-工厂模式实现-js
console.log("工厂模式")class Tank{ exe(){ console.log("运行:"+this.specification); }}class B50Tank extends Tank{ constructor(){ super(); this.specification = "50坦克";...原创 2019-10-27 17:35:59 · 217 阅读 · 0 评论