谈近四个月学 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 技术就一定要好好加油，继续不能松懈，比你还牛的人还在努力，你没有任何道理可以松懈下来！要多反思自己，把不好的习惯及时改掉！总结下来，我可以不会，但不能不想学，反而一定要因为不会，所以才更应该努力的去学！