第六週 可執行代碼 以及 PSP 燃盡圖 等等

轉眼已經第六週了。這周主要內容有下：（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已經完成。