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

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

通过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>

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

时间： 2024-10-14 08:18:10

编写计算器程序学习JS责任链模式的相关文章

最近学习了责任链模式

前言来菜鸟这个大家庭10个月了,总得来说比较融入了环境,同时在忙碌的工作中也深感技术积累不够,在优秀的人身边工作必须更加花时间去提升自己的技术能力.技术视野,所以开一个系列文章,标题就轻松一点叫做最近学习了XXX吧,记录一下自己的学习心得. 由于最近想对系统进行一个小改造,想到使用责任链模式会非常适合,因此就系统地学习总结了一下责任链模式,分享给大家. 责任链模式的定义与特点责任链模式的定义:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这个对象连成一条链,并沿着

设计模式学习－责任链模式

1.定义避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象处理它为止. 2.类图 3.代码示例 1 package com.zhaoyangwoo.chainOfResponsibility; 2 3 /** 4 * Created by john on 16/6/16. 5 * 职责链模式,经费审批场景 6 */ 7 public class Responsibility { 8 9 public static void

学习笔记——责任链模式ChainOfResponsibility

责任链模式,主要是通过自己记录一个后继者来判断当前的处理情况.Handler中,再增加一个方法用于设置后继对象,如SetHandler(Handler obj). 然后Handler类以其子类的处理方法Handler()通过判断后继对象是否存在来操作: 1.没有设置后继对象,自己处理事件 2.有后继对象,交给后继者的Handler()处理. 通过这样的不断调用传递,处理责任将到达最终的对象上. 比如,当我们要处理一个网络请求返回时,一般肯定是写一串函数,然后通过判断来依次执行相应操作,如果采用责

java23种设计模式之十：责任链模式

最近在学习netty中发现其中用到了责任链模式,然后结合自己在写代码中遇到了大量写if...else的情况,决定学习一下责任链模式. 一.什么样的场景下会选择用责任链模式我们在进行业务逻辑判断时,需要根据传入参数类型的不同做出不同的处理,如果在传入的参数类型相对较少的情况时,可以用if...else来做判断,这样的确是没有什么问题的,但是如果后期由于业务系统的扩展,导致参数类型会随之延伸出很多种不同的处理,这时就需要用责任链模式来抒代码重构,这样会让代码封装的更好.更简洁,阅读性更强,后期如果

Design Pattern Chain of Reponsibility 责任链模式

本程序实现一个责任链模式查询人名的资料. 开始都是查询第一个人,问其是否有某人的资料,如果有就返回结果,如果没有第一个人就会询问第二个人,第二个人的行为和第一个人的行为一致的,然后一致传递下去,直到找到答案,或者是最后没有资料,返回. 首先创建一个基类: //base class class Person { public: virtual void getInfo(string name) = 0; }; 第一个人的类: 主要行为函数是getInfor,就是一个if else判断,这里使用ma

Java设计模式(七) COR(责任链)模式及Tomcat引申

基本概念定义:使多个对象都有机会处理请求,从而避免了请求的发送者和接受者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,知道有对象处理它为止. COR(责任链)模式的角色分工: Handler:抽象处理者,定义一个处理请求的接口 Concrete Handler: 具体处理者,处理请求的具体类,或者传给"下家". Requester:发出请求等待处理的类,它无需关注到底是哪个具体的Handler处理它的请求 COR的处理问题的场景: 一个request在多个handle

设计模式学习笔记（六：责任链模式）

1.1概述使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止.这就是责任链模式. 责任链模式是使用多个对象处理用户请求的成熟模式,责任链模式的关键是将用户的请求分派给许多对象,这些对象被组织成一个责任链,即每个对象含有后继对象的引用,并要求责任链上的每个对象,如果能处理用户的请求,就做出处理,不再将用户的请求传递给责任链上的下一个对象:如果不能处理用户的请求,就必须将用户的请求传递给责任链上的下一个对象

PHP设计模式学习笔记：责任链模式（Chain of Responsibility）

// 抽象书本类 abstract class AbstractBookTopic { abstract function getTopic(); abstract function getTitle(); abstract function setTitle($title_in); } // 书本类,继承自抽象书本类 class BookTopic extends AbstractBookTopic { private $topic; private $title; function __co

责任链模式——HeadFirst设计模式学习笔记