周报

Published by powerfulyang on Oct 14, 2022

2022-10-14

Concept

  1. 关于 vertical-align 的使用，Line-relative values 不会改变基线，之后元素不会被影响。Parent-relative values 会改变基线，之后的元素默认会按照该元素对齐。
    • Parent-relative values
      • baseline
      • sub
      • super
      • text-top
      • text-bottom
      • middle
      • <length>
      • <percentage>
    • Line-relative values
      • top
      • bottom
  2. 关于 scrollIntoView 的使用。

vertical-align

inline element 可以使用 vertical-align 竖直对齐

codepen
1<iframe height="300" style="width: 100%;" scrolling="no" title="vertical-align-demo" src="https://codepen.io/powerfulyang/embed/abGrBmY?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
2  See the Pen <a href="https://codepen.io/powerfulyang/pen/abGrBmY">
3  vertical-align-demo</a> by powerfulyang (<a href="https://codepen.io/powerfulyang">@powerfulyang</a>)
4  on <a href="https://codepen.io">CodePen</a>.
5</iframe>

scrollIntoView

Syntax:

js
1scrollIntoView()
2scrollIntoView(alignToTop)
3scrollIntoView(scrollIntoViewOptions)
  • alignToTop(Optional)
    • true, Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
    • false, Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.
  • scrollIntoViewOptions(Optional)
    • behavior(Optional)
      Defines the transition animation. One of auto or smooth. Defaults to auto.
    • block(Optional)
      Defines vertical alignment. One of start, center, end, or nearest. Defaults to start.
    • inline(Optional)
      Defines horizontal alignment. One of start, center, end, or nearest. Defaults to nearest.

每日一题

Tree and List

js
1const root = {
2    pId: 0,
3    id: 1,
4    title: '1',
5    children: [
6        {
7            pId: 1,
8            id: 2,
9            title: '1-1',
10            children: [
11                {
12                    pId: 2,
13                    id: 3,
14                    title: '1-1-1'
15                }
16            ]
17        },
18        {
19            pId: 1,
20            id: 4,
21            title: '1-2'
22        }
23    ]
24}
25
26const list = [
27    {
28        pId: 0,
29        id: 1,
30        title: '1'
31    },
32    {
33        pId: 1,
34        id: 2,
35        title: '1-1'
36    },
37    {
38        pId: 2,
39        id: 3,
40        title: '1-1-1'
41    },
42    {
43        pId: 1,
44        id: 4,
45        title: '1-2'
46    }
47]
48
49function treeToList(t) {
50    const list = [];
51    const helperQueue = [t];
52    while (helperQueue.length) {
53        const node = helperQueue.shift();
54        list.push(node);
55        if (node.children) {
56            helperQueue.push(...node.children);
57            delete node.children;
58        }
59    }
60    return list;
61}
62
63function listToTree(l) {
64    const helperMap = new Map();
65    let root;
66    for (const item of l) {
67        helperMap.set(item.id, item);
68        if (item.pId === 0) {
69            root = item;
70        }
71    }
72    for (const item of l) {
73        const parent = helperMap.get(item.pId);
74        if(parent) {
75            if(!parent.children) {
76                parent.children = []
77            }
78            parent.children.push(item)
79        }
80    }
81    return root;
82}