转眼已经第六周了。这周主要内容有下:(CHECKLIST)
1.完成未完成的功能点。
2.PSP。
3.站立会议。
4.燃尽图。
5.各种图(折线,饼图)。
6.checkList
具体任务如下:
1.
i.将用户做过的题目整理到习题本中。
ii.习题本可以记录用户当时填写的答案。
iii.规范算式(4个数字)。
iv.将做过的题目去重。
v.再次规范化输出算式(生成数目多少,括号位置,括号对数)。
vi.支持分数运算。
vii.结果用分数显示。
viii.结果显示分数的最简形式。
iX.再次优化界面,以及兼容性。
这里详细描述一下部分方法的实现。
关于支持分数运算,首先想到在逆波兰表达式中,只能算一个一个数字的运算结果,这个时候需要把每个数变成一个对象,存分子和分母,然后再进行计算。
变对象的代码如下:
function Fraction(numerator, denominator){
this.numerator = numerator;
this.denominator = denominator;
}
这里使用构造函数构造一个分数,传递两个参数分子和分母。
接着是生成算式,在生成算式中,新增了一个参数,标记生成的分母,如果分母传递参数是1,那么将分母赋值成1,否则,分母赋值成一个1-参数大小的随机数,最后把生成的fraction push 进数组。
修改代码如下:
for(var i = 0 ; i < NUMDIGIT ; i ++){ //循环生成公式
if(DENOMINATOR == 1){
var numerator = Math.ceil(Math.random() * MAXNUM);
var denominator = 1;
var fraction = new Fraction(numerator, denominator);
}else{
var numerator = Math.ceil(Math.random() * MAXNUM);
var denominator = Math.ceil(Math.random() * DENOMINATOR);
var fraction = new Fraction(numerator, denominator);
}
formula.push(fraction);
if(i != NUMDIGIT - 1){
var index = Math.floor(Math.random() * PUNCTUATION);
formula.push(punctuation[index]);
}
}
最重要的就是计算结果了,这里我编写了几个函数用于标准化计算结果,分别是normalizationFraction(用于标准化一个fraction对象),outputFraction(用于将一个对象转化成其字符串形式),transforFraction(用于将一个fraction数组中的每一个fraction转化成其字符串形式),除了标准化代码,还需要对fraction对象的加减乘除运算进行重写。具体代码如下:
标准化:
function abs(a){
return a<0?-a:a;
} function checkFraction(a, b){
return outputFraction(a)==b?true:false;
} function gcd(a, b){
return b?abs(gcd(b,a%b)):abs(a);
} function normalizeFraction(fraction){
if(fraction.denominator<0) return new Fraction(-fraction.numerator/gcd(fraction.numerator, fraction.denominator), -fraction.denominator/gcd(fraction.numerator, fraction.denominator));
return new Fraction(fraction.numerator/gcd(fraction.numerator, fraction.denominator), fraction.denominator/gcd(fraction.numerator, fraction.denominator)); } function outputFraction(fraction){
fraction = normalizeFraction(fraction);
return fraction.denominator==1?fraction.numerator:fraction.numerator + '/' + fraction.denominator;
} function transforFraction(fractions){
fractions = fractions.map(function(item, index){
if(item instanceof Fraction) return normalizeFraction(item);
else return item;
});
return fractions.map(function(item, index){
if(item instanceof Fraction) return item.denominator==1?item.numerator:item.numerator+'/'+item.denominator;
else return item;
}).join("");
}
重写四则运算的方法:
function addFraction(a, b){
var denominator = a.denominator * b.denominator;
var numerator = a.numerator * b.denominator + a.denominator * b.numerator;
return new Fraction(numerator, denominator);
} function minusFraction(a, b){
var denominator = a.denominator * b.denominator;
var numerator = a.numerator * b.denominator - a.denominator * b.numerator;
return new Fraction(numerator, denominator);
} function multiplyFraction(a, b){
var denominator = a.denominator * b.denominator;
var numerator = a.numerator * b.numerator;
return new Fraction(numerator, denominator);
} function devideFraction(a, b){
var denominator = a.denominator * b.numerator;
var numerator = a.numerator * b.denominator;
return new Fraction(numerator, denominator);
}
function getAns(formula){
var ansArr = []; //存储结果的栈
for(var i = 0 ; i < formula.length ; i ++){
//console.log('formula[i]='+formula[i]);
// if(!isNaN(formula[i])){
if(formula[i] instanceof Fraction){
ansArr.push(formula[i]);
}else{
var p1 = ansArr.pop();
var p2 = ansArr.pop();
// console.log(p1);
// console.log(p2);
var tAns;
switch (formula[i]){
case '+': tAns = addFraction(p2, p1); break;
case '-': tAns = minusFraction(p2, p1); break;
case '*': tAns = multiplyFraction(p2, p1); break;
case '/': tAns = devideFraction(p2, p1); break;
}
ansArr.push(tAns);
}
}
return ansArr.pop();
}
其实以上函数代码都可以转化成一行实现,但是由于部分浏览器对js支持不是很好,这里使用了兼容性比较好的写法。
通过这次完成杨老师布置的功能点和自己想出来的功能点,我的感触很多。我很庆幸自己阅读了构建之法以及精读Javascript高级编程这两本书,前者告诉我工程中结构化的重要性,编写代码要有注释,并且要将实现功能的函数封装起来,这次在修改代码的途中,我并没有重构整个项目的代码,只是添加了几个函数,修改了函数中的返回值就扩展了原代码的效果。后者则给了我足够的基础完成整个js的编写。事实证明,原生js还是很重要的。
所有的可执行代码已经更新到https://github.com/yanyige/CourseWork/tree/master/Week6,效果的展示在http://yanyige.github.io/Week6/中展示。
2.PSP(新版PSP不追踪休息时间)
DATE | START-TIME | END-TIME | EVENT | DELTA | TYPE | |||||
3.12 | 9.30 | 11.30 | 环境搭建 | 音乐30min | QQ25min | 65min | ||||
21.23 | 2.35 | 代码 | 接水0min | WC 5min | 音乐30min | 新闻15min | 252min | |||
3.13 | 21.30 | 0.22 | 升级calcv1.2 | 博客5min+3min | QQ语音20min | 音乐10min | 聊天20min | 143min | ||
3.14 | 9.00 | 11.15 | 实现添加括号功能 | 音乐30min | 聊天20min | 85min | ||||
3.21 | 15.16 | 15.53 | 站立会议 | 37min | ||||||
3.22 | 15.30 | 15.50 | 站立会议 | 20min | ||||||
3.33 | 9.00 | 11.00 | 看构建之法 | 上网30min | 音乐30min | 走神5min | 55min | |||
14.23 | 17.55 | 编写这周内容 | 上网60min | 音乐30min | 走神20min | 102min | ||||
22.00 | 22.27 | 写博客 | 27min | |||||||
3.25 | 15.05 | 15.26 | 站立会议 | 21min | ||||||
17.33 | 23.50 | 完成“小试牛刀” | 上网60min | 音乐30min | 走神20min | 聊天30min | 237min | |||
3.26 | 20.33 | 0.03 | 完成“小试牛刀” | 音乐30min | 英雄联盟60min | 120min | ||||
0.03 | 0.27 | 写博客 | 上网10min | 14min | ||||||
4.2 | 8.00 | 11.00 | 学车 | 180min | 学习 | |||||
13.00 | 15.30 | 睡午觉 | 150min | 休息 | ||||||
15.40 | 17.00 | 读书看论文 | 80min | 学习 | ||||||
18.00 | 21.00 | 完成留日预校网站 | 上网60min | 音乐30min | 90min | 编程 | ||||
21.10 | 24.00 | 英雄联盟 | 180min | 游戏 | ||||||
4.3 | 7.00 | 11.00 | 学车 | 240min | 学习 | |||||
13.00 | 16.00 | 睡午觉 | 180min | 休息 | ||||||
16.10 | 16.50 | 晚餐 | 40min | 休息 | ||||||
17.00 | 22.30 | 结对编程 | 聊天60min | 讨论20min | 250min | 学习 | ||||
22.40 | 23.05 | 编写博客 | 发呆10min | 15min | 休息 | |||||
4.4 | 7.00 | 11.00 | 学车 | 180min | 学习 | |||||
11.30 | 12.00 | 吃饭 | 30min | 休息 | ||||||
12.30 | 15.00 | 英雄联盟 | 210min | 游戏 | ||||||
15.30 | 18.20 | 午觉 | 170min | 休息 | ||||||
18.20 | 18.50 | 吃饭 | 30min | 休息 | ||||||
19.00 | 23.00 | 编程 | 聊天60min | 讨论30min | 150min | 编程 | ||||
4.5 | 17.00 | 23.00 | 编程 | 聊天60min | 上网60min | 音乐30min | 210min | 编程 | ||
4.6 | 7.00 | 9.00 | 学车 | 120min | 学习 | |||||
12.00 | 14.00 | 学车 | 120min | 学习 | ||||||
18.20 | 22.10 | 编程 | 上网30min | 聊天20min | 120min | 编程 | ||||
22.15 | 22.33 | 博客 | ||||||||
4.9 | 13.10 | 16.20 | C语言刷题 | 上网30min | 160min | 编程 | ||||
18.10 | 18.50 | 读‘构建之法’ | 40min | 读书 | ||||||
19.00 | 23.00 | 英雄联盟 | 240min | 游戏 | ||||||
4.10 | 8.30 | 12.00 | C语言刷题 | 上网60min | 听歌30min | 120min | 编程 | |||
13.30 | 17.30 | CCF认证 | 240min | |||||||
20.30 | 21.30 | 编程 | 上网30min | 30min | 编程 | |||||
21.35 | 23.30 | 英雄联盟 | 115min | 游戏 | ||||||
4.11 | 9.00 | 11.00 | 编程 | 上网30min | 90min | 编程 | ||||
15.40 | 17.00 | 编程 | 80min | 编程 | ||||||
18.00 | 22.00 | 英雄联盟 | 240min | 游戏 | ||||||
4.12 | 19.00 | 22.30 | 编程 | 上网30min | 180min | 编程 | ||||
22.33 | 23.03 | 博客 | 30min | |||||||
4.13 | 19.00 | 21.30 | 研究自动化测试 | 150min | 学习 |
4.燃尽图(全部燃尽):
在燃尽之时,已经出现了新的功能点。
1.制作快乐运算二级页面。
2.折线图的制作。
5.饼图如下(使用上次Week5中作品,修改传入的参数):
折线图: 打算实现一个自动生成折线图的代码,已经有思路。
代码行数 | 博客字数 | 知识点 | |
第一周 | 71+123 | 603 | js数组的操作方法,图片瀑布流布局,逆波兰表达式,js基本包装类型,js单体内置对象 |
第二周 | 36 + 55 | 510 | |
第三周 | 112 + 233 | 143 | |
第四周 | 212(html)+268(js)+css(46) | 84 | |
第五周 | 528 | 79 | |
第六周 | 40+(html)+132(js) | 1155+512 |
6.checkList已经完成。