网页版实现wc统计功能

一 、 Github 地址：https://gitee.com/leechooo/wc

二 、 PSP表格

psp2.1	预估耗时（分钟）	实际耗时（分钟）
Planning	20	25
Estimate	60	80
Development	80	100
Analysis	20	15
Design Spec	5	5
Design Review	10	10
Coding Standard	5	10
Design	10	15
Coding	10	15
Code Review	5	5
Test	5	5
Reporting	5	5
Test Report	5	5
Size Measurement	5	5
Postmortem & Process Improvement Plan	245	300

三、 解题思路
通过javascript将文件读取并保存，判断勾选了哪个复选框，并根据命令调用对应的函数

四、 设计实现过程
读取文件代码实现：

inputFile.onchange = function() {
   var file = this.files[0]
   var reader = new FileReader()
   reader.onload = function() {
     start(this.result)
   }
   reader.readAsText(file)
   this.value = '' //清空value值，使选择相同文件也能触发change事件
 }

判断勾选了哪些复选框：

var char = document.getElementById('char')
    word = document.getElementById('word')
    line = document.getElementById('line')
if(char.checked) {
  charCount(result)
} 
if(word.checked) {
  wordCount(result)
}
if(line.checked) {
  lineCount(result)
}

统计字符函数

function charCount(result) {
  var charNum = result.length
  str += '<span>字符数：' + charNum + '</span></br>'
  output.innerHTML = str
}

统计单词函数

function wordCount(result) {
  var wordNum = result.split(' ').length
  str += '<span>单词数：' + wordNum + '</span></br>'
  output.innerHTML = str
}

统计行数函数

function lineCount(result) {
  var lineNum = result.split('\n').length
  str += '<span>行数：' + lineNum + '</span></br>'
  output.innerHTML = str
}

五、 测试代码

默认显示：

查询字符数

查询单词数

查询行数

六、 遇到的困难和解决办法
当连续选择同一个文件时会出现无法触发onchange函数的情况，造成这个情况的原因是input的value值没有改变。解决办法，每次onchange函数结束前清空value值：this.value = ”