js设计模式:状态模式

作用:

将对象的行为和状态进行分离,状态是由行为操作决定的,而不是直接控制。

同时,行为也是由状态决定的,每个状态都有自己的行为和相应的方法

行为与状态分离,可以使代码方便维护

示例:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态模式</title>
</head>

<body>
    <button onclick="wjtUseCom1()">王惊涛上机</button>
    <button onclick="swkUseCom1()">孙悟空上机</button>
    <button onclick="wjtAddTime()">王惊涛续费</button>
    <button onclick="aheadClose()">王惊涛提前下机</button>
    <script>
        //网吧上网

        //电脑类
        class Computer {
            constructor(code) {
                this.code = code
            }
            useName = null
            status = 'close'
            useTime = 0
            canUseTime = 0

            //快没钱了
            warning() {
                this.status = 'warning'
                console.log(`${this.code}警告:尊敬的${this.useName}先生/女士,您的余额所剩不多,请到台前及时充值,当前状态${this.status}`)
            }

            //到时关闭或者提前下机
            close(name,useFun) {
                if(name !== this.useName){
                    console.log(`你不是机器使用者,无权关闭`)
                    return 
                }
                this.status = 'close'
                this.canUseTime = 0
                this.useTime = 0
                if(useFun){
                    clearInterval(useFun)
                useFun = null
                }

                console.log('到时间了,当前状态:' + this.status)
            }

            //续费
            addTime(addTime,name) {
                if(name !== this.useName){
                    console.log(`你充错机器了吧,现在这台机器是${this.useName}在使用`)
                    return 
                }
                this.status = 'using'
                this.canUseTime += addTime
                console.log('续费成功,当前状态' + this.status)
            }

            useCom = function (name, canUseTime) {
                if (this.status !== 'close') {
                    console.log(`不好意思:${name}先生/女士${this.code}正在被${this.useName}使用,请你换一台`)
                    return
                }
                this.useName = name
                this.status = 'using'   //开机使用
                console.log(`${name}开始使用${this.code},当前状态:${this.status}`)
                this.canUseTime = canUseTime
                
                let useFun = setInterval(() => {
                    if(this.status === 'close'){
                        clearInterval(useFun)
                        useFun = null
                        this.canUseTime = 0
                        this.useTime = 0
                        return
                    }
                    this.useTime += 1000
                    console.log(`已经使用${this.useTime}了,还剩${this.canUseTime - this.useTime}`)
                    if (this.canUseTime - this.useTime === 5000) {  //时间不多了,警告提示
                        this.warning()
                    }
                    if (this.useTime === this.canUseTime) {
                        this.close(this.useName,useFun)   //时间到了,关闭

                    }
                }, 1000)
            }
        }

        let computer1 = new Computer('1号机器')
        let wjt = '王惊涛'
        let sunwukong = '孙悟空'

        const wjtUseCom1 = ()=>{
            computer1.useCom(wjt, 10000)
        }
        const swkUseCom1 = ()=>{
            computer1.useCom(sunwukong, 10000)
        }
        const wjtAddTime = ()=>{
            computer1.addTime(10000,'王惊涛')
        }
        const aheadClose = ()=>{
            computer1.close('王惊涛')
        }
        
    </script>
</body>

</html>
相关推荐
非ban必选9 分钟前
netty-scoket.io路径配置
java·服务器·前端
努力也学不会java42 分钟前
【设计模式】 外观模式
设计模式·外观模式
じòぴé南冸じょうげん43 分钟前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
会豪1 小时前
Electron主进程渲染进程如何优雅的进行通信
前端
jianghaha20111 小时前
前端 Word 模板参入特定数据 并且下载
前端·word
跟橙姐学代码1 小时前
轻松搞定 Python 模块与包导入:新手也能秒懂的入门指南
前端·python·ipython
aiwery1 小时前
大模型场景下的推送技术选型:轮询 vs WebSocket vs SSE
前端·agent
会豪1 小时前
前端插件-不固定高度的DIV如何增加transition
前端
却尘1 小时前
Server Actions 深度剖析(2):缓存管理与重新验证,如何用一行代码干掉整个客户端状态层
前端·客户端·next.js
小菜全1 小时前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js