前几篇都没有优化, 直接从head first 设计模式里翻译过来的.
这一篇稍微优化, 和 js 中的策略模式一切工作. 兄弟同心, 其力断金. 再次感谢 js 的函数是第一类对象.
html 代码
- <meta charset="utf-8">
- <style>
- [type=button] {
- width:120px;
- height:30px;
- background:#FF6100;
- color:white;
- margin:15px;
- border: 1px solid #999999;
- }
- [type=button]:hover{
- cursor: pointer;
- background: #FF863E;
- }
- </style>
- <section>
- <input type="button" id="insertQuarter" value="投币"/>
- <input type="button" id="ejectQuarter" value="退钱"/>
- <input type="button" id="turnCrank" value="转动曲柄"/>
- <p></p>
- </section>
- <script>
- // 状态对象
- var stateStrategy = {
- noQuarterState: {
- insertQuarter: function() {
- print("塞进去了一个硬币");
- this.setState('hasQuarterState');
- },
- ejectQuarter: function() {
- print("还没有塞进硬币");
- },
- turnCrank: function() {
- print("别转了你还没赛钱呢");
- },
- dispense: function() {
- print("钱呢?");
- }
- },
- hasQuarterState: {
- insertQuarter: function() {
- print("不能再塞进另一个硬币");
- },
- ejectQuarter: function() {
- print('钱返回给你了');
- this.setState('noQuarterState');
- },
- turnCrank: function() {
- print("你转过了");
- this.setState('soldState');
- },
- dispense: function() {
- print("你白赛钱了");
- }
- },
- soldState: {
- insertQuarter: function() {
- print("请等待, 正在售出中");
- },
- ejectQuarter: function() {
- print("你已经转动曲柄了");
- },
- turnCrank: function() {
- print("转动两次也不会给你两个糖果的");
- },
- dispense: function() {
- this.releaseBall();
- if (this.getCount()> 0) {
- this.setState('noQuarterState');
- } else {
- print("正好卖完...");
- this.setState('soldOutState');
- }
- }
- },
- soldOutState: {
- insertQuarter: function() {
- print("已经卖完, 不能塞进硬币");
- },
- ejectQuarter: function() {
- print("你还没塞进硬币呢, 怎么还你?");
- },
- turnCrank: function() {
- print("没货了, 转也是白转");
- },
- dispense: function() {
- print("没货!");
- }
- }
- };
- var GumballMachine = {
- init: function(numberGumballs) {
- this.count = numberGumballs;
- if (numberGumballs> 0) {
- this.state = 'noQuarterState';
- }
- },
- insertQuarter: function() {
- stateStrategy[this.state].insertQuarter.call(this);
- },
- ejectQuarter: function() {
- stateStrategy[this.state].ejectQuarter.call(this);
- },
- turnCrank: function() {
- stateStrategy[this.state].turnCrank.call(this);
- stateStrategy[this.state].dispense.call(this);
- },
- setState: function(state) {
- this.state = state;
- },
- releaseBall: function() {
- if (this.count != 0) {
- this.count = this.count -1;
- }
- setTimeout(function() {
- print("卡槽中已经有糖果了");
- }, 2000);
- },
- getCount: function() {
- return this.count;
- }
- };
- var machine = Object.create(GumballMachine);
- // 只有三个糖果..
- machine.init(3);
- var print = function(msg) {
- document.querySelector('p').innerHTML = msg;
- }
- document.querySelector('#insertQuarter').onclick = function () { machine.insertQuarter() }
- document.querySelector('#ejectQuarter').onclick = function () { machine.ejectQuarter() }
- document.querySelector('#turnCrank').onclick = function () { machine.turnCrank() }
- </script>
来源: http://www.qdfuns.com/article/17398/1a6c21945f743f2a9064409cc36bfd9c.html