5.8 Math.max()以及Math.min，JS原生五大鼠标事件，svg例子，数组洗牌，watch(new, old)

1、通常我们对数据的区间判断，用的是if else语句。并赋值，但是代码较长。且不够优雅。我们可以这么写。

 const offsetWidth = Math.min(clientWidth, Math.max(0, this.touch.left + deltaX))

实现效果：让代码必须大于0且小于clientWidth

2、JS鼠标五大事件，着重强调(mousemove)

mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。
click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick:双击鼠标左键时触发。
mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

我为什么要空出一块地区描述鼠标事件，首先鼠标事件是基础，需牢牢掌握，还有一点就是我一直认为mouseover会持续派发鼠标事件，原来是mousemove。

3、svg案例

 <svg width="32" height="32" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"></circle>
   <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" stroke-dasharray="100"></circle> 
 </svg>

viewBox: svg视口（0,0坐标开始100*100区域）
circle： 圆形标签 r为半径，(cx,cy)处画圆
stroke-width: 表示 描边宽度
stroke-dasharray: 表示描边以及描边距离
stroke-dashoffset: 表示描边的偏移
注：viewBox中的单位不是任何一个已知的单位，数值直接等价于 width=“32” height=“32”，那么circle的r="50"与即直径100，与viewBox的100相match。显示出的长宽就是32px。如果r=200，显示出的长宽就是64px。viewBox相当于比例放大，用于更精细的操作。

实例：播放器圆形进度条

<svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle class="progress-background" r="50" 
     cx="50" cy="50" fill="transparent"></circle>
  <circle class="progress-bar" r="50" 
    cx="50" cy="50" fill="transparent" 
    stroke-dasharray="314" 
    stroke-dashoffset="30"></circle>
</svg>
 // 省略几截代码
  .progress-circle
    position: relative
    circle
      stroke-width: 8px
      transform-origin: center
      &.progress-background
        transform: scale(0.9)
        stroke: $color-theme-d
      &.progress-bar
        transform: scale(0.9) rotate(-90deg)
        stroke: $color-theme 

stroke-dashoffset和stroke-dasharray的配合实现
若不规定，则第二个circle标签会优先覆盖第一个circle标签

4、洗牌算法
先获取区间内的随机数

function getRandomInt(min, max) {
  // Math.random()*(max-min+1)+min 使随机数肯定落在区间内
  return Math.floor(Math.random() * (max - min + 1) + min)
}

export function shuffle(arr) {
  for (let i = 0; i < arr.length; i++) {
    // 将i 与 随机数j 交换
    let j = getRandom(0, i)
    let t = arr[i]
    arr[i] = arr[j]
    arr[j] = t
  }
}

5、vue watch方法可以传2个参数

 watch: {
    currentSong (newSong, oldSong) {
      if (newSong.id === oldSong.id) {
        return
      }
  	}
 }