归档

js实现防抖和节流

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

防抖

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

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

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

Commit log 使用说明

什么是git commit log

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

解决element ui el-select控件多选时option设置为disabled,但可以删除标签,造成无法恢复的bug

问题起因

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

解决思路

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

vue中使用neditor

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

telnet使用简介

端口开通,链接正常

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可退出