hints while dev

[gaoryrt]

开一篇记录一下开发时有用的小技巧

[gaoryrt]

生成长度为 n，从 0 自增的数组

有些时候我们没有数组用来遍历，就需要这个来自己构造

[...Array(n).keys()]

[gaoryrt]

响应式 css

比如 a, b 两个状态决定了 div 的四种样式，以前我会写成 <div className={cx('base', a && 'A', b && 'B')}/> 然后再到 css 里用优先级一个个覆盖。

.base {}
.base.A {}
.base.B {}
.base.A.B {} // 优先级顺序还不能变

现在可以这样 <div className='base' data-A={a} data-B={b}>

.base[data-A='true'][data-B='true'] {}
.base[data-A='true'][data-B='false'] {}
.base[data-A='false'][data-B='true'] {}
.base[data-A='true'][data-B='false'] {}

把计算变成了配置，把命令变成了响应
这样直接将状态传递到 css 里再做逻辑，比上面的更清晰，更 THINKING IN REACT.

[gaoryrt]

多个相同样式之间的间距设置

以前写总是用 first-child 反选：

.item { margin-top: 4px }
.item::first-child { margin-top: 0 }

其实可以这样(less)：

.item {
  & + & {
    margin-top: 4px
  }
}

[gaoryrt]

图片元素

比如一个叉叉按钮，原来这么写的

import iconX from '@/assets/close.png
...
return (
  <div>
    <img src={iconX} />
  </div>
)

其实可以这么写

<div className='closeIcon'>

.closeIcon {
  height: 20px;
  width: 20px;
  background: 0 0 / 100% 100% url(@/assets/close.png) no-repeat;
}

样式就全部都分离到 css 中，还有个好处是用户再也不会触发长按下载图片了

[gaoryrt]

空间居中的图片

和上面那条很类似：如果有一个撑满屏幕的 container，正中间一个图片，以前经常写 flex 居中：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    ...
  }
}

其实可以这样，少写一个元素，同时也没有用户可以选中的问题：

.container {
  background: center center / 20px 20px url(...) no-repeat;
}

[gaoryrt]

ts 枚举

总是会忘 ts 有枚举类型，这东西写起来比 js 的优雅一些，至少没有满屏字符串的情况：
before:

interface Prop {
  type: 'a' | 'b' | 'c'
}
...
if (type === 'a') {}
if (type === 'b') {}

after:

export enum PropType {
  A,
  B,
  C
}
interface Prop {
  type: PropType
}
...
if (type === PropType.A) {}
if (type === PropType.B) {}

[gaoryrt]

受控进度条

相信大部分人应该都会直接控制宽度来实现：

<div className={styles.outer}>
  <div className={styles.innter} style={{ width: `${num / total}%` }}/>
</div>

.outer {
  width: 100px;
  height: 10px;
  position: relative
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

这有个问题：当分子num为0，大多时候会展示一个默认最窄的宽度，而不是宽度为0即没有进度条
所以会被改写成：

<div className={styles.outer}>
  <div className={styles.innter} style={{ width: `${7 + (showNum * 93) / total}%` }}/>
</div>

再如果进度条最宽不是100%，那要计算的就更多了……
所以可以这样写：

<div className={styles.outer}>
  <div className={styles.inner} style={{ animationDelay: `-${num / total}s` }}/>
</div>

.outer {
  width: 100px;
  height: 10px;
  position: relative
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  animation: prog linear 1s paused forwards;
}
@keyframes prog {
  0% {
    width: 7%; // 在这里配置起始
  }
  to {
    width: 100%; // 在这里配置结束
  }
}

又把计算变成了配置，把命令变成了响应，很舒服

[gaoryrt]

多个简单值的判断

开发中常见需求可能是这样的：

if (a === 1 || a === 2 || a === 3 || a === 4) {
  // ...
}

变量值如果很长，那代码写起来就很长，不好阅读，其实可以写成：

if ([1, 2, 3, 4].includes(a)) {
  // ...
}

当然有些环境不支持 .includes 方法，换做 indexOf 也是可以的

if ([1, 2, 3, 4].indexOf(a) >= 0) {
  // ...
}

注意只对数字、字符串等简单值有效

[gaoryrt]

正则前向匹配

一个具体的问题：已知字符串

'adj. 普通内容 n. 内容里  有 空格 v.紧跟着没空格n.   english也可以   '

要求将其分成四个词性-内容的子串

'adj. 普通内容 ',
'n. 内容里  有 空格 ',
'v.紧跟着没空格',
'n.   english也可以   '

这时候用正则前向匹配即可，换成人话就是「找到以词性开头，词性结尾（不包括）的字符串」

/([a-z]+\. ?).+?(?=[a-z]+\.)/g

但是单这样不会匹配到最后一个子串：

这是因为最后一个子串没有以词性结尾，我们给他随便补一个就行了：