码迷,mamicode.com
首页 > Web开发 > 详细

编写计算器程序学习JS责任链模式

时间:2018-11-15 20:17:38      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:tco   ace   scom   小数点   round   container   boot   data   程序学习   

设计模式中的责任链模式能够很好的处理程序过程的逻辑判断,提高程序可读性。
责任链模式的核心在于责任链上的元素判断能够处理该数据,不能处理的话直接交给它的后继者。
计算器的基本样式:
技术分享图片

通过div+css定义计算器的样式,并在每个按钮上绑定事件响应按钮输入。

  • 输入的元素为数字、小数点、加减乘除运算符时,都是直接显示。
  • 输入为清除所有、清除上一次时直接清除。
  • 输入为等号、百分比、开根号、乘方、分之一时,开始计算。
    同时在输入框下面显示上次运算的公式。

    1.定义责任元素的基类

    包括变量next指向他的后继者,方法setNext设置它的后继者,方法handleRequest处理请求。
InputHandler = function () {
    this.next = null;
    this.setNext = function(handler) {
        this.next = handler;
    };

    this.handleRequest = function(currentInput,allInput) {

    }
}

2.定义责任元素

定义每个责任链元素应该处理的范围

<!-- 处理数字键 -->
NumberHandler = function (){this.NumberKeyArray = ["0","1","2","3","4","5","6","7","8","9"];}
NumberHandler.prototype = new InputHandler();
NumberHandler.prototype.handleRequest = function(currentInput,allInput) {
    var isNumber = $.inArray(currentInput,this.NumberKeyArray);
    if(isNumber!=-1){
        var temp = allInput+currentInput;
        return temp;
    }else{
        if(this.next){
            return this.next.handleRequest(currentInput,allInput);
        }
    }
}
<!-- 定义以下责任元素分别用来处理不同的输入键 -->
<!-- 处理操作符 -->
OperatorHandler = function () {this.OperatorArray=["+","-","/","*"];}
<!-- 清空所有 -->
ClearAllHandler = function (){}
<!-- 清除最后一次输入 -->
ClearLatestKeyHandler = function (){}
<!-- 直接计算 -->
ImmediateComputeHandler = function () {this.ImmediateComputeKeyArray=["x2","?","%","√","="];}
<!-- 小数点 -->
PointHandler = function () {}

3.组成责任链

var numberHandler = new NumberHandler();
var operatorHandler = new OperatorHandler();
var clearAllHandler = new ClearAllHandler();
var clearLatestKeyHandler = new ClearLatestKeyHandler();
var immediateComputeHandler = new ImmediateComputeHandler();
var pointHandler = new PointHandler();

numberHandler.setNext(operatorHandler);
operatorHandler.setNext(clearAllHandler);
clearAllHandler.setNext(clearLatestKeyHandler);
clearLatestKeyHandler.setNext(immediateComputeHandler);
immediateComputeHandler.setNext(pointHandler);

4. 责任链调用处理

var currentInput = this.title;
var allInput=$("#result").val();

var temp=numberHandler.handleRequest(currentInput,allInput);
$("#result").val(temp);

5.完整代码

