[状态模式]实现stopwatch

1.模拟传统面向对象语言的状态模式实现

// Stopwatch类 状态机
class Stopwatch {
    constructor() {
        this.button1 = null;
        this.button2 = null;
        this.resetState = new ResetState(this); // 设置初始状态为 reset 重置
        this.startState = new StartState(this);
        this.pauseState = new PauseState(this);
        this.currState = this.resetState; // 设置当前状态
    }
    /****** 创建DOM节点, 绑定事件 ******/
    init() {
        this.dom = document.createElement('div');
        this.dom.setAttribute('id', 'stopwatch');
        this.dom.innerHTML = `
            <div class="header">stopwatch</div>
            <div class="main">
                <!-- 时间显示部分 -->
                <div class="display" >00:00.00</div> 
                <!-- 控制部分 -->
                <div class="ctrl">
                    <button type="button" id='btnOne' disabled='disabled'>计次</button> <!--class="active"-->
                    <button type="button" id='btnTwo'>启动</button>  <!--class="stop"-->
                </div>
                <!-- 显示计次(时间间隔) -->
                <ol class="lap">
                </ol>
            </div>`;
        document.body.appendChild(this.dom);
        this.button1 = this.dom.querySelector('#btnOne');
        this.button2 = this.dom.querySelector('#btnTwo');
        this.display = this.dom.querySelector('.display'); // 总时间显示
        this.lap     = this.dom.querySelector('.lap');     // 计次显示
        this.bindEvent();
        Stopwatch.addStopwatchListener(t => {
            this.displayTotalTime(t);
        });
        Stopwatch.addStopwatchListener(t => {
            this.displayLapTime(t);
        })
    }
    // 将请求委托给当前状态类来执行
    bindEvent() {
        this.button1.addEventListener('click', () => {
            this.currState.clickHandler1();
        }, false);
        this.button2.addEventListener('click', () => {
            this.currState.clickHandler2();
        }, false);
    }
    /****** 状态对应的逻辑行为 ******/
    // 开始
    start() {
        if(timer.count === 0) {
            timer.count = 1;
            this.insertLap();
        }
        // 行为
        timer.startTimer();
        // 状态
        this.setState(this.startState);
        // 样式
        this.setStyle();
    }
    // 暂停
    pause() {
        // 行为
        timer.stopTimer();
        // 状态
        this.setState(this.pauseState);
        // 样式
        this.setStyle();
    }
    // 计次
    lapf() {
        // 行为
        this.insertLap();
        timer.timeAccumulationContainer.push(timer.timeAccumulation);
        timer.s += timer.timeAccumulationContainer[timer.count - 1];
        timer.timeAccumulation = 0;
        timer.count++;
    }
    // 重置
    reset() {
        // 行为
        timer.reset();
        // 状态
        this.setState(this.resetState);
        // 样式
        this.setStyle();
    }
    /****** 辅助方法 ******/
    // 总时间显示(从启动到当前时刻的累积时间)
    displayTotalTime() {
        let totaltimeAccumulation = timer.timeAccumulation * 10  + timer.s * 10;
        this.display.innerHTML = `${Timer.milSecond_to_time(totaltimeAccumulation)}`;
    }
    // 计次条目显示
    displayLapTime() {
        let li = this.lap.querySelector('li'),
            spans = li.querySelectorAll('span'),
            task = spans[0], time = spans[1];
        task.innerHTML = `计次${timer.count}`;
        time.innerHTML = `${Timer.milSecond_to_time(timer.timeAccumulation * 10)}`;
    }
    // 设置状态
    setState(newState) {
        this.currState = newState;
    }
    // 设置样式
    setStyle() {
        if(this.currState instanceof StartState) {
            let button1 = this.button1;
            button1.disabled = '';
            button1.innerHTML = '计次';
            button1.className = 'active';
            let button2 = this.button2;
            button2.innerHTML = '停止';
            button2.className = 'stop';
        } else if (this.currState instanceof PauseState) {
            this.button1.innerHTML = '复位';
            let button2 = this.button2;
            button2.innerHTML = '启动';
            button2.className = 'start';
        } else if (this.currState instanceof ResetState) {
            let button1 = this.button1;
            button1.disabled = 'disabled';
            button1.innerHTML = '计次';
            button1.className = '';
            this.display.innerHTML = '00:00.00';
            this.lap.innerHTML = '';
        }
    }
    // 插入一个计次
    insertLap() {
        let t = Stopwatch.templateLap();
        this.lap.insertAdjacentHTML('afterbegin', t);
    }
    static templateLap() {
        return  `
        <li><span></span><span></span></li>
        `;
    }
    // 将函数推入回调队列
    static addStopwatchListener(handler) {
        timer.stopwatchHandlers.push(handler);
    }
}
// 编写各个状态类的实现
// 模拟State抽象类; 在Java中，所有的状态类必须继承自一个State抽象父类
class State{
    constructor() {}
    static clickHandler1() {
        throw new Error('父类的clickHandler1方法必须被重写');
    }
    static clickHandler2() {
        throw new Error('父类的clickHandler2方法必须被重写');
    }
}
// 状态类
class ResetState {
    constructor(stopwatchObj) {
        this.stopwatchObj = stopwatchObj;
    }
    static clickHandler1() {
        console.log('初始状态下点击计次无效');
    }
    clickHandler2() {
        console.log('初始状态下点击启动, 切换为启动状态');
        //
        this.stopwatchObj.start();
    }
}
ResetState.prototype = new State(); // 继承抽象父类, 用于检测
class StartState {
    constructor(stopwatchObj) {
        this.stopwatchObj = stopwatchObj;
    }
    clickHandler1() {
        console.log('启动状态下点击计次');
        //
        this.stopwatchObj.lapf();
    }
    clickHandler2() {
        console.log('启动状态下点击暂停, 切换为暂停状态');
        //
        this.stopwatchObj.pause();
    }
}
StartState.prototype = new State();  // 继承抽象父类, 用于检测
class PauseState {
    constructor(stopwatchObj) {
        this.stopwatchObj = stopwatchObj;
    }
    clickHandler1() {
        console.log('暂停状态下点击复位, 切换为初始状态');
        //
        this.stopwatchObj.reset();
    }
    clickHandler2() {
        console.log('暂停状态下点击启动, 切换为启动状态');
        //
        this.stopwatchObj.start();
    }
}
PauseState.prototype = new State();  // 继承抽象父类, 用于检测
// 时间机器(时间插件)
class Timer {
    constructor() {
        // 计时器
        this.stopwathchTimer = null;
        this.count = 0; // 计次的次数
        this.timeAccumulation = 0; // 累积时长
        this.timeAccumulationContainer = []; // 存放已经结束的计次的容器
        this.s = 0; // 已经结束的所有计次累积时间
        this.stopwatchHandlers = []; // 用于startTimer里回调队列
    }
    reset() {
        // 重置
        this.stopwathchTimer = null;
        this.count = 0;
        this.timeAccumulation = 0;
        this.timeAccumulationContainer = [];
        this.s = 0;
    }
    startTimer() {
        this.stopTimer();
        this.stopwathchTimer = setInterval(() => {
            this.timeAccumulation++; // 注意时间累积量 _timeAccumulation 是厘秒级别的(由于显示的是两位)
            this.stopwatchHandlers.forEach(handler => {
                handler(this.timeAccumulation);
            })
        }, 1000 / 100)
    }
    stopTimer() {
        clearInterval(this.stopwathchTimer );
    }
    // 将时间累积量转化成时间
    static milSecond_to_time(t) {
        let time,
            minute = Timer.addZero(Math.floor(t / 60000) % 60),     // 分
            second = Timer.addZero(Math.floor(t / 1000) % 60),      // 秒
            centisecond = Timer.addZero(Math.floor(t / 10) % 100) ; // 厘秒(百分之一秒)
        time = `${minute}:${second}.${centisecond}`;
        return time;
    }
    // 修饰器；加零
    static addZero(t) {
        t = t < 10 ? '0' + t : t;
        return t;
    }
}
const timer = new Timer();
// 测试
const stopwatchObj = new Stopwatch();
stopwatchObj.init();

