谈近四个月学 web 的感受和反思

不知不觉已经学 web 技术半年了,反思近来做的事,从之前对各种技术的一概不知道,慢慢到现在知道该如何去学习,去解决一些问题,尽管是一些简单的问题,但是却需要我去花大量的时间去解决它,每次解决的过程都收获很大。


Cypress

先从最近的来说,最近写了很多的前端测试案例,从刚开始写的时候只会跟着文档,和已经写好的一些案例来模仿,再到之后提交到 github 上时,CI 测试各种失败的过程,我越发觉得 web 技术是一门非常严谨的技术,可能一点的逻辑问题就会造成案例在 CI 中的失败,列举一个困扰我很久的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
Cypress.Commands.add('configurePlugins', (cases) => {
const timeout = 300;
const domSelectors = {
name: '[data-cy-plugin-name]',
parents: '.ant-card-bordered',
drawer_wrap: '.ant-drawer-content-wrapper',
drawer: '.ant-drawer-content',
switch: '#disable',
close: '.anticon-close',
};

cy.get(domSelectors.name, { timeout }).then(function (cards) {
[...cards].forEach((card) => {
const name = card.innerText;
const pluginCases = cases[name] || [];
// eslint-disable-next-line consistent-return
pluginCases.forEach(({ shouldValid, data, type = '' }) => {
if (type === 'consumer') {
return true;
}

cy.contains(name)
.parents(domSelectors.parents)
.within(() => {
cy.contains('Enable').click({
force: true,
});
});

// NOTE: wait for the Drawer to appear on the DOM
cy.wait(300);
cy.get(domSelectors.drawer, { timeout }).within(() => {
cy.get(domSelectors.switch).click({
force: true,
});
});

cy.window().then(({ codemirror }) => {
if (codemirror) {
codemirror.setValue(JSON.stringify(data));
}
cy.get(domSelectors.drawer, { timeout }).within(() => {
cy.contains('Submit').click({
force: true,
});
});
});

cy.wait(300);
if (shouldValid === true) {
cy.get(domSelectors.drawer).should('not.exist');
} else if (shouldValid === false) {
cy.get(this.selector.notification).should('contain', 'Invalid plugin data');

cy.get(domSelectors.close).click({
force: true,
multiple: true,
});

cy.get(domSelectors.drawer, { timeout })
.invoke('show')
.within(() => {
cy.contains('Cancel').click({
force: true,
});
});
}
});
});
});
});

在中间 wait() 部分,因为少了两个 should() 来确保点击前 dom 元素已经出现,我不得不使用两个 wait() 来解决它在 CI 测试中失败的问题,在我重新翻阅 cypress 的官方文档,和看了几个其他写测试的 PR 之后我才明白问题的关键所在!

接着我将 wait() 换成:

1
cy.focused(domSelectors.drawer_wrap).should('exist');

顺利解决了此问题。

后来我又重新的翻阅 cypress 的官方文档后,去阅读更深层的测试 dom 的原理,发现应该尽可能多地在测试中使用 should 方法,来确保每一个 dom 元素的出现,再继续进行后面的测试,以及我们不应该使用 wait 方法在测试中,我们不必花费任何的时间去做多余的等待,经过这点我对 weadb 技术有了更深一步的认识和了解,我们不仅应该确保测试的正常运行,还需要提高测试的稳定性,和完整性。因为它是一门非常严谨的语言!

Fix: Bug

还有一件令我很有感触的事情,之前我一直很疑惑为什么读别人写的代码,抄别人写过的代码也可以学习很多东西,直到在之后处理一个控制台上的,插件 bug 的这个过程中,我有了非常深刻的认识:

  1. 首先,我必须了解有关这个 bug 部分代码的每一行代码的作用。也就是读懂每一行代码的功能。
  2. 其次,我需要明白出现 bug 的原因是什么,有可能是那部分的功能影响到它,以及我需要准确的找出它所在的位置,这更加考验了阅读代码的能力,与理解能力。
  3. 接着,需要将重点关注的地方,一个一个打印出来,来确认是否是这些地方出现的问题,加以分析解决。
  4. 最后,就是通过对整个过程的理解和分析,来确认问题出现的关键,往往正确找到问题的所在,就可以顺利的解决问题!

整个过程下来,的确可以学习很多东西,又可以加深对代码的理解,还可以学到自己未能注意到的地方!

从 Review 中学习

再然后就是帮别人 review 代码的过程,这个过程我同样是颇有感触,一件未做过的时候,第一次做的时候一定要花费足够的时间去处理它,因为你不知道你会遇到什么问题,更不可大意对待它!

帮别人 review 的过程中,需要更加的认真和仔细,不明白的地方要敢于去询问,询问的过程也是学习的过程,而且在看别人写的代码的过程中,可以学到很多自己未曾注意到的地方,确确实实,相同的功能,每个人写出来的代码可能会各有差异,这也让我体会到了,这门技术的广泛与强大!

反思总结

最后,总结反思几件生活中所遇到的事情。

第一,答应过别人的事情,一定一定要做到,如果确确实实有困难,也一定要提前及时的说出来告知对方,绝对不要因为自己错误的计算时间,计划事情而耽误别人,这样不但丢了信任,还会耽误到别人!

第二,做每一件事不可因为简单,就大意对待,反而应该更加的去注意,不要犯一些小差错,往往小差错会产生更大的问题,务必要谨慎对待,细心检查!

第三,计划事情一定要留出充分的时间,当前一件事情被耽搁的时候,要考虑充分,及时做出合理安排,立马去做放下它,去做别的事情,许多事情是一个循序渐进的过程,不能因为自己的倔强和死磕,而耽误其他事情的进行,这样只会把事情越积攒越多,反而会耽误更多的事情!

第四,自己说过的话就一定要完成它,不要随意的立下目标,说话要考虑充分,少一些急躁,多一些沉稳,要考虑清楚再说。

第五,做开发的过程,一定要先想清楚再动手,不要盲目的去尝试,严谨的技术,不是靠试出来的,要先分析清楚,想明白逻辑,要养成画草图的习惯,再动手去做,这样才能更加的有效利用时间,不会做很多的无用功!

最后,既然决定学习 web 技术就一定要好好加油,继续不能松懈,比你还牛的人还在努力,你没有任何道理可以松懈下来!要多反思自己,把不好的习惯及时改掉!总结下来,我可以不会,但不能不想学,反而一定要因为不会,所以才更应该努力的去学!