<html>
<head>
    <title>Web版本计算器</title>
    <link rel="stylesheet" href="./css/bootstrap.css"/>
    <script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
    <style type="text/css">
        body {
            background-color:LightGrey;
            Color:black;
        }
        .display-border {
            border-style:solid;
            border-width:1px;
            border-color:Orange
        }
        
        .calculator-row {
            margin-top:5px;
        }
        
        .calculator-btn {
            width:100%;
        }
        
    </style>
    <script type="text/javascript">
        $(function(){
            var numberHandler = new NumberHandler();
            var operatorHandler = new OperatorHandler();
            var clearAllHandler = new ClearAllHandler();
            var clearLatestKeyHandler = new ClearLatestKeyHandler();
            var immediateComputeHandler = new ImmediateComputeHandler();
            var pointHandler = new PointHandler();
            
            numberHandler.setNext(operatorHandler);
            operatorHandler.setNext(clearAllHandler);
            clearAllHandler.setNext(clearLatestKeyHandler);
            clearLatestKeyHandler.setNext(immediateComputeHandler);
            immediateComputeHandler.setNext(pointHandler);
        
            $(".calculator-btn").click(function(){
                var currentInput = this.title;
                var allInput=$("#result").val();
                
                var temp=numberHandler.handleRequest(currentInput,allInput);
                $("#result").val(temp);
                var index1=temp.indexOf("+");
                var index2=temp.indexOf("-");
                var index3=temp.indexOf("*");
                var index4=temp.indexOf("/");
                if(index1==-1&index2==-1&index3==-1&index4==-1){
                    $("#computeItem").val(allInput);
                }
                
            });
        });
        
        InputHandler = function () {
            this.next = null;
            this.setNext = function(handler) {
                this.next = handler;
            };

            this.handleRequest = function(currentInput,allInput) {

            }
        }
        
        <!-- 处理数字键 -->
        NumberHandler = function (){this.NumberKeyArray = ["0","1","2","3","4","5","6","7","8","9"];}
        NumberHandler.prototype = new InputHandler();
        NumberHandler.prototype.handleRequest = function(currentInput,allInput) {
            var isNumber = $.inArray(currentInput,this.NumberKeyArray);
            if(isNumber!=-1){
                var temp = allInput+currentInput;
                return temp;
            }else{
                if(this.next){
                    return this.next.handleRequest(currentInput,allInput);
                }
            }
        }
        
        <!-- 处理操作符 -->
        OperatorHandler = function () {this.OperatorArray=["+","-","/","*"];}
        OperatorHandler.prototype = new InputHandler();
        OperatorHandler.prototype.handleRequest = function(currentInput,allInput) {
            var isOperator=$.inArray(currentInput,this.OperatorArray);
            if(isOperator!=-1){
                var temp="";
                if(allInput.length!=0){
                    var lastChar = allInput.substr(allInput.length-1,1);
                    var tempIsOperator = $.inArray(lastChar,this.OperatorArray);
                    if(tempIsOperator==-1){
                        temp=allInput+currentInput;
                    }else{
                        temp=allInput;
                    }
                }
                return temp;
            }else{
                if(this.next){
                    return this.next.handleRequest(currentInput,allInput);
                }
            }
        }
        
        <!-- 清空所有 -->
        ClearAllHandler = function (){}
        ClearAllHandler.prototype = new InputHandler();
        ClearAllHandler.prototype.handleRequest = function(currentInput,allInput) {
            if(currentInput=="C"){
                var temp = "";
                return temp;
            }else{
                if(this.next){
                    return this.next.handleRequest(currentInput,allInput);
                }
            }
        }
        
        <!-- 清除最后一次输入 -->
        ClearLatestKeyHandler = function (){}
        ClearLatestKeyHandler.prototype = new InputHandler();
        ClearLatestKeyHandler.prototype.handleRequest = function(currentInput,allInput) {
            if(currentInput=="<-"){
                var temp="";
                if(allInput.length > 0){
                    temp=allInput.substr(0,allInput.length-1);
                }
                return temp;
            }else{
                if(this.next){
                    return this.next.handleRequest(currentInput,allInput);
                }
            }
        }
        
        <!-- 直接计算 -->
        ImmediateComputeHandler = function () {this.ImmediateComputeKeyArray=["x2","?","%","√","="];}
        ImmediateComputeHandler.prototype = new InputHandler();
        ImmediateComputeHandler.prototype.handleRequest = function(currentInput,allInput) {
            if(allInput.length<=1){
                return allInput;
            }
            var isCompute=$.inArray(currentInput,this.ImmediateComputeKeyArray);
            if(isCompute!=-1){
                var result=computeResult(allInput)
                switch(isCompute){
                    case 0:
                        result=result*result;
                        break;
                    case 1:
                        if(result!=0){
                            result=1/result;
                        }
                        break;
                    case 2:
                        result=readonly/100;
                        break;
                    case 3:
                        if(result<0){
                            result=0;
                        }else{
                            result=Math.sqrt(result);
                        }
                        break;
                }
                return result+"";
            }else{
                if(this.next){
                    return this.next.handleRequest(currentInput,allInput);
                }
            }
        }
        
        <!-- 小数点 -->
        PointHandler = function () {}
        PointHandler.prototype = new InputHandler();
        PointHandler.prototype.handleRequest = function(currentInput,allInput) {
            if(currentInput=="."){
                var temp=allInput;
                if(allInput.length!=0){
                    var containPoint = allInput.indexOf(".");
                    if(containPoint==-1){
                        temp=allInput+currentInput;
                    }
                }
                return temp;
            }else{
                if(this.next){
                    return this.next.handleRequest(currentInput,allInput);
                }
            }
        }
        
        function computeResult(allInput){
            var computeItemArray=getComputeItemArray(allInput);
            computeItemArray =computeCore(computeItemArray,"*");
            if(computeItemArray.length!=1){
                computeItemArray =computeCore(computeItemArray,"/");
            } 
            if(computeItemArray.length!=1){
                computeItemArray =computeCore(computeItemArray,"+");
            }
            if(computeItemArray.length!=1){
                computeItemArray =computeCore(computeItemArray,"-");
            }
            return parseFloat(computeItemArray[0]);
        }
        
        function computeCore(computeItemArray,operator){
            var opIndex=$.inArray(operator,computeItemArray);
            while(opIndex!=-1){
                var num1 = parseFloat(computeItemArray[opIndex-1]);
                var num2 = parseFloat(computeItemArray[opIndex+1]);
                var result;
                switch(operator){
                    case "+":
                        result=num1+num2;
                        break;
                    case "-":
                        result=num1-num2;
                        break;
                    case "*":
                        result=num1*num2;
                        result=Math.round(result*100)/100;
                        break;
                    case "/":
                        result=num1/num2;
                        result=Math.round(result*100)/100;
                        break;
                }
                computeItemArray.splice(opIndex-1,3,result+"");
                opIndex=$.inArray(operator,computeItemArray);
            }
            return computeItemArray;
        }
        
        function getComputeItemArray(allInput){
            var computeItemArray =[];
            var totalLength=allInput.length;
            var operatorArray=["+","-","/","*"];
            var i=0;
            while(i<totalLength){
                var j=i;
                for(;j<totalLength;j++){
                    var tempChar=allInput[j];
                    var isOperator=$.inArray(tempChar,operatorArray);
                    if(isOperator!=-1){
                        break;
                    }
                }
                var tempStr="";
                if(i==j){
                    tempStr= allInput.substr(i,1);
                    i=j+1;
                }else{
                    tempStr= allInput.substring(i,j);
                    i=j;
                }
                computeItemArray.push(tempStr);
            }
            var lastItem=computeItemArray[computeItemArray.length-1];
            var isOperator=$.inArray(lastItem,operatorArray);
            if(isOperator!=-1){
                computeItemArray.pop();
            }
            return computeItemArray;
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-4 offset-4 display-border" style="margin-top:50px;">
                <div class="row">
                    <h3>计算器</h3>
                </div>
                <div class="row calculator-row">
                    <input id="result" type="text" class="w-100" readonly="readonly"></input>
                </div>
                <div class="row calculator-row">
                    <input id="computeItem" type="text" class="w-100" readonly="readonly"></input>
                </div>
                <div class="row calculator-row">
                    <div class="col">
                        <button id="percent" type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="%" >%</button>
                    </div>
                    <div class="col">
                        <button id="" type="button" class="btn btn-info calculator-btn"  data-toggle="tooltip" data-placement="top" title="√">√</button>
                    </div>
                    <div class="col">
                        <button type="button" class="btn btn-info calculator-btn"  data-toggle="tooltip" data-placement="top" title="x2">x2</button>
                    </div>
                    <div class="col">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="?">?</button>
                    </div>
                </div>
                <div class="row calculator-row">
                    <div class="col-6">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="C">Clear</button>                       
                    </div>
                    <div class="col-3">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="<-"><-</button>
                    </div>
                    <div class="col-3">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="/">÷</button>
                    </div>
                </div>
                <div class="row calculator-row">
                    <div class="col">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="7">7</button>
                    </div>                                                                                    
                    <div class="col">                                                                         
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="8">8</button>
                    </div>                                                                                    
                    <div class="col">                                                                         
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="9">9</button>
                    </div>                                                                                    
                    <div class="col">                                                                         
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="*">×</button>
                    </div>
                </div>
                <div class="row calculator-row">
                    <div class="col">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="4">4</button>
                    </div>                                                                                    
                    <div class="col">                                                                         
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="5">5</button>
                    </div>                                                                                    
                    <div class="col">                                                                         
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="6">6</button>
                    </div>
                    <div class="col">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="-">-</button>
                    </div>
                </div>
                <div class="row calculator-row">
                    <div class="col">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="1">1</button>
                    </div>                                                                                    
                    <div class="col">                                                                         
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="2">2</button>
                    </div>                                                                                    
                    <div class="col">                                                                         
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="3">3</button>
                    </div>
                    <div class="col">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="+">+</button>
                    </div>
                </div>
                <div class="row calculator-row">
                    <div class="col-6">
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="0">0</button>
                    </div>                                                                                    
                    <div class="col-3">                                                                         
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title=".">.</button>
                    </div>                                                                                    
                    <div class="col-3">                                                                         
                        <button type="button" class="btn btn-info calculator-btn" data-toggle="tooltip" data-placement="top" title="=">=</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

编写计算器程序学习JS责任链模式

标签:tco   ace   scom   小数点   round   container   boot   data   程序学习   

原文地址:https://www.cnblogs.com/DreamOfLife/p/9965742.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!