Live Note

Remain optimistic

Posted on Edited on In

type="module"

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script type="module">
      // will not block the button
      console.log(this) // undefined
      console.log(import.meta.url) // the url of import file
    </script>
    <script>
      // will block the button
      console.log(this) // window
    </script>

    <script async type="module" src="http://example.com/test.js">
      // will run immediate when the file is load
      // example.com needs the Access-Control-Allow-Origin flag
      import {sayHi} from 'sayHi' // this will get error because no path import in this module block.
    </script>

    <script nomodule>
      alert("The Browser can not support the module import.")
    </script>
  </head>
  <body>
    <button>Button</button>
  </body>
</html>

Posted on Edited on

开始新一轮的学习

大晴天，白天上课，晚上班会。在傍晚时发现了有一丝的腰疼。晚上回到寝室突然又有点心绞痛的迹象···。
年纪轻轻应该不会有大碍，应该吧···毕竟也没有去检查过身体。
今天开始应该会把兼职辞了，开始新的学习吧。驾照什么的···就留着寒暑假有空再说吧。

date: 22:35 2018/10/30

Posted on Edited on In

parseInt 中塞 number

1
2
parseInt(0.000001) // 0
parseInt(0.0000001) // 1

为什么会得到这样的结果？

  1. parseInt(arg: string)：接收的是一个string变量。
  2. 0.0000001转成string会变为1e-7。
  3. parseInt('1e-7')结果为1。

所以要截取小数，最好还是使用Math.trunc(n)

Posted on Edited on In
  • before: abcd
  • after: acdb

===第一轮遍历开始===

a（之后）vs a（之前）
key 不变，可复用
此时 a 对应的 oldFiber（之前的 a）在之前的数组（abcd）中索引为 0
所以 lastPlacedIndex = 0;

继续第一轮遍历…

c（之后）vs b（之前）
key 改变，不能复用，跳出第一轮遍历
此时 lastPlacedIndex === 0;
===第一轮遍历结束===

===第二轮遍历开始===
newChildren === cdb，没用完，不需要执行删除旧节点
oldFiber === bcd，没用完，不需要执行插入新节点

将剩余 oldFiber（bcd）保存为 map

// 当前 oldFiber：bcd
// 当前 newChildren：cdb

继续遍历剩余 newChildren

key === c 在 oldFiber 中存在
const oldIndex = c（之前）.index;
此时 oldIndex === 2; // 之前节点为 abcd，所以 c.index === 2
比较 oldIndex 与 lastPlacedIndex;

如果 oldIndex >= lastPlacedIndex 代表该可复用节点不需要移动
并将 lastPlacedIndex = oldIndex;
如果 oldIndex < lastplacedIndex 该可复用节点之前插入的位置索引小于这次更新需要插入的位置索引，代表该节点需要向右移动

在例子中，oldIndex 2 > lastPlacedIndex 0，
则 lastPlacedIndex = 2;
c 节点位置不变

继续遍历剩余 newChildren

// 当前 oldFiber：bd
// 当前 newChildren：db

key === d 在 oldFiber 中存在
const oldIndex = d（之前）.index;
oldIndex 3 > lastPlacedIndex 2 // 之前节点为 abcd，所以 d.index === 3
则 lastPlacedIndex = 3;
d 节点位置不变

继续遍历剩余 newChildren

// 当前 oldFiber：b
// 当前 newChildren：b

key === b 在 oldFiber 中存在
const oldIndex = b（之前）.index;
oldIndex 1 < lastPlacedIndex 3 // 之前节点为 abcd，所以 b.index === 1
则 b 节点需要向右移动
===第二轮遍历结束===

最终 acd 3 个节点都没有移动，b 节点被标记为移动

Posted on Edited on

开店第一天

  • 确定了店名，就叫 Edward Store，暂时当个杂货铺吧，后期需要转型的话也方便。
  • 注册域名。
  • 开 Shopify 店铺。

已完成事件

  • 注册域名
  • 注册 shopify 店铺