居中对齐

关于水平居中对齐、垂直居中对齐，什么margin: auto、line-height…都被总结烂了，这里只列举一种最通用的：在不定宽高的情况下，水平垂直居中一个元素（用这种方法父元素和子元素都需要设置样式）：

1
2
3
4
5
6
7
8
9
.father {
  position: relative;
  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

搞定！前几年css3的普及程度不高，所以大家嫌写前缀麻烦都不喜欢用这种方式，现在都什么年代了，所以，大胆用起来！说一说我喜欢这种方式的理由吧：
其一，“不定宽高”，自由洒脱，放荡不羁，这一点还不够吸引人么。
其二，这是一段可以靠理解来记忆的css代码，首先，让子元素脱离文档流，但是定位还是要相对于父元素，因而有了.father {position: relative;}和.child {position: absolute;}；然后，让子元素大体上居中.child {top: 50%; left: 50%;}；最后，我们来考虑子元素的宽高问题，让多移动的部分“缩”回去，实现子元素真正“居中”.child {transform: translate(-50%, -50%);}。

利用vw实现宽度铺满，固定宽高比的背景图

在一些场景中（如轮播图），我们时常需要图片宽度铺满屏幕，而宽高比为固定值，如4:3，2:1等。此时，vw就派上用场了，vw(viewport width)是视口宽度单位，100vw时宽度铺满屏幕。
要实现宽度铺满屏幕，而高度随宽度自适应并保持一定的比例，可采用下面的方式：

1
2
3
<a class="item" href="www.baidu.com">
  <div class="img" style="background-image: url({{imgUrl}})"></div>
</a>

1
2
3
4
5
6
7
8
9
10
11
.item {
  display: block;
  overflow: hidden;
  width: 100vw;
  .img{
    width: 100%;
    height: 75vw;
    background-size: cover;
    background-position: center;
  }
}

利用padding实现固定宽高比的背景图

padding在使用百分比设置的时候是相对于宽度来计算的，利用这一点，可以实现固定宽高比的背景图。

1
2
3
4
5
6
7
.img{
  width: 100%;
  height: 0;
  padding-top: 75%;
  background-size: cover;
  background-position: center;
}

利用flex实现每行n个盒子的布局

以下代码实现了每行三个盒子的布局，当盒子高度不一致时，所有盒子的高度都以最高的那个为准

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  &::after { // 添加伪元素解决最后一行为两个盒子时，两端对齐的问题
    content: "";
    width: 31.5%;
  }
  .item {
    width: 31.5%;
  }
}

js四则运算丢失精度

实现加减乘除运算，不丢失精度
思路：把小数放大为整数（乘），进行算术运算，再缩小为小数（除）

复杂一点，使用mathjs库，简单包装下加减乘除，可链式调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import math from 'mathjs'

export const operator = (type) => (...values) => {
  if (values.length <= 1) return 0

  values = values.map(num => math.bignumber(parseFloat(num)))
  let res = math.chain(values[0])
  for (let i = 1, len = values.length; i < len; i++) {
    res = res[type](values[i])
  }
  return isNaN(math.format(res.done())) ? 0 : math.format(res.done())
}

export const add = operator('add')
export const subtract = operator('subtract')
export const multiply = operator('multiply')
export const divide = operator('divide')

export default {
  add,
  subtract,
  multiply,
  divide
}

日期的moment遇到一个坑

1
2
3
4
const initialTime = moment(time)
let varTime = initialTime
// 这样的话，后面再用moment会改变initialTime的值
// 对象、指针那样的，不小心就改变了值
1
2
3
const initialTime = time
let varTime = moment(initialTime)
// 应该这样使用