代码水平 | 青空

点击事件（事件代理）

当给一个元素数组注册事件的时候我们通常都会这么写

javascript

options.forEach(element => {
    element.addEventListener("click",()=>{
  		options.forEach(item => item.classList.remove("active"))
    	this.classList.add("active")
    })
});

变相的我们可以给它的父元素绑定事件，从而来达到同样的效果

javascript

option.addEventListener("click",(event)=>{
	options.forEach(item => item.classList.remove("active"))
	event.target.classList.add("active");
})

一样的代码却少了一个循环，但是低版本的IE不兼容

去除空白字符

假设有这么一个数据，每个字符串都有许多空白字符

javascript

1	const arr = ["1 "," 2"," 3 ","4 ","5 "]

以前我们会这么做：

javascript

1	arr.forEeach(item => item.replace(" ",""));

现在我们可以使用：

javascript

1	arr.map(item => item && item.trim());

这种并不是说专门用来去除空白字符的，只是运用了与或非让写法

复习一下：

a && b，如果a为true则返回b，反之

a || b，如果a为true则返回a，反之

重复性

如果一个事件要重复某个动作时，

Vue中hook

Javascript

<script>
  export default {
    mounted() {
      this.timer = setInterval(() => { ... }, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

Javascript

<script>
  export default {
    mounted() {
      const timer = setInterval(() => { ... }, 1000);
      this.$once('hook:beforeDestroy', () => clearInterval(timer);)
    }
  };
</script>