结对编程1

结对编程1 对项目的增量式开发和协作开发

@201421122090,@201421122083


需求分析(完成其中任意两项即可)

[x]记录用户的对错总数,程序退出再启动的时候,能把以前的对错数量保存并在此基础上增量计算(文件导入或者是用户根据历史记录选择?)。
[√]有计时功能,能显示用户开始答题后的消耗时间(实时显示或者退出时显示)。
[√]界面支持中文简体/中文繁体/英语,用户可以选择一种。

思维导图

思维导图


功能设计

计时与显示时间
简繁英语言切换

设计实现
计时功能
在点击生成题目按钮后即开始计时,在函数中添加计时器timer,调用setInterval函数对每1000毫秒进行计时器内容改变。
简繁英语言切换
在屏幕中添加简繁英按钮,点击后触发点击事件,对文本域内容进行切换。


编码规范
(对项目中可能出现的编码状况进行规范,对目前尚未使用到的日后再进行添加)
一、基本约定
1.程序编写采用驼峰命名法+英文简写命名+动词名词命名,可以显示变量内容,方法作用
如:
var calcResult ,var timer
2.对每个方法前进行方法说明注释,对于方法中的形参命名同上
如:

// 随机数据(分数和整数)
var ranNum = function () {
    //...
}

3.在变量声明区提前声明变量,在方法中声明的变量最好不使用i,j,x,y,z,使用准确计数名称来反映变量作用
如:

//变量声明区
var timer = document.getElementById("timer")
//...
//方法实现区
var ranData = function(){
    var data;
}

4.注释规范
注释中需要将方法作用写出,对于晦涩难懂的实现细节需要详细说明

5.对显示出的标签和文字使用简体中文展示,编码字符集使用UTF-8

二、使用模板
1.css模板

<style>
        body{
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: skyblue;
        }
        #main{
            margin: 20px auto;
            width: 800px;
            text-align: center;
            background-color: white;
        }
        li{
            width: 100%;
            height: 20px;
            list-style: none;
        }
        #myform{
            margin: 20px auto;  
            width: 80%;
            text-align: left;
            text-align: center;
            /*background-color: skyblue;*/
        }
        label{
            font-size: 14px;
        }
        #calm{
            text-align: left;
        }
        li{
            width: 100%;
            height: 25px;
            margin: 2px 0;
            line-height: 25px;
            padding: 00px;
            padding-left: 20PX;
        }
        .name{
            position: absolute;
            /*left: 700px;*/
            /*display: inline-block;*/
            margin-top: 2.5px;
            width: 85px;
            height: 20px;
            /*border: 0;*/
            line-height: 20px;
            padding: 0;
            box-sizing: border-box;
        }
        .liSpan{
            display: inline-block;
            width: 120px;
            height: 20px;
            /*background-color: white;*/
            text-indent: 2em;
            line-height: 20px;
        }
        .liSpan1{
            display: inline-block;
            width: 240px;
            height: 20px;
            line-height: 20px;
            /*background-color: red;*/
        }
        .span{
            display: inline-block;
            width: 100px;
            margin-left: 100px;
            text-indent: 3em;
        }
        #button2{
            margin: 10px;
            display: inline-block;
            width: 95px;
        }
        #grade{
            height: 35px;
        }
        #timetable{
            position: absolute;
            top: 20px;
            left: 40px;
        }
    </style>

代码说明
1.计时功能

//js代码
var timetable=document.getElementById("timetable");
var time =document.getElementById("time");
var timer =document.getElementById("timer");
tim = setInterval(function() {
    ti++;
    timer.innerHTML = ti + "s";
}, 1000);
time.innerHTML = "您的用时:"
<!--html-->
<div id="timetable">
    <span id="time">点击确认后开始计时</span>
    <br>
    <span id="timer"></span>
</div>

2.语言切换

//js代码
    var btns = document.querySelectorAll(".btn");
    for(var i = 0;i < btns.length;i++){
        var btn = btns[i];                  //获取i的div标签元素
        btn.onclick=function(nm){
            return function(){
                label1.innerHTML = intel[nm];
                label2.innerHTML = intel1[nm];
                button1.innerHTML = intel2[nm];
                button2.innerHTML = intel3[nm];
                contentR.innerHTML = intel4[nm];
                contentW.innerHTML = intel5[nm];
            }
        }(i);
    }
<!--html-->
        <div id="cLanguage">
            <button class="btn">简体中文</button>
            <button class="btn">繁体中文</button>
            <button class="btn">英文</button>
        </div>

测试运行
1.计时功能
计时功能

2.简繁英切换

英文
![](http://chuantu.biz/t6/107/1508582040x463083759.png)
简体
![](http://chuantu.biz/t6/107/1508582117x463083759.png)
繁体

PSP

PSP2.1 Personal Software Process Stages Time Senior Student Time
Planning 计划 20 20
Estimate 估计这个任务需要多少时间 5 5
Development 开发 500 700
Analysis 需求分析 (包括学习新技术) 30 10
Design Spec 生成设计文档 5 1
Design Review 设计复审 2 1
Coding Standard 代码规范 1 1
Design 具体设计 20 30
Coding 具体编码 400 470
Code Review 代码复审 10 8
Test 测试(自我测试,修改代码,提交修改) 60 150
Reporting 报告 20 60
测试报告 12 45
计算工作量 3 5
并提出过程改进计划 8 10

小结感受
结对编程让我体会到了在做项目中身处在团队中的好处,有不会的不懂的可以很快的询问,自己有想法有意见也可以直接提出,让编程效率直线提升。


队友评价
我的队友@黄鸿伟 201421122083认真勤劳,对每个代码中的细节认真思考,会将自己的想法与看法即使的反映给我,虽然在编码中有些不规范的地方,但总体使我们的项目进度很快增加,是位非常好的队友。


合作时刻

合作时刻


项目地址>>

posted @ 2017-10-21 23:10  Symumi  阅读(216)  评论(3编辑  收藏  举报