归档
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中。下面是使用注意事项,追后有本示例的源码。
使用vue cli 3项目打包到指定目录
日常打包执行npm run build
会将代码打包至dist
目录下,各种js引入,均已网站根目录为依据。我们想要把项目作为子目录访问时就需要做些配置了。
telnet使用简介
端口开通,链接正常
1 | telnet 192.168.1.100 62715 |
链接成功,根据提示Escape character is '^]'
.可知退出字符为'^]'
(CTRL+])。此时输入其它字符不能使其退出,CTRL+C都不行。输入CTRL+]后会自动执行,进入命令模式,屏幕上出现telnet>
字样。需要输入quit
才可退出Escape character
提示是自定义的,使用参数-e
即可
1 | telnet -e p 192.168.1.100 62715 #使用p字符 |
输入p
,会出现telnet>
字样,输入quit
可退出