作业
问题描述
- 研究对象:测测你的本命专业
- 研究对象链接:https://cdn-act.knowyourself.cc/life_profession/
- 描述:运用所学的知识对“测测你的本命专业”进行分析(反向工程)。
要求
- 发一篇博客。
- 在博客中应当描述清楚技术路线。包括自己所尝试的所有技术路线(包括成功的和失败的)。
- 在博客中应当包含对“测测你的本命专业”中算法的分析。
- 在博客中应当记录所花费的时间。
- 截止日期9月15日23时59分59秒(以发博客的时间为准)。
作答
技术路线
1.使用浏览器打开该网站,右键点击检查,进入在开发者工具。
2.在开发者工具界面中,在该网站输入信息,完成测试。在选择选项的过程中,对元素进行检查,发现选择项元素的类名更改,新增“selected”,如图1 所示。
![](https://i-blog.csdnimg.cn/blog_migrate/a4dfbed84184f3307e3811da312e7d3f.png)
图1 类名更改
3.进入控制台,重新完成一遍测试,观察每次选择后传出的数组,结果如图2所示。观察并分析可知,填空题填写的<名字><性别>、序号为10的选择题,未在控制台中打印数据,即不影响结果。<性别>和序号1-9的选择题,共10题影响测试结果。
![](https://i-blog.csdnimg.cn/blog_migrate/46912ea1ab4fffa0756fbc4c867dccd5.png)
图2 控制台打印数据
4.按下“ctrl”并鼠标左键点击目标文件,目标文件如图3所示。跳转后界面如图4所示。
-
该测试网站使用了“React”、“html2Canvas”等库。
-
猜测当前路径的 ‘./result’ 、’…/p-2/q-10’的两个文件,包含该网站的核心算法。
-
select.slice(1) ,使得result函数的参数传入值,变为原select索引值为1至末尾。即切片<性别>选项,它不再影响结果。
![](https://i-blog.csdnimg.cn/blog_migrate/90e2c427ff842c4d6ff5049b1692f58a.png#pic_center)
![](https://i-blog.csdnimg.cn/blog_migrate/a36819dabb71a352272f4c4e975c1908.png#pic_center)
5.根据路径找到"result.js"文件,页面显示如图5。进行算法分析,可知该文件是对所选选项信息的处理,测试网站的算法是在前端处理并显示的。
![](https://i-blog.csdnimg.cn/blog_migrate/3b4601d609f1ae9e24242b7aeffca485.png#pic_center)
图5 result.js
算法分析
- getResult()函数
- 参数:select。具体指传入数组,用户对序号1-9选项的选择值。多选题时,数组内套数组。
- 输出:max。具体指已选频率最高的数字编号,即最终结果的专业编号。
- 变量config:定义索引值0-9题目的每个选项对应的多个专业编号,存储于数组中。索引为9的各选项未赋值,验证(最后一个)序号为10选择题不影响结果。
- 变量result:将用户每道题已选择的对应专业编号,连接并存放于数组中。
- 对象result_map:记录"result"数组中各专业编号[key],以及各专业编号出现的频率次数[value]。
- 算法过程分析
①定义函数shuffle(),对数组的原型链上添加一个shuffle方法,实现打乱元素顺序的功能。
②定义变量config、result。
③对于每次传入的参数select,进行遍历,获取它对应的每个专业编号,以数组的形式存于变量tmp。完成测试后,所有题的所选选项的对应的专业编号连接起来,存储于result中。
④定义变量config、result。
⑥定义对象result_map,定义变量max并初始化赋值-1。
⑦对result执行shuffle函数,即打乱数组result中各元素。
⑧遍历数组result,用result_map存储result中互不相同的专业编号,用max存储各专业编号的频率,相关代码如图6所示。
result_map中,依次进入result数组的每个专业编号,如果key[第一次进入的专业编号],value赋值为0,再+1,其value值变为1;如果key[已经含有的专业编号],其value值+1。
max 先赋值为result数组(打乱后)中第一个专业编号。如果两个result_map对象的value不同,将vaule更大的key[专业编号]赋值于max;如果两个result_map对象的value相同,则不做处理,(随机打乱后)序列在前的key[专业编号]赋值于max。最终,result_map中[value]最大的专业编码[key],赋值于max变量。
![](https://i-blog.csdnimg.cn/blog_migrate/785a70dac54c22098b678ea06e458a79.png#pic_center)
图6 max逻辑代码
- 测试
根据”result.js“中的测试数据,如图7所示。选择对应的选项,进行测试。可得出最后的测试专业与专业代码所对应。故,上文算法分析正确。
![](https://i-blog.csdnimg.cn/blog_migrate/e5f7034640c502c7eb044b03d8735922.png#pic_center)
图7 测试用例
PSP
任务 | 开始时间 | 结束时间 | 中断时间/min | delta时间/min |
---|---|---|---|---|
调试网站 | 9. 11 14:25 | 9. 11 15:30 | 5 | 65 |
算法分析 | 9.13 19:24 | 9.13 21:15 | 5 | 106 |
写博客 | 9.13 22:00 | 9.13 24:08 | 5 | 123 |
博客格式调整+修改 | 9.14 7:55 | 9.14 8:32 | 0 | 37 |
总计 | 331 |
备注
- 要分析什么,有哪些主要的技术路线,猜测的技术路线、希望如何设计实验验证。
- 网络分析要充分,有细节。过滤了哪些条件,实验过程中用户如何操作。
- 核心代码部分,要有分析。
- 代码怎么跑的,数据流图和流程图什么样。
如果非常朴素,那么,“你”能迅速实现么?
如果你能够迅速实现,能否迅速写出引擎或者代码生成器,用于批量生产和部署。 - PSP中,若中断时间大于5分钟,应分为两条记录。
- 使用 ”Save All Resource“ -google浏览器应用市场,批量下载源文件.可获得所有源码,但是缺少相关package.json(定义项目所需要的各种模块,以及项目的配置信息),无法运行。
- 技术 react ,文件格式:tsx,react文件的写法之一。用js文件运行html ,并加入了ts类型