Js实现简单计算器3 面向对象的方法优化写法

最新推荐文章于 2022-10-21 21:21:49 发布

milloc

最新推荐文章于 2022-10-21 21:21:49 发布

阅读量999

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web.js 文章标签：面向对象

本文链接：https://blog.youkuaiyun.com/ax1232/article/details/77036949

还是一样的效果图，如下：

这里写图片描述

这次采用面向对象的方法，建立了一个Caculator类，下面是类似于uml2.0类图描述

:Caculator
experssion:object
result:object
keyboad:object
state:(0\|1\|2)	0:input 1:caculated 2:err
cl( )	clear
del( )	back
eval( )
inputNum( )
inputOper( )
ini( )	to bind event

原先方法是通过遍历btn进行绑定事件，这样效率不高。现在仅在keyboard中绑定事件，通过event.target属性来判断触发的方法。可以看见，这样的写法代码简单很多。源代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Caculator</title>
<style type="text/css">
    .content {
        display: block;
        position: relative;
        top: 150px;
        width: 400px;
        left: 30%;
        font-family: Consolas;
        font-weight: lighter;
        font-size: 16px;
    }
    .monitor {
        width: 400px;
        border: solid 1px black;
        text-align: right;
        background-color: #f7f7f7;
    }
    .monitor input {