2.JavaScript 版本的状态机

// Stopwatch类 状态机
class Stopwatch {
    constructor() {
        this.button1 = null;
        this.button2 = null;
        // JavaScript 版本的状态机
        this.FSM = {
            /****** 状态对应的逻辑行为 ******/
            // btn1无效 / btn2复位 >> 开始
            reset: {
                clickHandler1() {
                    // 复位状态下计次按钮无效
                },
                clickHandler2() {
                    console.log('初始状态下点击启动, 切换为启动状态');
                    if(timer.count === 0) {
                        timer.count = 1;
                        this.insertLap();
                    }
                    // 行为
                    timer.startTimer();
                    // 切换状态
                    this.currState = this.FSM.start;
                    // 样式
                    this.setStyle('startState');
                }
            },
            // bnt1计次 / btn2开始 >> 暂停
            start: {
                clickHandler1() {
                    console.log('启动状态下点击计次, 不切换状态');
                    // 行为
                    this.insertLap();
                    timer.timeAccumulationContainer.push(timer.timeAccumulation);
                    timer.s += timer.timeAccumulationContainer[timer.count - 1];
                    timer.timeAccumulation = 0;
                    timer.count++;
                    // 状态不改变
                    // 样式不改变
                },
                clickHandler2() {
                    console.log('启动状态下点击暂停, 切换为暂停状态');
                    // 行为
                    timer.stopTimer();
                    // 切换状态
                    this.currState = this.FSM.pause;
                    // 样式
                    this.setStyle('pauseState');
                }
            },
            // btn1暂停 >> 重置 / btn2暂停 >> 开始
            pause: {
                clickHandler1() {
                    console.log('暂停状态下点击复位, 切换为初始状态');
                    // 行为
                    timer.reset();
                    // 切换状态
                    this.currState = this.FSM.reset;
                    // 样式
                    this.setStyle('resetState');
                },
                clickHandler2() {
                    console.log('暂停状态下点击启动, 切换为启动状态');
                    // 行为
                    timer.startTimer();
                    // 状态
                    this.currState = this.FSM.start;
                    // 样式
                    this.setStyle('startState');
                }
            }
        };
        this.currState = this.FSM.reset; // 设置当前状态
    }
    /****** 创建DOM节点, 绑定事件 ******/
    init() {
        this.dom = document.createElement('div');
        this.dom.setAttribute('id', 'stopwatch');
        this.dom.innerHTML = `
            <div class="header">stopwatch</div>
            <div class="main">
                <!-- 时间显示部分 -->
                <div class="display" >00:00.00</div> 
                <!-- 控制部分 -->
                <div class="ctrl">
                    <button type="button" id='btnOne' disabled='disabled'>计次</button> <!--class="active"-->
                    <button type="button" id='btnTwo'>启动</button>  <!--class="stop"-->
                </div>
                <!-- 显示计次(时间间隔) -->
                <ol class="lap">
                </ol>
            </div>`;
        document.body.appendChild(this.dom);
        this.button1 = this.dom.querySelector('#btnOne');
        this.button2 = this.dom.querySelector('#btnTwo');
        this.display = this.dom.querySelector('.display'); // 总时间显示
        this.lap     = this.dom.querySelector('.lap');     // 计次显示
        this.bindEvent();
        Stopwatch.addStopwatchListener(t => {
            this.displayTotalTime(t);
        });
        Stopwatch.addStopwatchListener(t => {
            this.displayLapTime(t);
        })
    }
    // 通过 call 方法直接把请求委托给某个字面量对象(FSM)来执行
    bindEvent() {
        this.button1.addEventListener('click', () => {
            this.currState.clickHandler1.call(this); // 把请求委托给FSM 状态机
        }, false);
        this.button2.addEventListener('click', () => {
            this.currState.clickHandler2.call(this);
        }, false);
    }
    /****** 辅助方法 ******/
    // 总时间显示(从启动到当前时刻的累积时间)
    displayTotalTime() {
        let totaltimeAccumulation = timer.timeAccumulation * 10  + timer.s * 10;
        this.display.innerHTML = `${Timer.milSecond_to_time(totaltimeAccumulation)}`;
    }
    // 计次条目显示
    displayLapTime() {
        let li = this.lap.querySelector('li'),
            spans = li.querySelectorAll('span'),
            task = spans[0], time = spans[1];
        task.innerHTML = `计次${timer.count}`;
        time.innerHTML = `${Timer.milSecond_to_time(timer.timeAccumulation * 10)}`;
    }
    // 设置样式
    setStyle(newState) {
        if(newState === 'startState') {
            let button1 = this.button1;
            button1.disabled = '';
            button1.innerHTML = '计次';
            button1.className = 'active';
            let button2 = this.button2;
            button2.innerHTML = '停止';
            button2.className = 'stop';
        } else if (newState === 'pauseState') {
            this.button1.innerHTML = '复位';
            let button2 = this.button2;
            button2.innerHTML = '启动';
            button2.className = 'start';
        } else if (newState === 'resetState') {
            let button1 = this.button1;
            button1.disabled = 'disabled';
            button1.innerHTML = '计次';
            button1.className = '';
            this.display.innerHTML = '00:00.00';
            this.lap.innerHTML = '';
        }
    }
    // 插入一个计次
    insertLap() {
        let t = Stopwatch.templateLap();
        this.lap.insertAdjacentHTML('afterbegin', t);
    }
    static templateLap() {
        return  `
        <li><span></span><span></span></li>
        `;
    }
    // 将函数推入回调队列
    static addStopwatchListener(handler) {
        timer.stopwatchHandlers.push(handler);
    }
}
// 时间机器(时间插件)
class Timer {
    constructor() {
        // 计时器
        this.stopwathchTimer = null;
        this.count = 0; // 计次的次数
        this.timeAccumulation = 0; // 累积时长
        this.timeAccumulationContainer = []; // 存放已经结束的计次的容器
        this.s = 0; // 已经结束的所有计次累积时间
        this.stopwatchHandlers = []; // 用于startTimer里回调队列
    }
    reset() {
        // 重置
        this.stopwathchTimer = null;
        this.count = 0;
        this.timeAccumulation = 0;
        this.timeAccumulationContainer = [];
        this.s = 0;
    }
    startTimer() {
        this.stopTimer();
        this.stopwathchTimer = setInterval(() => {
            this.timeAccumulation++; // 注意时间累积量 _timeAccumulation 是厘秒级别的(由于显示的是两位)
            this.stopwatchHandlers.forEach(handler => {
                handler(this.timeAccumulation);
            })
        }, 1000 / 100)
    }
    stopTimer() {
        clearInterval(this.stopwathchTimer );
    }
    // 将时间累积量转化成时间
    static milSecond_to_time(t) {
        let time,
            minute = Timer.addZero(Math.floor(t / 60000) % 60),     // 分
            second = Timer.addZero(Math.floor(t / 1000) % 60),      // 秒
            centisecond = Timer.addZero(Math.floor(t / 10) % 100) ; // 厘秒(百分之一秒)
        time = `${minute}:${second}.${centisecond}`;
        return time;
    }
    // 修饰器；加零
    static addZero(t) {
        t = t < 10 ? '0' + t : t;
        return t;
    }
}
const timer = new Timer();
// 测试
const stopwatchObj = new Stopwatch();
stopwatchObj.init();

