网易有道四六级模考项目总结

[xingbofeng]

技术选型

由于这个项目其中涉及到大量的单选题、文本题做题逻辑，即是v-model实现的v -> vm的绑定，选择Vue这一轻量框架作为项目技术栈是毫无疑问的。

单选题效果当然是下面这样：

项目搭建

由于此项目是针对之前用React做的有道精品课 - 模考系统的wap版本改版工作，后端接口已经可以完全照搬之前的接口。项目初期是由我负责项目搭建。也算是第一次自己架构公司的商业项目吧。使用的依旧是之前自己写的豆瓣 - 电影和一个的搭建模式。

其中遇到的一些问题：

• 没有提前规划好组件就开始写(这真的跟搬砖没什么区别)。
• 没有注重组件的复用性：如单选题组件在选择时和答案解析时我分了两个组件，其实它们完全可以划分为一个组件的两种状态。
• 本地存储方法应该用封装好的storage，我却私自引入了store.js。
• 过多的代码放在同一个文件内，比如单选题，多选题都放在一起，直接在容器组件写的v-for，其实容器组件里应该只放展示组件。

团队的分工协调

前期团队的分工协调方面没处理好。因为开发只有我和一个刚入职的北邮毕业的大姐姐，而我们两个在项目管理方面的经验确实都是不足的。前期没有很好地把每个人应该负责的模块分离出来，耽搁了一些时间也造成了一些冲突。

最后是独立出来单个页面的分工方式，我负责测试结果页和答题卡/解析页，她负责入口页和倒计时页。在UI出图之前也算是基本完成了功能开发的工作。

review与收获

切换部分的逻辑

这是之后review过的代码：

之前我的写法是：判断status分别为1、2、3......的时候展示不同的text，但根本没想到可以用一个数组把里面的东西包裹起来，这样就没有难看的条件判断了。可以参见JavaScript：少一点条件语句这篇文章，大概意思就是用对象把条件判断包起来。

挂一挂之前的辣鸡代码吧：

提取正确答案

之前拜读过学校前端交流群的幽灵大大的博客的一篇文章思考题：嵌套数组打平。没想到这次真的用到了项目当中。

看以下这一段后端返回的数据：

大概意思就是：我们需要从exam_content里的listening / reading 的 sectionA / sectionB / sectionC 里面提取出answer字段。嵌套方式完全不一样，部分还有parts字段。

我们看一下之前Web版模考的代码(基于React)：

大概就是(各种判断 / 各种递归遍历)，可读性大大降低。

受到之前的启发，采用JSON.stringify + 正则表达式提取正确答案，性能得到优化，代码更加简洁：

轮询查询成绩

项目中遇到的另一个问题是：我按照正常步骤进行异步处理，在异步任务执行的顺序没有问题的情况下获取不到批改后的答案。

后来问了前人才知道，本项目中的作文批改模块调用了批改网的接口进行作文批改，然而这个接口返回数据很慢，我们这边的接口并不能等待其返回数据。因而出现了这样的情况。

解决的办法当然是轮询查询成绩咯。

代码结构复杂

关于组件的划分

如这一段，写在容器型组件里面就很乱、导致后面很不好维护：

其实在这里应该写成(以下是review后的代码)，使用Choices.vue组件存放全部Choice.vue选择题组件，这样免得全部写在容器型组件内造成和Writing.vue组件的冲突：

slot分发

另外这里使用slot分发数据也是必要的(其也可以单独构成一个组件)：

然后再在Choice.vue里面分开写v-for：

强行去取router对象在action里面传参

其实可以直接引入router/index.js里面就是router对象了……

import router from '../router';

在入口页根据localStorage判断状态然后进入哪个页面

原因是我不知道next()可带参数啊……惨

getters结构很乱

getters的作用就是对每个部分进行每个部分数据的提取，不是一下给出所有数据！

在路由处commit而不是在action中commit

其实把回调函数以参数形式传到action里面就行的啊。。

总之自己在这个项目的review中学到很多东西，未来应该更加注意代码结构才对啊！