多目标测评项目总结

最近刚做完一个项目的新功能，这里总结下。

项目名称：360 度测评

项目时间：历时 67 天（2 个月 17 天）

项目背景

为了弥补目前我们的测评系统的功能缺失，补全我们测评系统一些高级功能的缺失，需要多目标测评的功能。

之前做的都是测评都是“自评”，跟“考试”很像，现在需要做“他评”，就是评价他人。而且还需要“互评”，也就是几个人之间互相评价。

由于评价他人可能会评价很多，所以就是同时对多个目标进行测评。

其中典型的使用场景有：

•360 度测评（一个公司的上级，下级，同事之间互相测评）•教学测评（很多学生评价很多老师）

项目参与人员：

•共 3 人•前端 1 人•后端 1 人（兼产品）•测试 1 人•UI 1 人

我的角色：

•负责项目前端界面的展示以及交互功能的实现。

项目目标

项目的目标就是完成多目标测评的基本功能，内容大概包括 3 个场景：

•360 度测评•教学测评•自定义测评

主要功能点包括：

•测评关系的设置•出题•题目维度设置•试卷的设置•登录界面的选择测评目标•测评完毕后的概况和分析

项目进展

首先先写文档，列出：

•都有哪些界面•每个界面需要的功能•以及每个功能可能涉及的技术点，可能存在困难的地方。

越详细越好，如果能达到伪代码级别最好，细到写伪代码的程度，才能发现技术实现问题和难度问题！

然后才是写代码。

其实写代码的过程就是把文档实现的过程。先有文档，才能照着文档执行。

项目主要的重点和难点：

•前端关系界面的搭建•后端测评完毕后的分析

遇到的困难和解决方式：

1、关系的拖拽功能

之前想的是使用 jQuery-UI 的draggable功能实现，后来因为 jQuery-UI 的拖拽功能是只移动了 dom 元素，实际的数据并没有移动，所以需要在拖拽后的事件中进行处理，非常麻烦。

后面发现了Vuedraggable插件，不仅 dom 会移动，对应的数据也会移动，这就省了很多后续的操作。

2、对象的排序

最开始在设计关系设置界面保存的数据结构的时候，没有考虑到排序的情况，导致设计的数据是一个对象，而我们知道，对象是没有顺序的，对象的顺序是首字母的 ASCII 排序，而且在使用for..in..遍历的时候也是按照这个顺序来的。

但是这个时候已经完成了很多功能，没办法只能改成数组的形式，导致后续改动代码量很大。

3、表格滚动时第一列冻结

当关系很多，表格很宽的时候，需要显示滚动条，而第一列要么是测评目标，要么是班级，是很重要的数据，需要和后面的进行比对，所以滚动的时候第一列冻结有利于关系的观察。

但是由于设计的时候，是使用 div 模拟的表格，一行对应一条数据和保存时候的关系数据结构是对应的，所以不好实现第一列冻结效果。

后面想了个办法就是第一列定位，后面的 padding-left 处理，效果不错。

但是有个问题是后面的行高变化的时候，第一列对应的行高不会变化，以为第一列已经脱离了原先的 div 了，怎么办呢？

解决办法是：当右侧有一些改变行高的操作的时候，就遍历后侧每行的行高，然后对应设置到第一列的每一行的行高上。

于是，我设计了一个函数setFrozenHeight()，专门用于设置第一列每一行的高度。

虽然复杂，但是挺奏效，目前还没想到更好的办法。

4、实现两个 textarea 等高

由于关系设置中有文本编辑的功能，需要多个并列的 textarea 是等高的，但是由于 textarea 的宽高是由父元素的宽高决定的，当宽高不够时会自动换行。

解决办法：文本框高度设置 100%，然后过 js 检测文本的高度，然后动态设置文本框父元素的高度。

之前也写过一篇博客讨论textarea 的高度自适应^[1]。

暂未解决的遗留问题：

1、ie 火狐等浏览器文本编辑关系时 enter 不能换行

遗留问题：

•设置了white-space: pre; IE 无效•设置了white-space: nowrap; chrome 还是可以换行

2、批量编辑，多个文本框编辑，肉眼很难对上，如何高亮显示同一行？

我的思路：

•方式一：定位光标的位置，然后设置一个 div 定位在高亮的 top 位置。•方式二：定位鼠标的位置，鼠标移上去，然后设置一个 div 定位在高亮的 top 位置。

结果与反思

结果：

多目标的基础功能已经实现，大的框架已经搭建完毕，后续就是小功能改进，bug 的修复。

总结：

0、写代码前先写文档，代码就是对文档的实现过程。

1、代码需要适当拆分，方便后期阅读和维护

之前 360，teacher，diy 都写在一个manggoal-relationship-setting.vue文件里面，导致项目非常庞杂，导出充满着v-if="type === teacher" 这种判断代码，以及l_ansim ，leftmod这种判断是在左边还是右边，是 ans 还是 aim，是 ansermod 还是 aimmod 等判断代码，难以阅读和维护，拆分成 2 个文件

•360 和 diy 共用一个•teacher 一个

360 和 diy 的区别仅在于：

•360 的测评目标是 1 个，diy 可以有多个

2、代码复用

拆分出的两个文件存在一些共用的方法或者样式，比如生成唯一随机 ID 的方法等，可以提出来，做到代码复用。

一些界面，比如输入框，下拉菜单等也可以封装成组件进行调用。

3、Map 对象

对象的排序有时候不一定非要使用数组，有时候使用 Map 对象也是可以的。Map 对象能够记住键的原始插入顺序。

4、如何更好的添加数据辅助字段^[2]

以上。

引用链接

[1] textarea 的高度自适应: https://daotin.github.io/2021/06/28/textarea内容自动撑开高度-实现高度自适应.html
[2] 如何更好的添加数据辅助字段: https://daotin.github.io/2021/06/21/如何更好的添加数据辅助字段.html

--- End ---

你好，我是前端队长Daotin，专注分享前端与认知。希望在这里，和你分享我的前端学习和工作经验，记录个人成长。

想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。