利用原生Javascript实现计算器（未完待续）

　　这里，将记录我升级四则运算v1.2的整个过程。

　　环境检测，杨说检测环境也是可以高兴到手舞足蹈的一件事。

　　为了实现自动化，Testing，查阅相关资料，我这里使用了node（这里为了npm）、yoeman、grunt、bower、sass、karma，以及jasmine。（以前没用过，可能这次尝试是失败的）。

　　1.node： 

　　2. yeoman： 

　　3.grunt：

　　4.bower： 

　　5.sass：

　　6.karma：

　　7.jasmine：

　　很好，环境OK。这里我有一个问题，大家可以发现我用的是cmd命令行（其实我是拒绝的），但是用git bash时，使用类似yo webapp *** 命令出现下列这种情况 时，无法通过方向键进行选择。希望知道如何解决这个问题的朋友帮帮我。谢谢。

　　接下来开始升级四则运算v1.2

　　　　1.进入四则运算v1.1,使用npm init 整合旧项目，使用npm install grunt --save-dev 引入grunt，使用npm install load-grunt-tasks --save-dev和npm install time-grunt --save-dev，这里稍微

　　吐槽下学校的的网络，大概需要20min吧~ （这里的-dev是开发环境的意思）全部完成后目录结构如下

　　　　

　　　　2.这里没有使用yoeman自动生成目录（因为那个方向键实在搞不定），只能自己编写Gruntfile.js。发现缺少grunt-contrib-sass和grunt-contrib-watch，使用命令npm install分别安装。

我的Gruntfile.js代码如下：

'use strict'

module.exports = function(grunt){

	require('load-grunt-tasks')(grunt);

	require('time-grunt')(grunt);

	var config = {
		app: 'app',
		dist: 'dist'
	}

	grunt.initConfig({

		config: config,

		sass: {
            dist: {
                files: {
                    '<%= config.app %>/style/style.css' : '<%= config.app %>/sass/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
	});

	grunt.registerTask('default',['watch']);
	
}

　　保存后，在命令行输入grunt，开启监控。当保存scss文件时会自动编译成css，自动化编译成功。如下：

　　

 

　　这些配置完毕后，可以专心编写代码了。

　　首先是html，做出一个计算器图形。这里给出sass代码

$digitBgColor: rgb(230,230,230);
$digitHoverBgColor: rgb(207,207,207);
$showBgColor: rgb(242,242,242);
$bWidth: 50px;
$bHeight: 40px;
%fl{float:left}
$calWidth: 250px;
@mixin myFont{
    font-family: 'Microsoft YaHei',Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;
    line-height: 40px;
}
%mg0{margin: 0 auto}
%tac{text-align: center}
%db{display: block}
%dn{display: none}
%pr{position: relative}
%pa{position: absolute}


.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

.calc {
    width: $calWidth;
    .panel{

        & .digit{
            width: $bWidth;
            height: $bHeight;
            background-color: $digitBgColor;
            @extend %fl;
            color: black;
            @include myFont;
            @extend %mg0;
            @extend %tac;
            &:hover{
                background-color: $digitHoverBgColor;
            }
        }
    }
}

.show{
    background-color: $showBgColor;
    height: 80px;
    input{
        @extend %dn;
    }
    #inputBlock{
        @extend %pr;
        height: 50px;
        #stack1{
            @extend %pa;
            bottom: 0px;
        }
    }
    #OutputBlock{
        @extend %pr;
        height: 30px;
        #stack2{
            @extend %pa;
            bottom: 0px;
        }
    }
}

 

　　这里实现的js很烂，可能是很晚导致脑袋不清醒。在完成的过程中我学到了3点

　　　　i.实现功能时，可以画图描述每个状态是什么，可以变成什么状态。今天在实现计算器按键功能的时候，后悔没早些把可能的情况（比如用户按等号之后再按数字会怎样，按等号之后再按运算符会怎样）在图纸上模拟一遍，导致最后完全　　不知道自己在干嘛。调了很久，莫名奇妙的就好像可以用了。

　　　　ii.要有时间规划，本来以为今天可以做完的，但是到了晚上效率实在不高，PSP明天再另外一篇博客中给出。

　　　　iii.困了就睡觉。

　　

　　现在还存在的问题：

　　　　1.不能实现括号（时间规划不好导致），所以在用的时候不能点击括号。

　　　　2.太丑，需要优化。

　　　　3.没有实现测试。

　　　　4.小数点不支持。

 

　　代码在https://github.com/yanyige/CourseWork/tree/master/Week2中给出，实现效果在http://yanyige.github.io/中展示。（肯定有bug，希望可以指出，谢谢！）　

　　

　　明天继续。

 

　　思考了一下判断用户答案并显示在计算器中，那就。。。再加一个flag吧。

　　加完判断用户答案发现需要支持小数点（不然用户无法输入答案） 已经添加完毕。

　　修正几个bug。

　　

　　现在的情况：

　　　　i.单击NEW产生式子，在输入框输入答案后按ANS查看答案是否正确。

　　　　ii.仍然没有实现括号。（有思路）

　　　　iii.还需要美化。（有思路）

　　　　iv.分数运算会溢出。（不知道怎么解决）

 

　　现在已经很晚了，我也困了，所以该睡觉了。所以添加括号以后在做（明天？）

　　我是个rubbish code builder，没有对自己的代码负责，检讨。

　　这个计算器的代码我已经快看晕了，总结一下为什么会这么糟烂，做之前没画具体的流程图，在写代码的过程中没做到走查，昨天晚上的代码没有一行注释。

 

　　代码已经更新。

　　代码在https://github.com/yanyige/CourseWork/tree/master/Week2中给出，实现效果在http://yanyige.github.io/中展示。（肯定还有bug，希望可以指出，谢谢！）

 

　　3.14上午花了两个小时完成括号功能，遇到了很多问题（你永远不知道用户接下来会干啥）。思路有问题，还需要重新思考，再想想吧。