1uokun · April 21, 2019 06:56
diff --git a/State.html b/State.html
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
 </head>
 <body>
 <div style="border:1px #000000 solid;padding:10px">
    <p>一个台灯只有开和关</p>
    <h1 id="text">关</h1>
    <button onclick="toggle()">开关</button>
 </div>
 <script>
    var state = 'close';
    function toggle(){
        if(state==='close') {
            state = 'open';
            text.innerText = '开'
        }else {
            state = 'close';
            text.innerText = '关'
        }
    }
 </script>
 <div style="border:1px #000000 solid;padding:10px">
    <p>现在这个台灯多了一个开关叫<mark>护眼模式</mark></p>
    <p>是在<mark>开</mark>动作之后的动作，即 <mark>关 -> 开 -> 护眼模式 -> 开 -> 关</mark></p>
    <h1 id="text2">关</h1>
    <button onclick="toggle2()">开关</button>
    <button onclick="toggle3()" id="eye" style="display: none">护眼模式</button>
 </div>
 <script>
    var state = 'close';
    function toggle2(){
        if(state==='close'||state==='护眼模式') {
            state = 'open';
            text2.innerText = '开';
            eye.style.display='block'
        }else {
            state = 'close';
            text2.innerText = '关';
            eye.style.display='none'
        }
    }

    function toggle3(){
        state = '护眼模式';
        text2.innerText = '护眼模式';
        eye.style.display='none'
    }
 </script>
 <div style="border:1px #000000 solid;padding:10px">
    <p>现在用<mark>状态模式</mark>先实现简单的开与关</p>
    <h1 id="text3">关</h1>
    <button id="button">开关</button>
    <button id="eye2">护眼模式</button>
 </div>
 <script>
    var delegate = function(client, delegation){
        return {
            buttonWasPressed: function(){   // 将客户的操作委托给delegation对象
                return delegation.buttonWasPressed.apply(client, delegation)
            }
        }
    };

    /**
     *     on的状态下 可以打开护眼模式，也可以关闭台灯
     *     off的状态下 只能打开台灯
     *     eye的状态下，只能打开台灯
     */
    var FSM = {
        off:{
            buttonWasPressed: function(){
                text3.innerText = '开';

                button.innerText = '下一次按我是关灯';
                eye2.innerText = '下一次按我是护眼模式';
                button.style.display = 'block';
                eye2.style.display = 'block';

                this.currState = this.onState;
            }
        },
        on:{
            off:{
                buttonWasPressed: function(){
                    text3.innerText = '关';

                    button.innerText = '下一次按我是开灯';
                    eye2.style.display = 'none';

                    this.currState = this.offState;
                }
            },
            eye:{
                buttonWasPressed: function(){
                    text3.innerText = '护眼模式';

                    eye2.innerText = '下一次按我是开灯';
                    button.style.display = 'none';

                    this.currState = this.eyeState;
                }
            }
        },
        eye:{
            buttonWasPressed: function(){
                text3.innerText = '开';

                button.innerText = '下一次按我是关灯1';
                eye2.innerText = '下一次按我是护眼模式1';
                button.style.display = 'block';
                eye2.style.display = 'block';


                this.currState = this.onState;
            }
        }
    };
    var Light = function(){
        this.offState = delegate( this, FSM.off );
        this.onState = delegate( this, FSM.on.off );
        this.eyeState = delegate( this, FSM.eye );
        this.currState = this.offState; // 设置初始状态为关闭状态
    };
    Light.prototype.init = function() {
        var self = this;
        text3.innerText = '关';
        button.onclick = function () {
            self.currState.buttonWasPressed();
        }
    };

    var light = new Light();
    light.init();


    var Light2 = function(){
        this.offState = delegate( this, FSM.off );
        this.onState = delegate( this, FSM.on.eye );
        this.eyeState = delegate( this, FSM.eye );
        this.currState = this.onState; // 设置初始状态为关闭状态
    };
    Light2.prototype.init = function() {
        var self = this;
        eye2.style.display = 'none';
        eye2.onclick = function () {
            self.currState.buttonWasPressed();
        }
    };

    var light2 = new Light2();
    light2.init();

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<div style="border:1px #000000 solid;padding:10px">
	<p>一个台灯只有开和关</p>
	<h1 id="text">关</h1>
	<button onclick="toggle()">开关</button>
	</div>
	<script>
	var state = 'close';
	function toggle(){
	if(state==='close') {
	state = 'open';
	text.innerText = '开'
	}else {
	state = 'close';
	text.innerText = '关'
	}
	}
	</script>
	<div style="border:1px #000000 solid;padding:10px">
	<p>现在这个台灯多了一个开关叫<mark>护眼模式</mark></p>
	<p>是在<mark>开</mark>动作之后的动作，即 <mark>关 -> 开 -> 护眼模式 -> 开 -> 关</mark></p>
	<h1 id="text2">关</h1>
	<button onclick="toggle2()">开关</button>
	<button onclick="toggle3()" id="eye" style="display: none">护眼模式</button>
	</div>
	<script>
	var state = 'close';
	function toggle2(){
	if(state==='close'\|\|state==='护眼模式') {
	state = 'open';
	text2.innerText = '开';
	eye.style.display='block'
	}else {
	state = 'close';
	text2.innerText = '关';
	eye.style.display='none'
	}
	}

	function toggle3(){
	state = '护眼模式';
	text2.innerText = '护眼模式';
	eye.style.display='none'
	}
	</script>
	<div style="border:1px #000000 solid;padding:10px">
	<p>现在用<mark>状态模式</mark>先实现简单的开与关</p>
	<h1 id="text3">关</h1>
	<button id="button">开关</button>
	<button id="eye2">护眼模式</button>
	</div>
	<script>
	var delegate = function(client, delegation){
	return {
	buttonWasPressed: function(){ // 将客户的操作委托给delegation对象
	return delegation.buttonWasPressed.apply(client, delegation)
	}
	}
	};

	/**
	* on的状态下可以打开护眼模式，也可以关闭台灯
	* off的状态下只能打开台灯
	* eye的状态下，只能打开台灯
	*/
	var FSM = {
	off:{
	buttonWasPressed: function(){
	text3.innerText = '开';

	button.innerText = '下一次按我是关灯';
	eye2.innerText = '下一次按我是护眼模式';
	button.style.display = 'block';
	eye2.style.display = 'block';

	this.currState = this.onState;
	}
	},
	on:{
	off:{
	buttonWasPressed: function(){
	text3.innerText = '关';

	button.innerText = '下一次按我是开灯';
	eye2.style.display = 'none';

	this.currState = this.offState;
	}
	},
	eye:{
	buttonWasPressed: function(){
	text3.innerText = '护眼模式';

	eye2.innerText = '下一次按我是开灯';
	button.style.display = 'none';

	this.currState = this.eyeState;
	}
	}
	},
	eye:{
	buttonWasPressed: function(){
	text3.innerText = '开';

	button.innerText = '下一次按我是关灯1';
	eye2.innerText = '下一次按我是护眼模式1';
	button.style.display = 'block';
	eye2.style.display = 'block';


	this.currState = this.onState;
	}
	}
	};
	var Light = function(){
	this.offState = delegate( this, FSM.off );
	this.onState = delegate( this, FSM.on.off );
	this.eyeState = delegate( this, FSM.eye );
	this.currState = this.offState; // 设置初始状态为关闭状态
	};
	Light.prototype.init = function() {
	var self = this;
	text3.innerText = '关';
	button.onclick = function () {
	self.currState.buttonWasPressed();
	}
	};

	var light = new Light();
	light.init();


	var Light2 = function(){
	this.offState = delegate( this, FSM.off );
	this.onState = delegate( this, FSM.on.eye );
	this.eyeState = delegate( this, FSM.eye );
	this.currState = this.onState; // 设置初始状态为关闭状态
	};
	Light2.prototype.init = function() {
	var self = this;
	eye2.style.display = 'none';
	eye2.onclick = function () {
	self.currState.buttonWasPressed();
	}
	};

	var light2 = new Light2();
	light2.init();

	</script>
	</body>
	</html>