[状态模式]实现stopwatch的更多相关文章

StatePattern(状态模式)
/** * 状态模式 * @author TMAC-J * 状态模式和策略模式很像,其实仔细研究发现完全不一样 * 策略模式各策略之间没有任何关系,独立的 * 状态模式各状态之间接口方法都是一样的 * ...
设计模式(十二)：通过ATM取款机来认识“状态模式”(State Pattern)
说到状态模式,如果你看过之前发布的重构系列的文章中的<代码重构(六):代码重构完整案例>这篇博客的话,那么你应该对“状态模式”并不陌生,因为我们之前使用到了状态模式进行重构.上一篇博客我们 ...
php实现设计模式之状态模式
<?php /*状态模式:允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类.(行为模式) * * 在很多情况下,一个对象的行为取决于一个或多个动态变化的属性,这样的属性叫做 ...
Java 策略模式和状态模式
本文是转载的,转载地址:大白话解释Strategy模式和State模式的区别先上图: 本质上讲,策略模式和状态模式做得是同一件事:去耦合.怎么去耦合?就是把干什么(语境类)和怎么干(策略接口)分开, ...
javascript - 状态模式 - 简化分支判断流程
状态模式笔记当一个对象的内部状态发生改变时,会导致行为的改变,这像是改变了对象状态模式既是解决程序中臃肿的分支判断语句问题,将每个分支转化为一种状态独立出来,方便每种状态的管理又不至于每次 ...
C#设计模式系列：状态模式（State）
1.状态模式简介 1.1>.定义状态模式的核心思想是允许一个对象在它的内部状态改变时改变它的行为,即不同的状态对应不同的行为. 状态模式的针对性很强,当有状态变化的时候可以选择状态模式. 1. ...
十一个行为模式之状态模式(State Pattern)
定义: 当一个对象有多个状态,并且在每个状态下有不同的行为,可以使用状态模式来在其内部改变状态时改变其行为,而客户端不会察觉状态的改变,仍使用同样的方法或接口与对象进行交互. 结构图: Context ...
java设计模式之状态模式
状态模式允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 状态模式UML图上下文环境(Context):它定义了客户程序需要的接口并维护一个具体状态角色的实例,将与状态相关 ...
iOS - 在工程中试玩状态模式
做了一个项目,项目中一个藏品详情界面针对不同用户,和用户所处于的状态的不同,展示的效果和操作的权限都会不同.想到了状态模式,从来没有用过,赶紧学一下然后用一用.期待兴奋看了这么多的博客,终于找到一个 ...

随机推荐

Java多态——代码示例
刚开始看多态的文字定义时,总是不明白说的啥意思,看了一些示例代码后,总算知道了,其实也就是“多态”的字面意思. 如下: class A{ public void Out() { System.out. ...
SpringBoot 源码解析（五）----- Spring Boot的核心能力 - 自动配置源码解析
在上一篇博客中分析了springBoot启动流程,大体的轮廓只是冰山一角.今天就来看一下springBoot的亮点功能:自动化装配功能. 先从@SpringBootApplication开始.在启动流 ...
shell脚本2——控制语句
1.顺序结构体命令从上往下顺序执行 2.分支结构体 1)判断真假 test 表达式或者 [ 表达式 ](必须有空格) 真返回0,假返回1 test的别名是[, 参数是] 判断表达式记忆解释 ! ...
从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发的项目
项目简介:该项目是基于日常计算宿舍水电煤气费的需求写的,旨在从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发,使用webpack进行代码的编译.压缩和打包,并疏通 ...
Vue 幸运大转盘
转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不 ...
web前端之css基础
CSS选择器元素选择器 p{color:red;} ID选择器 #li{ background-color:red; } 类选择器 .c1{ font-size:15px; } 注意: 样式类名不要 ...
【论文阅读】The Contextual Loss for Image Transformationwith Non-Aligned Data（ECCV2018 oral）
目录: 相关链接方法亮点相关工作方法细节实验结果总结与收获相关链接论文:https://arxiv.org/abs/1803.02077 代码:https://github.com/ro ...
【Luogu P1981】表达式求值
点我进入原题Luogu P1981 [解题思路] 仔细分析题目,这就是一道模拟题…… 直接按照符号读入全部的数字,先算乘法,最后把全部数加起来就是结果了记得要%10000取最后四位 [参考程序] # ...
matlab-汉字unicode编码转换
str='黑大哥'bianma=unicode2native(str); disp(bianma); pp=native2unicode(bianma);disp(pp)
一图读懂Spring Core,Spring MVC, Spring Boot,Spring Cloud 的关系与区别
Spring框架自诞生到现在,历经多次革新,形成了多种不同的产品,分别应用于不同的项目中,为了帮助自己理解这些产品之间的关系,特此整理此图,以便自己记忆和复习.

[状态模式]实现stopwatch

1.模拟传统面向对象语言的状态模式实现

2.JavaScript 版本的状态机

[状态模式]实现stopwatch的更多相关文章

随机推荐

热门专题