前阵子在写论文的时候一直觉得自己之前辛辛苦苦整理的很多论文写作词汇与好的表达并没有派上很大用场。原因之一就是我是手抄写在笔记本上的，但写论文的时候很难一边翻一边写，笔记本无法搜索。所以就一直想着用什么办法使得整理的这些资料能够在真正写论文时发挥最大效果，于是就想到了用网页实现，也算传统艺能(笑)。毕竟之前写过类似的网页，所以基本只要修修改改就好。便有了这个Wrod Bank for Academic Writing。下面简单记录一下开发的过程和一些比较有意思的点。网址是http://zhaoxuhui.top/writing，欢迎提出建议和使用。
1.总体设计
简单来说，希望做成一个网页，这个网页里列举有记录的单词和好的表达，整体类似于博客的Tags页面。而内容的来源则是记录的单词和表达，这里将.wd文件作为单词文件，.exp文件作为表达文件。单词文件内部的数据结构是每一行记录一个单词，每一行内包括单词、词性、中文意思，各部分用一个Tab分割。表达文件同理，每一行为一个表达，每一行内记录表达以及对应中文意思，彼此以一个Tab分割。以上是对于用户而言的，对于程序和开发者而言，还多了一个该单词或表达所在的.wd或.exp文件。这样的作用是如果发现了错误或需要对某个单词进行修改，可以快速定位到该单词的位置。在Python脚本中会读取多个文件，然后对所有单词进行合并和排序，然后输出all_words.txt和all_exps.txt，这两个文件中的内容和网页相比是一样的，唯一区别就是每条记录后面都多了文件位置。而且这两个文件都是格式化输出的，因此可以基于它们快速生成Excel表格或Word文档等，方便其它用途。
此外，为了增加实用性，还增加了Useful Links和Learning模块。Useful Links主要包含一些常用的网站链接，如Google、Wiki、谷歌翻译、百度翻译等。而Learning模块则是模仿了单词卡功能，通过点击不同按钮，网页会随机从所有单词或表达中选出一个，可以用于自测或复习。具体包括三种模式：复习单词、复习单词(只显示英文)、复习单词(只显示中文)。还有另外的小功能是，每个单词的后面都会有一个灰色的问号，当点击以后会自动打开百度搜索该单词，方便继续查询该单词的更多信息。
2.Python网页生成代码
这一块代码其实并不复杂，主要就是遍历寻找.wd和.exp文件，然后逐个读取其中的内容并合并和排序。然后对处理后的记录进行拆分，最后将它们以文本输出的形式输出成html文件。贴出部分代码如下：
# coding=utf-8
import os
import sys
reload(sys)
sys.setdefaultencoding('utf8')
def findAllFiles(root_dir, filter):
# 将输入字符串同一转成Unicode编码
uni_root_dir = root_dir.decode('gbk')
uni_filter = filter.decode('gbk')
separator = os.path.sep
paths = []
names = []
files = []
for parent, dirname, filenames in os.walk(uni_root_dir):
for filename in filenames:
if filename.endswith(uni_filter):
paths.append((parent + separator))
names.append(filename)
for i in range(paths.__len__()):
files.append(paths[i] + names[i])
paths.sort()
names.sort()
files.sort()
return paths, names, files
def readWordFile(file_path):
file_word = open(file_path, "r")
raw_words = []
word_item = file_word.readline().strip()
while word_item:
raw_words.append(word_item+"$"+file_path)
word_item = file_word.readline().strip()
return raw_words
def separateWordItem(raw_words_list):
words = []
words_prop = []
words_chinese = []
words_file = []
for i in range(len(raw_words_list)):
word_item = raw_words_list[i]
word_show_part = word_item.split("$")[0]
word_file_part = word_item.split("$")[1]
words_file.append(word_file_part)
split_parts = word_show_part.split("\t")
if (len(split_parts) == 1) or (len(split_parts) == 2 and split_parts[1] == ''):
word = word_show_part.strip()
word_prop = ""
word_chinese = ""
elif len(split_parts) == 2:
word = split_parts[0]
word_prop = ""
word_chinese = split_parts[1]
else:
word = split_parts[0]
word_prop = split_parts[1]
word_chinese = split_parts[2]
words.append(word)
words_prop.append(word_prop)
words_chinese.append(word_chinese)
return words, words_prop, words_chinese, words_file
3.JS动态代码
前面提到的Learning功能属于“非静态”功能，因此必须要借助于JS代码实现。这里主要包括随机数生成、获取控件内容、字符串操作、弹窗提醒等。部分代码如下。
function reviewWords() {
var numbers = document.getElementById("numbers");
var str_numbers = numbers.textContent;
var num_word = parseInt(str_numbers.split("and")[0]);
var Range = num_word;
var Rand = Math.random();
var num = Math.floor(Rand*Range)+1;
var word_item = document.getElementById("w_"+num);
var text = word_item.textContent;
var text_content = text.split("[?]")[0]
alert("Word No."+num+"\n----------------\n"+text_content);
}
function reviewWordsEng() {
var numbers = document.getElementById("numbers");
var str_numbers = numbers.textContent;
var num_word = parseInt(str_numbers.split("and")[0]);
var Range = num_word;
var Rand = Math.random();
var num = Math.floor(Rand*Range)+1;
var word_item = document.getElementById("w_"+num);
var text = word_item.textContent;
var word_eng = text.split(" ")[0];
var word_prop = text.split(" ")[1];
var word_chinese = text.split(" ")[2];
if(confirm("See the Chinese meaning?\n------------------------------\n"+word_eng+" ("+word_prop+")")){
alert("Word No."+num+"\n----------------\n"+word_eng+" ("+word_prop+")\n"+word_chinese);
// window.location.href="#w_"+num; 实现页面内跳转功能，但考虑到跳转之后每次都得回到上面，因此不实现
}
}
function reviewWordsChn() {
var numbers = document.getElementById("numbers");
var str_numbers = numbers.textContent;
var num_word = parseInt(str_numbers.split("and")[0]);
var Range = num_word;
var Rand = Math.random();
var num = Math.floor(Rand*Range)+1;
var word_item = document.getElementById("w_"+num);
var text = word_item.textContent;
var word_eng = text.split(" ")[0];
var word_prop = text.split(" ")[1];
var word_chinese = text.split(" ")[2];
if(confirm("See the English word?\n--------------------------\n"+word_chinese)){
alert("Word No."+num+"\n----------------\n"+word_eng+" ("+word_prop+")\n"+word_chinese);
// window.location.href="#w_"+num; 实现页面内跳转功能，但考虑到跳转之后每次都得回到上面，因此不实现
}
}
function searchWords(id_number) {
var word_item = document.getElementById(id_number);
var text = word_item.textContent;
var word_eng = text.split(" ")[0];
var word_prop = text.split(" ")[1];
var word_chinese = text.split(" ")[2];
window.open("https://www.baidu.com/s?wd="+word_eng)
}
这里面除了alert还用到了其它类型的弹窗，比如confirm，关于多种弹窗的介绍可以参考这个网页，写的简单易懂。其它就没有什么很复杂的了，注意控件ID的使用是获取对应内容的关键。另外就是充分利用CSS样式，可以减少大量重复的样式代码定义，进而减小网页大小。
4.总结
以上便是开发的一些简单记录了。如果想进一步了解，可以访问网页直接使用。当然以后可能会遇到一些其它问题，例如当数据量多了以后网页太大、太长，需要考虑自动分页等，但目前还没有这样的烦恼，所以暂时就不实现了。
本文作者原创,未经许可不得转载,谢谢配合
