笔记

防抖和节流是避免过度处理的有效手段。目的就是为了解决一些事件频繁的触发问题。

防抖

先说一下防抖，当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

通俗易懂点就是，领导安排任务，你得等领导全部说完了再去做，不能说一个就跑去做了，你得等领导说完。

举个很典型的例子，搜索提示是个很典型的使用场景。每次输入框的内容发生更改就会发送一个请求，这其实是没有必要的。
理想的方式应该是当用户不在输入时，在发送请求。怎么确定用户停止输入呢？我们定义一个等待时间，比如500ms。当用户停止输入500ms后发送一个请求。
500ms内如果在不停的输入内容，那我们就重新重新计时。

什么是git commit log

git commit log其实就是根据咱们提交的commit message信息进行提取，用来生成更新日志的功能。
既然是要生成，那就一定要有一个格式，否则程序很难自动化的处理。
目前比较常用的是Angular 团队的规范,他的格式也比较简洁。

问题起因

今天遇到一个问题，需求是，客户选择栏目时，不属于自己的栏目不可修改。但需要显示出来。实现需求使用了element ui的el-select组件。
对于已选栏目的显示，和对栏目的选项取消都比较好。不属于自己的栏目使用了option的disabled属性。列表中的选项控制正常，对于disabled属性为true的元素不可选。
但是在展示已选则的栏目时，option中禁用的选项依然有删除的小叉号。而且还是可以使用的，点击后就被删除了。在列表中的选中状态也取消了。这可闹大了，没法恢复啊。

解决思路

思路很简单，在对选项进行移除时做个判断。如果选项是禁用的，就不操作。
实现中用到了value属性，用于显示备选项。change事件用于处理选中的值，remove-tag事件处理移除选项时的判断
有几个问题需要注意，事件的执行顺序是先出发change后出发remove-tag所以要让数据返回变为异步，保证remove-tag事件完成后在返回数据

neditor是从ueditor改写过来了，做了不少优化，我最喜欢的就是去掉了服务端附件配置请求。还有一个有点就是，可以很方便的对接七牛cdn或oss。
如果是简单的使用可以用vue-neditor-wrap,复杂场景下会有bug，所以自己写了个组件，将必要的js引入放到了index.html中。下面是使用注意事项，追后有本示例的源码。

日常打包执行npm run build会将代码打包至dist目录下，各种js引入，均已网站根目录为依据。我们想要把项目作为子目录访问时就需要做些配置了。

端口开通,链接正常

1
2
3
4

telnet 192.168.1.100 62715
Trying 192.168.1.100...
Connected to 192.168.1.100.
Escape character is '^]'.

链接成功，根据提示Escape character is '^]'.可知退出字符为'^]'（CTRL+]）。此时输入其它字符不能使其退出，CTRL+C都不行。输入CTRL+]后会自动执行，进入命令模式，屏幕上出现telnet>字样。需要输入quit才可退出
Escape character提示是自定义的，使用参数-e即可

1
2
3
4
5

telnet -e p 192.168.1.100 62715   #使用p字符
Telnet escape character is 'p'.
Trying 192.168.1.100...
Connected to 192.168.1.100.
Escape character is 'p'.

输入p,会出现telnet>字样，输入quit可退出

代码

父组件调用

1

<list v-model="data" :multiple="true"></list>

子组件list.vue代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<template>
  <el-select v-model="val" v-bind="$attrs" placeholder="请选择">
    <el-option
      v-for="item in list"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
import { getColumnList } from '@/api/column.js'

export default {
  inheritAttrs: false,
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: null
  },
  data () {
    return {
      list: [{id:'1',name:'张三'},{id:'2',name:'李四'}]
    }
  },
  computed: {
    val: {
      get () {
        return this.value
      },
      set (newval) {
        this.$emit('change', newval)
      }
    }
  }
}
</script>