nwjs(nodejs)写桌面应用(少儿英语学习项目经验总结)
项目背景
最近上三年级儿子的英语老是记不住单词,而他们又在上科学课,老师让练打字。打字和英语学习都没太适合小家伙的实际情况,因此就花了一个周末写下了这个项目。
实现功能
两种模式:随机模式,从词库里随机抽取题目,会重复,一直运行;顺序模式,将词库打乱后成一个队列,依次出题,不会重复,一遍完成,给出统计结果。
两种输入判断方式:单词或短语方式,回车提交;打字模式,单字母输入时,如果和结果相符,自动提交。
题库为json文件,存在指定目录中。
暂时实现了上面这些功能,至于题库选择装载、错题存储、单词权重等想到的功能,先列在此,要是小家伙能用起来再说吧。
开发中遇到的问题
radio单选框在动态设置时,使用attr就第一次能生效,应该用prop方法。
读目录下所有文件,要排除系统生成的隐藏文件,如苹果下的.DS_Store。
打字时,要判断完马上清除input框的文字,应该用onkeyup事件,不能用onkeydown。
keyCode取得的字母ASIIC码是大写字母的。
关键源码说明
题库的读入与题目队列的初始化
题库为指定目录下所有json文件,使用lodash辅助处理(开始用的underscore);题目队列生成时就随机打乱,为简化后面的操作。
var files = fs.readdirSync('./json'); for(var k = 0; k < files.length; k++){ if(__.endsWith(files[k],".json"))__.extend(lib, JSON.parse(fs.readFileSync("./json/" + files[k]))); } //console.dir(lib); var keys = Object.keys(lib); for( var i = 0; i < keys.length; i++){ if(problems.indexOf(lib[keys[i]]) < 0){problems.splice(__.random(problems.length-1),0,lib[keys[i]]); } } //console.dir(problems);
keyUp事件处理
打字练习库是a-z的一个键与值同等的对象,输入一个字母时,若与题目相等,则响应,开始我用的onkeydown,此时从界面取值是取不到的,所以写成了下面这个模式,想来改用onkeyup后是不是不用这样麻烦了,有空再测试一下。
function keyUp(e) { var ev= window.event||e; if (ev.keyCode == 13 && $("#inputInfo").val().trim().length > 0) { answerCommit(); }else if(ev.keyCode == $("#problem").val().toUpperCase().charCodeAt()){ answerCommit(ev.keyCode); }}
答案提交处理
模拟了函数重载,根据有无参数,分别对打字练习和单词两种方式进行数据预处理。
function answerCommit(){ var answer,problem; if(arguments.length == 0){ answer = lib[$("#inputInfo").val().trim()]; problem = $("#problem").val(); } else if(arguments.length == 1){ answer = arguments[0]; problem = $("#problem").val().toUpperCase().charCodeAt(); } if(answer==problem){
源代码
源码托管在开源中国,有兴趣的同学可以过去拍砖,呵呵。
https://git.oschina.net/zhoutk/ilearn.git
运行方法
全局安装nw.js
npm install nw -g
克隆源代码
git clone https://git.oschina.net/zhoutk/ilearn.git
安装依赖库
cd ilearn & npm install
运行项目
nw