编写计算器程序学习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=["x²","¼","%","√","="];}

<!-- 小数点 -->

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=["x²","¼","%","√","="];}

		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="x²">x²</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责任链模式的更多相关文章

学习笔记——责任链模式ChainOfResponsibility
责任链模式,主要是通过自己记录一个后继者来判断当前的处理情况.Handler中,再增加一个方法用于设置后继对象,如SetHandler(Handler obj). 然后Handler类以其子类的处理方 ...
设计模式学习之责任链模式（Chain of Responsibility，行为型模式）（22）
参考:http://www.cnblogs.com/zhili/p/ChainOfResponsibity.html 一.引言在现实生活中,有很多请求并不是一个人说了就算的,例如面试时的工资,低于1 ...
Java设计模式学习记录-责任链模式
前言已经把五个创建型设计模式和七个结构型设计模式介绍完了,从这篇开始要介绍行为型设计模式了,第一个要介绍的行为型设计模式就是责任链模式(又称职责链模式). 责任链模式概念介绍责任链模式是为了避免 ...
Java-马士兵设计模式学习笔记-责任链模式-FilterChain功能
一.目标增加filterchain功能二.代码 1.Filter.java public interface Filter { public String doFilter(String str) ...
Java-马士兵设计模式学习笔记-责任链模式-模拟处理Reques Response
一.目标 1.用Filter模拟处理Request.Response 2.思路细节技巧: (1)Filter的doFilter方法改为doFilter(Request,Resopnse,FilterC ...
Java-马士兵设计模式学习笔记-责任链模式-处理数据
一.目标数据提交前做各种处理二.代码 1.MsgProcessor.java public class MsgProcessor { private List<Filter> filt ...
java23种设计模式之十：责任链模式
最近在学习netty中发现其中用到了责任链模式,然后结合自己在写代码中遇到了大量写if...else的情况,决定学习一下责任链模式. 一.什么样的场景下会选择用责任链模式我们在进行业务逻辑判断时,需 ...
Design Pattern Chain of Reponsibility 责任链模式
本程序实现一个责任链模式查询人名的资料. 開始都是查询第一个人,问其是否有某人的资料,假设有就返回结果,假设没有第一个人就会询问第二个人,第二个人的行为和第一个人的行为一致的,然后一致传递下去,直到找 ...
ASP.NET MVC 学习笔记-2.Razor语法 ASP.NET MVC 学习笔记-1.ASP.NET MVC 基础反射的具体应用策略模式的具体应用责任链模式的具体应用 ServiceStack.Redis订阅发布服务的调用 C#读取XML文件的基类实现
ASP.NET MVC 学习笔记-2.Razor语法 1. 表达式表达式必须跟在“@”符号之后, 2. 代码块代码块必须位于“@{}”中,并且每行代码必须以“: ...

随机推荐

基于OpenCV的图书扫描识别程序开发
1.AndroidStudio环境配置 https://www.cnblogs.com/little-monkey/p/7162340.html
Codeforces Round #485 (Div. 2) A. Infinity Gauntlet
Codeforces Round #485 (Div. 2) A. Infinity Gauntlet 题目连接: http://codeforces.com/contest/987/problem/ ...
PHP字符串函数之 strpos stripos strrpos strripos
strpos – 查找字符串首次出现的位置 stripos – 查找字符串首次出现的位置(不区分大小写) strrpos – 计算指定字符串在目标字符串中最后一次出现的位置 strripos – 计算 ...
dubbo实现示例
创建MAVEN项目项目结构: 在项目pom.xml中添加依赖 <dependency> <groupId>org.apache.zookeeper</groupId&g ...
Delphi调用SQL分页存储过程实例
Delphi调用SQL分页存储过程实例 (-- ::)转载▼ 标签: it 分类: Delphi相关 //-----下面是一个支持任意表的 SQL SERVER2000分页存储过程 //----分页存 ...
vue高级组件之provide / inject
转载:https://blog.csdn.net/Garrettzxd/article/details/81407199 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通 ...
web API简介(一)：API，Ajax和Fetch
概述今天逛MDN,无意中看到了web API简介,觉得挺有意思的,就认真读了一下. 下面是我在读的时候对感兴趣的东西的总结,供自己开发时参考,相信对其他人也有用. 什么是API API (Appli ...
参考信息 - Serverless
初见 Serverless的本质是什么? 看懂 Serverless,这一篇就够了关于「Serverless」的完整指南:你知道和不知道的了解 7个开源平台,入门无服务器计算
iOSAPP开发项目搭建
架构图: 架构原则:易读性.易维护性.易扩展性. 一.思考做好一件事,花在思考上的时间应该多于执行. 首先根据产品需求和设计图,脑中先建立一个产品架构: 1. 产品的定位是什么. 社交?媒体?游戏? ...
python(leetcode)-350两个数组的交集
给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入: nums1 = [4,9,5 ...