目录一、设计模式介绍设计模式的五大设计原则设计模式的三大类二、设计模式1.工厂模式2.抽象工厂模式3.建造者模式4.单例模式5.适配器模式6.装饰器模式7.代理模式8.外观模式9.发
什么是设计模式
优点
缺点
例子
class DownJacket {
production(){
console.log('生产羽绒服')
}
}
class Underwear{
production(){
console.log('生产内衣')
}
}
class TShirt{
production(){
console.log('生产t恤')
}
}
// 工厂类
class clothingFactory {
constructor(){
this.downJacket = DownJacket
this.underwear = Underwear
this.t_shirt = TShirt
}
getFactory(clothingType){
const _production = new this[clothingType]
return _production.production()
}
}
const clothing = new clothingFactory()
clothing.getFactory('t_shirt')// 生产t恤
优点
缺点
例子
class ProductionFlow {
constructor(){
if(new.target === ProductionFlow){
throw new Error('抽象类不能被实例')
}
}
production(){
throw new Error('production要被重写')
}
materials(){
throw new Error('materials要被重写')
}
}
class DownJacket extends ProductionFlow{
production(){
console.log(`材料:${this.materials()},生产羽绒服`)
}
materials(){
return '鸭毛'
}
}
class Underwear extends ProductionFlow{
production(){
console.log(`材料:${this.materials()},生产内衣`)
}
materials(){
return '丝光棉'
}
}
class TShirt extends ProductionFlow{
production(){
console.log(`材料:${this.materials()},生产t恤`)
}
materials(){
return '纯棉'
}
}
function getAbstractProductionFactory(clothingType){
const clothinGobj = {
downJacket:DownJacket,
underwear:Underwear,
t_shirt:TShirt,
}
if(clothingObj[clothingType]){
return clothingObj[clothingType]
}
throw new Error(`工厂暂时不支持生产这个${clothingType}类型的服装`)
}
const downJacketClass = getAbstractProductionFactory('downJacket')
const underwearClass = getAbstractProductionFactory('underwear')
const downJacket = new downJacketClass()
const underwear = new underwearClass()
downJacket.production() // 材料:鸭毛,生产羽绒服
underwear.production() // 材料:丝光棉,生产内衣
优点
缺点
例子
下面继续用服装厂的生产流程作为例子。
// 抽象类
class Clothing {
constructor() {
this.clothingType = ''
this.price
}
}
class Underwear extends Clothing {
constructor() {
super()
this.clothingType = 'underwear'
this.price = 10
}
}
class TShirt extends Clothing {
constructor() {
super()
this.clothingType = 't_shirt'
this.price = 50
}
}
class DownCoat extends Clothing {
constructor() {
super()
this.clothingType = 'DownCoat'
this.price = 500
}
}
// 产品
class Purchase {
constructor() {
this.clothings = []
}
addClothing(clothing) {
this.clothings.push(clothing)
}
countPrice() {
return this.clothings.reduce((prev, cur)=>cur.price + prev,0)
}
}
// 厂长
class FactoryManager {
createUnderwear() {
throw new Error(`子类必须重写 createUnderwear`)
}
createTShirt() {
throw new Error(`子类必须重写 createTShirt`)
}
createDownCoat() {
throw new Error(`子类必须重写 DownCoat`)
}
}
// 工人
class Worker extends FactoryManager {
constructor() {
super()
this.purchase = new Purchase()
}
createUnderwear(num) {
for (let i = 0; i < num; i++) {
this.purchase.addClothing(new Underwear())
}
}
createTShirt(num) {
for (let i = 0; i < num; i++) {
this.purchase.addClothing(new TShirt())
}
}
createDownCoat(num) {
for (let i = 0; i < num; i++) {
this.purchase.addClothing(new DownCoat())
}
}
}
// 销售
class Salesman {
constructor() {
this.worker = null
}
setWorker(worker) {
this.worker = worker
}
reserve(clothing) {
clothing.forEach((item) => {
if (item.type === 'underwear') {
this.worker.createUnderwear(item.num)
} else if (item.type === 't_shirt') {
this.worker.createTShirt(item.num)
} else if (item.type === 'DownCoat') {
this.worker.createDownCoat(item.num)
} else {
try {
throw new Error('公司暂不生产或不存在该类型的商品')
} catch (error) {
console.log(error)
}
}
});
const purchase = this.worker.purchase
return purchase.countPrice()
}
}
const salesman = new Salesman()
const worker = new Worker()
salesman.setWorker(worker)
const order = [
{
type: 'underwear',
num: 10
},
{
type: 't_shirt',
num: 4
},
{
type: 'DownCoat',
num: 1
}
]
console.log(`本次订单所需金额:${salesman.reserve(order)}`)
const obj = {}
,obj
就是独一无二的一个对象,在全局作用域的声明下,可以在任何地方对它访问,这就满足了单例模式的条件。优点
缺点
例子
class LoginFrame {
static instance = null
constructor(state){
this.state = state
}
show(){
if(this.state === 'show'){
console.log('登录框已显示')
return
}
this.state = 'show'
console.log('登录框展示成功')
}
hide(){
if(this.state === 'hide'){
console.log('登录框已隐藏')
return
}
this.state = 'hide'
console.log('登录框隐藏成功')
}
// 通过静态方法获取静态属性instance上是否存在实例,如果没有创建一个并返回,反之直接返回已有的实例
static getInstance(state){
if(!this.instance){
this.instance = new LoginFrame(state)
}
return this.instance
}
}
const p1 = LoginFrame.getInstance('show')
const p2 = LoginFrame.getInstance('hide')
console.log(p1 === p2) // true
优点
缺点
例子
class Jack {
english() {
return 'I speak English'
}
}
class Xiaoming {
chinese() {
return '我只会中文'
}
}
// 适配器
class XiaoHong {
constructor(person) {
this.person = person
}
chinese() {
return `${this.person.english()} 翻译: "我会说英语"`
}
}
class Communication {
speak(language) {
console.log(language.chinese())
}
}
const xiaoming = new Xiaoming()
const xiaoHong = new XiaoHong(new Jack())
const communication = new Communication()
communication.speak(xiaoming)
communication.speak(xiaoHong)
优点
缺点
例子
class aircraft {
ordinary(){
console.log('发射普通子弹')
}
}
class AircraftDecorator {
constructor(aircraft){
this.aircraft = aircraft
}
laser(){
console.log('发射激光')
}
guidedMissile(){
console.log('发射导弹')
}
ordinary(){
this.aircraft.ordinary()
}
}
const aircraft = new Aircraft()
const aircraftDecorator = new AircraftDecorator(aircraft)
aircraftDecorator.ordinary() // 发射普通子弹
aircraftDecorator.laser() // 发射激光
aircraftDecorator.guidedMissile() // 发射导弹
// 可以看到在不更改源代码的情况下对它进行了装饰扩展
优点
缺点
例子
// 员工
class Staff {
constructor(affairType){
this.affairType = affairType
}
applyFor(target){
target.receiveApplyFor(this.affairType)
}
}
// 秘书
class Secretary {
constructor(){
this.leader = new Leader()
}
receiveApplyFor(affair){
this.leader.receiveApplyFor(affair)
}
}
//领导
class Leader {
receiveApplyFor(affair){
console.log(`批准:${affair}`)
}
}
const staff = new Staff('升职加薪')
staff.applyFor(new Secretary()) // 批准:升职加薪
优点
缺点
例子
function addEvent(el,type,fn){
if(el.addEventlistener){// 高级游览器添加事件DOM api
el.addEventlistener(type,fn,false)
}else if(el.attachEvent){// 低版本游览器的添加事件API
el.attachEvent(`on${type}`,fn)
}else {//其他
el[type] = fn
}
}
function bindEvent(el,type,selector,fn){
if(!fn){
fn = selector
}
// 其他代码
console.log(el,type,fn)
}
bindEvent(document.body,'click','#root',()=>{})
bindEvent(document.body,'click',()=>{})
优点
缺点
例子
class Subject {
constructor(){
this.observers = {}
this.key = ''
}
add(observer){
const key = observer.project
if (!this.observers[key]) {
this.observers[key] = []
}
this.observers[key].push(observer)
}
remove(observer){
const _observers = this.observers[observer.project]
console.log(_observers,11)
if(_observers.length){
_observers.forEach((item,index)=>{
if(item === observer){
_observers.splice(index,1)
}
})
}
}
setObserver(subject){
this.key = subject
this.notifyAllObservers()
}
notifyAllObservers(){
this.observers[this.key].forEach((item,index)=>{
item.update()
})
}
}
class Observer {
constructor(project,name) {
this.project = project
this.name = name
}
update() {
console.log(`尊敬的:${this.name} 你预约的项目:【${this.project}】 马上开始了`)
}
}
const subject = new Subject()
const xiaoming = new Observer('滑雪','xiaoming')
const A = new Observer('大跳台','A')
const B = new Observer('大跳台','B')
const C = new Observer('大跳台','C')
subject.add(xiaoming)
subject.add(A)
subject.add(B)
subject.add(C)
subject.remove(B) // 取消订阅
subject.setObserver('大跳台')
优点
缺点
例子
迭代器分为内部迭代器和外部迭代器,它们有各自的适用场景。
// 内部迭代器表示内部已经定义好了迭代规则,它完全接受整个迭代过程,外部只需一次初始调用。
Array.prototype.MyEach = function(fn){
for(let i = 0;i<this.length;i++){
fn(this[i],i,this)
}
}
Array.prototype.MyEach = function(fn){
for(let i = 0;i<this.length;i++){
fn(this[i],i,this)
}
}
[1,2,3,4].MyEach((item,index)=>{
console.log(item,index)
})
// 外部迭代器必须显示的迭代下一个元素。它增加了调用的复杂度,但也增加了迭代器的灵活性,可以手动控制迭代的过程。
class Iterator{
constructor(arr){
this.current = 0
this.length = arr.length
this.arr = arr
}
next(){
return this.getCurrItem()
}
isDone(){
return this.current>=this.length
}
getCurrItem(){
return {
done:this.isDone(),
value:this.arr[this.current++]
}
}
}
let iterator =new Iterator([1,2,3])
while(!(item=iterator.next()).done) {
console.log(item)
}
iterator.next()
优点
缺点
例子
class State {
constructor(attack){
this.attack = attack
}
handle(context){
console.log(this.attack)
context.setState(this)
}
}
class Context {
constructor(){
this.state = null
}
getState(){
return this.state
}
setState(state){
this.state = state
}
}
const q1 = new State('q1 第1击'),
q2 = new State('q2 第2击'),
q3 = new State('q3 第3击'),
context = new Context()
q1.handle(context)//q1 第1击
q2.handle(context)//q2 第2击
q3.handle(context)//q3 第3击
优点
缺点
例子
const rules = {
cover_img: {
must: false,
msg: '请上传封面图片',
val: ''
},
name: {
must: true,
msg: '姓名不能为空',
val: ''
},
sex: {
must: true,
msg: '请填写性别',
val: ''
},
birthday: {
must: false,
msg: '请选择生日',
val: ''
},
}
function verify(){
for(const key in rules){
if(rules[key].must&&!rules[key].val){
console.log(rules[key].msg)
}
}
}
verify()
// 姓名不能为空
// 请填写性别
//html-----------------
<fORM action="Http:// xxx.com/reGISter" id="registerForm" method="post">
请输入用户名:<input type="text" name="userName" />
请输入密码:<input type="text" name="passWord" />
请输入手机号码:<input type="text" name="phoneNumber" />
<button>提交</button>
</form>
// js------------------
class Strategies {
constructor() {
this.rules = {}
}
add(key, rule) {
this.rules[key] = rule
return this
}
}
class Validator {
constructor(strategies) {
this.cache = [] // 保存检验规则
this.strategies = strategies
}
add(dom, rules) {
rules.forEach((rule) => {
const strategyAry = rule.strategy.split(':')
this.cache.push(() => {
const strategy = strategyAry.shift()
strategyAry.unshift(dom.value)
strategyAry.push(rule.errorMsg)
console.log(this.strategies[strategy])
return this.strategies[strategy].apply(dom, strategyAry)
})
});
}
start() {
for (let i = 0,validatorFunc; validatorFunc =this.cache[i++]; ) {
const msg = validatorFunc()
if (msg) {
return msg
}
}
}
}
const registerForm = document.getElementById('registerForm') // 获取formDom节点
const strategies = new Strategies()
strategies.add('isNonEmpty', function(value, errorMsg) {
if (!value) {
return errorMsg
}
}).add('minLength', function(value, length, errorMsg) {
if (value.length < length) {
return errorMsg
}
}).add('isMobile', function(value, errorMsg) {
if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
return errorMsg
}
})
function validataFunc() {
const validator = new Validator(strategies.rules)
// 多个校验规则
validator.add(registerForm.userName, [
{
strategy: 'isNonEmpty',
errorMsg: '用户名不能为空'
}, {
strategy: 'minLength:10',
errorMsg: '用户名长度不能少于10位'
}
])
validator.add(registerForm.password, [{
strategy: 'minLength:6',
errorMsg: '密码长度不能少于6位'
}])
validator.add(registerForm.phoneNumber, [{
strategy: 'isMobile',
errorMsg: '手机号码格式不对'
}])
const errorMsg = validator.start()
return errorMsg // 返回错误信息。
}
registerForm.onsubmit = function () {
const errorMsg = validataFunc()
if (errorMsg) { // 如果存在错误信息,显示错误信息,并且阻止onsubmit默认事件
console.log(errorMsg)
return false
}
}
优点
缺点
例子
// html-------------------
<button id="button2">点击按钮 1</button>
<button id="button2">点击按钮 2</button>
<button id="button3">点击按钮 3</button>
// js---------------------
const button1 = document.getElementById('button1'),
button2 = document.getElementById('button2'),
button3 = document.getElementById('button3');
const MenBar = {
refresh:function(){
console.log('刷新菜单目录')
}
}
const SubMenu = {
add:function(){
console.log('增加子菜单')
},
del:function(){
console.log('删除子菜单')
}
}
function setCommand(el,command){
el.onclick = function(){
command.execute()
}
}
class MenuBarCommand{
constructor(receiver,key){
this.receiver = receiver
this.key = key
}
execute(){
this.receiver[this.key]()
}
}
setCommand(button1,new MenuBarCommand(MenBar,'refresh'))
setCommand(button2,new MenuBarCommand(SubMenu,'add'))
setCommand(button3,new MenuBarCommand(SubMenu,'del'))
优点
缺点
例子
// 文件夹类
class Folder {
constructor(name) {
this.name = name
this.parent = null;
this.files = []
}
// 添加文件
add(file) {
file.parent = this
this.files.push(file)
return this
}
// 扫描文件
scan() {
console.log(`开始扫描文件夹:${this.name}`)
this.files.forEach(file => {
file.scan()
});
}
// 删除指定文件
remove() {
if (!this.parent) {
return
}
for (let files = this.parent.files, i = files.length - 1; i >= 0; i--) {
const file = files[i]
if (file === this) {
files.splice(i, 1)
break
}
}
}
}
// 文件类
class File {
constructor(name) {
this.name = name
this.parent = null
}
add() {
throw new Error('文件下面不能添加任何文件')
}
scan() {
console.log(`开始扫描文件:${this.name}`)
}
remove() {
if (!this.parent) {
return
}
for (let files = this.parent.files, i = files.length - 1; i >= 0; i++) {
const file = files[i]
if (file === this) {
files.splice(i, 1)
}
}
}
}
const book = new Folder('电子书')
const js = new Folder('js')
const node = new Folder('node')
const Vue = new Folder('vue')
const js_file1 = new File('javascript高级程序设计')
const js_file2 = new File('javascript忍者秘籍')
const node_file1 = new File('nodejs深入浅出')
const vue_file1 = new File('vue深入浅出')
const designMode = new File('javascript设计模式实战')
js.add(js_file1).add(js_file2)
node.add(node_file1)
vue.add(vue_file1)
book.add(js).add(node).add(vue).add(designMode)
book.remove()
book.scan()
优点
缺点
例子
// 抽象父类
class Beverage {
boilWater(){
console.log('把水煮沸')
}
brew(){
throw new Error('字类必须重写brew方法')
}
pourInCup(){
throw new Error('字类必须重写pourInCup方法')
}
addCondiments(){
throw new Error('字类必须重写addCondiments方法')
}
init(){
this.boilWater()
this.brew()
this.pourInCup()
this.addCondiments()
}
}
// 咖啡类
class Coffee extends Beverage {
brew(){
console.log('用沸水冲泡咖啡')
}
pourInCup(){
console.log('把咖啡倒进杯子')
}
addCondiments(){
console.log('加糖和牛奶')
}
}
// 茶类
class Tea extends Beverage {
brew(){
console.log('用沸水侵泡茶叶')
}
pourInCup(){
console.log('把茶倒进杯子')
}
addCondiments(){
console.log('加柠檬')
}
}
const coffee = new Coffee()
coffee.init()
const tea = new Tea()
tea.init()
优点
缺点
例子
let id = 0
// 定义内部状态
class Upload {
constructor(uploadType) {
this.uploadType = uploadType
}
// 点击删除时 小于3000直接删除,大于3000通过confirm提示弹窗删除。
delFile(id) {
uploadManager.setExternalState(id,this)
if(this.fileSize < 3000){
return this.dom.parentNode.removeChild(this.dom)
}
if(window.confirm(`确定要删除该文件吗?${this.fileName}`)){
return this.dom.parentNode.removeChild(this.dom)
}
}
}
// 外部状态
class uploadManager {
static uploadDatabase = {}
static add(id, uploadType, fileName, fileSize) {
const filWeightObj = UploadFactory.create(uploadType)
const dom = this.createDom(fileName, fileSize, () => {
filWeightObj.delFile(id)
})
this.uploadDatabase[id] = {
fileName,
fileSize,
dom
}
}
// 创建DOM 并且为button绑定删除事件。
static createDom(fileName, fileSize, fn) {
const dom = document.createElement('div')
dom.innerHTML = `
<span>文件名称:${fileName},文件大小:${fileSize}</span>
<button class="delFile">删除</button>
`
dom.querySelector('.delFile').onclick = fn
document.body.append(dom)
return dom
}
static setExternalState(id, flyWeightObj) {
const uploadData = this.uploadDatabase[id]
for (const key in uploadData) {
if (Object.hasOwnProperty.call(uploadData, key)) {
flyWeightObj[key] = uploadData[key]
}
}
}
}
// 定义一个工厂创建upload对象,如果其内部状态实例对象存在直接返回,反之创建保存并返回。
class UploadFactory {
static createFlyWeightObjs = {}
static create(uploadType) {
if (this.createFlyWeightObjs[uploadType]) {
return this.createFlyWeightObjs[uploadType]
}
return this.createFlyWeightObjs[uploadType] = new Upload(uploadType)
}
}
// 开始加载
const startUpload = (uploadType, files)=>{
for (let i = 0, file; file = files[i++];) {
uploadManager.add(++id, uploadType, file.fileName, file.fileSize)
}
}
startUpload('plugin', [
{fileName: '1.txt',fileSize: 1000},
{fileName: '2.html',fileSize: 3000},
{fileName: '3.txt',fileSize: 5000}
]);
startUpload('flash', [
{fileName: '4.txt',fileSize: 1000},
{fileName: '5.html',fileSize: 3000},
{fileName: '6.txt',fileSize: 5000}
]);
优点
缺点
例子
class Order500 {
constructor(){
this.orderType = 1
}
handle(orderType, pay, stock){
if(orderType === this.orderType&&pay){
console.log('500元定金预约,得到100元优惠券')
}else {
return 'nextSuccessor'
}
}
}
class Order200 {
constructor(){
this.orderType = 2
}
handle(orderType, pay, stock){
if(orderType === this.orderType&&pay){
console.log('200元订金预约,得到50元优惠卷')
}else {
return 'nextSuccessor'
}
}
}
class OrderNormal {
constructor(){
this.stock = 0
}
handle(orderType, pay, stock){
if (stock > this.stock) {
console.log('普通购买,无优惠卷')
} else {
console.log('手机库存不足')
}
}
}
class Chain {
constructor(order){
this.order = order
this.successor = null
}
setNextSuccessor(successor){
return this.successor = successor
}
passRequest(...val){
const ret = this.order.handle.apply(this.order,val)
if(ret === 'nextSuccessor'){
return this.successor&&this.successor.passRequest.apply(this.successor,val)
}
return ret
}
}
console.log(new Order500())
var chainOrder500 = new Chain( new Order500() );
var chainOrder200 = new Chain( new Order200() );
var chainOrderNormal = new Chain( new OrderNormal() );
chainOrder500.setNextSuccessor( chainOrder200 );
chainOrder200.setNextSuccessor( chainOrderNormal );
chainOrder500.passRequest( 1, true, 500 ); // 输出:500 元定金预购,得到 100 优惠券
chainOrder500.passRequest( 2, true, 500 ); // 输出:200 元定金预购,得到 50 优惠券
chainOrder500.passRequest( 3, true, 500 ); // 输出:普通购买,无优惠券
chainOrder500.passRequest( 1, false, 0 ); // 输出:手机库存不足
优点
缺点
例子
// html-----------
选择颜色:<select name="" id="colorSelect">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
<br />
选择内存:<select name="" id="memorySelect">
<option value="">请选择</option>
<option value="32G">32G</option>
<option value="63G">64G</option>
</select>
<br />
输入购买数量:<input type="text" id="numberInput" />
<br />
<div>你选择了颜色:<span id="colorInfo"></span></div>
<div>你选择了内存:<span id="memoryInfo"></span></div>
<div>你选择了数量:<span id="numberInfo"></span></div>
<button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
// js -------------------
const goods = {
"red|32G": 3,
"red|16G": 0,
"blue|32G": 1,
"blue|16G": 6
},
colorSelect = document.getElementById('colorSelect'),
memorySelect = document.getElementById('memorySelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
memoryInfo = document.getElementById('memoryInfo'),
numberInfo = document.getElementById('numberInfo'),
nextBtn = document.getElementById('nextBtn'),
mediator = (function () {
return {
changed(obj) {
const color = colorSelect.value,
memory = memorySelect.value,
number = numberInput.value,
stock = goods[`${color}|${memory}`]
if (obj === colorSelect) {
colorInfo.innerHTML = color
} else if (obj === memorySelect) {
memoryInfo.innerHTML = memory
} else if (obj === numberInput) {
numberInfo.innerHTML = number
}
if (!color) {
nextBtn.disabled = true
nextBtn.innerHTML = '请选择手机颜色'
return
}
if (!memory) {
nextBtn.disabled = true
nextBtn.innerHTML = '请选择内存大小'
return
}
if (Number.isInteger(number - 0) && number < 1) {
nextBtn.disabled = true
nextBtn.innerHTML = '请输入正确的购买数量'
return
}
nextBtn.disabled = false
nextBtn.innerHTML = '放入购物车'
}
}
})()
colorSelect.onchange = function () {
mediator.changed(this)
}
memorySelect.onchange = function () {
mediator.changed(this)
}
numberInput.oninput = function () {
mediator.changed(this)
}
优点
缺点
例子
const user = {
name:'小明',
age:'30',
getInfo(){
console.log(`姓名:${this.name},年龄:${this.age}`)
}
}
const xiaozhang = Object.create(user)
xiaozhang.name = '小张'
xiaozhang.age = 18
xiaozhang.getInfo() // 姓名:小张,年龄:18
user.getInfo() // 姓名:小明,年龄:30
优点
缺点
例子
// 棋子
class ChessPieces {
constructor(){
this.chess = {}
}
// 获取棋子
getChess(){
return this.chess
}
}
// 记录棋路
class Record {
constructor(){
this.chessTallyBook = [] // 记录棋路
}
recordTallyBook(chess){
// console.log(this.chessTallyBook.includes(chess))
const isLoadtion = this.chessTallyBook.some(
item=>item.location === chess.location
)
if(isLoadtion){
console.log(`${chess.type},${chess.location}已存在其他棋子`)
}else {
this.chessTallyBook.push(chess)
}
// this.chessTallyBook.some(item=>item.location === chess.location)
}
getTallyBook(){
return this.chessTallyBook.pop()
}
}
// 下棋规则
class ChessRule {
constructor(){
this.chessInfo = {}
}
playChess(chess){
this.chessInfo = chess
}
getChess(){
return this.chessInfo
}
// 记录棋路
recordTallyBook(){
return new ChessPieces(this.chessInfo)
}
// 悔棋
repentanceChess(chess){
this.chessInfo = chess.getTallyBook()
}
}
const chessRule = new ChessRule()
const record = new Record()
chessRule.playChess({
type:'黑棋',
location:'X10,Y10'
})
record.recordTallyBook(chessRule.getChess())//记录棋路
chessRule.playChess({
type:'白棋',
location:'X11,Y10'
})
record.recordTallyBook(chessRule.getChess())//记录棋路
chessRule.playChess({
type:'黑棋',
location:'X11,Y11'
})
record.recordTallyBook(chessRule.getChess())//记录棋路
chessRule.playChess({
type:'白棋',
location:'X12,Y10'
})
console.log(chessRule.getChess())//{type:'白棋',location:'X12,Y10'}
chessRule.repentanceChess(record) // 悔棋
console.log(chessRule.getChess())//{type:'黑棋',location:'X11,Y11'}
chessRule.repentanceChess(record) // 悔棋
console.log(chessRule.getChess())//{type:'白棋',location:'X11,Y10'}
优点
缺点
例子
class Phone {
constructor(brand,modle){
this.brand = brand
this.modle = modle
}
showPhone(){
return `手机的品牌:${this.brand.getBrand()},型号${this.modle.getModle()}`
}
}
class Brand {
constructor(brandName){
this.brandName = brandName
}
getBrand(){
return this.brandName
}
}
class Modle {
constructor(modleName){
this.modleName = modleName
}
getModle(){
return this.modleName
}
}
const phone = new Phone(new Brand('华为'),new Modle('mate 40'))
console.log(phone.showPhone())
优点
缺点
例子
class Phone {
accept() {
throw new Error('子类的accept必须被重写')
}
}
class Mata40Pro extends Phone {
accept() {
const phoneVisitor = new PhoneVisitor()
return phoneVisitor.visit(this)
}
}
class IPhone13 extends Phone {
accept() {
const phoneVisitor = new PhoneVisitor()
return phoneVisitor.visit(this)
}
}
// 访问者类
class PhoneVisitor {
visit(phone) {
if (phone.constructor === IPhone13) {
return {
os: 'iOS',
chip: 'A15仿生芯片',
screen: '电容屏'
}
} else if (phone.constructor === Mata40Pro) {
return {
os: 'HarmonyOS',
chip: 'Kirin 9000',
GPUType: 'Mali-G78',
port: 'type-c'
}
}
}
}
const mata40Pro = new Mata40Pro()
console.log(mata40Pro.accept())
优点
缺点
例子
class TerminalExpression {
constructor(data) {
this.data = data
}
interpret(context) {
if (context.indexOf(this.data) > -1) {
return true;
}
return false;
}
}
class OrExpression {
constructor(expr1, expr2) {
this.expr1 = expr1;
this.expr2 = expr2;
}
interpret(context) {
return this.expr1.interpret(context) || this.expr2.interpret(context);
}
}
class AndExpression {
constructor(expr1, expr2) {
this.expr1 = expr1;
this.expr2 = expr2;
}
interpret(context) {
return this.expr1.interpret(context) && this.expr2.interpret(context);
}
}
class InterpreterPatternDemo {
static getMaleExpression() {
const robert = new TerminalExpression("小明");
const john = new TerminalExpression("小龙");
return new OrExpression(robert, john);
}
static getMarriedWomanExpression() {
const julie = new TerminalExpression("张三");
const married = new TerminalExpression("小红");
return new AndExpression(julie, married);
}
static init(args) {
const isMale = this.getMaleExpression();
const isMarriedWoman = this.getMarriedWomanExpression();
console.log(`小龙是男性?${isMale.interpret("小龙")}`)
console.log(`小红是一个已婚妇女?${isMarriedWoman.interpret("小红 张三")}`)
}
}
InterpreterPatternDemo.init()
以上就是javascript的23种设计模式总结大全的详细内容,更多关于javascript设计模式的资料请关注编程网其它相关文章!
--结束END--
本文标题: javascript的23种设计模式示例总结大全
本文链接: https://www.lsjlt.com/news/152601.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0