随笔分类 -  JavaScript

react中ant-design组件实现textarea获取光标位置并插入表情图片
摘要：最近在我们的service后台做了个实时聊天的需求，类似于微信网页版，里面有个输入框，在输入框里面可插入表情，调研了一下发现微信的表情一部分是微信自带的表情，还有一部分是emoji表情，需求没有那么多要求，只支持emoji表情即可，总结一下这个小功能，还挺有意思的 在这里不总结聊天输入框了，因为还适 阅读全文
posted @ 2020-03-06 20:19 Katydids 阅读(9273) 评论(1) 推荐(0)
前端日志埋点优化
摘要：前一段时间查看前端日志监控的时候发现，有很多关键业务节点埋点及用户行为轨迹数据丢失，而且丢失率达到16%这么高，梳理了一下工程里的前端埋点逻辑及方法，发现存在很大漏洞，做了一期优化，使得日志丢失率不足0.1%，使用了浏览器提供的发送保障的更简洁的sendBeacon方法，以下是对sendBeacon 阅读全文
posted @ 2020-01-16 12:35 Katydids 阅读(1354) 评论(0) 推荐(0)
iframe父子页面通讯
摘要：由于公司的service后台，是前端搭的架子，里面各个tab菜单栏都是不同的工程，通过iframe来嵌套，在业务越来越复杂的情况下，总是避免不了iframe之间的通讯， 下面是两种iframe之间的通讯： 1、父子iframe通过监听来实现 在iframe的子页面里使用postMessage向父级页 阅读全文
posted @ 2019-10-29 20:38 Katydids 阅读(1006) 评论(0) 推荐(0)
在textarea里实现获取光标位置和选中内容
摘要：在我们的service后台，使用jQuery写了一个微信聊天的网页版，嵌在了我们的后台系统里，如下图所示： 今天临时加了一个这样的优化，在输入框里复制粘贴过一段文字过来之后，运营要直接在输入框里排版，既可以使用Alt+Enter实现回车，又可以在中间插入表情。然后我发现了selectionStart 阅读全文
posted @ 2019-08-06 22:40 Katydids 阅读(1874) 评论(0) 推荐(0)
pc端引入微信公众号文章
摘要：最近做了一个小需求，结果坑特别多。。。。。 需求是这样的，要给公司内部做一个微信公众号广告投票系统，整个项目就不多赘述了，有个小功能，要求是这样的： 点击某条记录后的“投票”按钮，在当前页面弹出弹窗显示文章内容（读取文章url，需要正确展示文字、图片、排版等），保持3分钟，这期间在当前页面上不可进行 阅读全文
posted @ 2019-06-24 20:14 Katydids 阅读(2285) 评论(3) 推荐(1)
instance of type of object.prototype.tostring 区别
摘要：typeof typeof 是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。 返回的结果用该类型的字符串(全小写字母)形式表示，包括以下 6 种： number、boolean、string、object、undefined、symbal 、function。 typeof 对于对 阅读全文
posted @ 2018-11-14 08:30 Katydids 阅读(539) 评论(0) 推荐(1)
字符串属性及方法大总结
摘要：字符串属性及方法 .length 长度，只读 charAt(i) 获取字符串中i对应的字符，i是字符串的下标 charCodeAt(i) 获取字符串下标i对应的字符的ASCIII值 fromCharCode 将ASCII值转换为字符 indexOf(子字符串) 获取字符串当中，子字符串第一次出现的位 阅读全文
posted @ 2018-11-14 08:23 Katydids 阅读(673) 评论(0) 推荐(0)
数组属性及方法大总结
摘要：数组属性及方法 .length 数组长度 .reverse() 逆序输出 .push(v1,v2,...) 将v1,v2等添加到数组的末尾处，返回值为新的数组 .pop() 将数组最后一个元素删除，返回值为删除的那个元素 .unshift(v1,v2,...) 将v1,v2等添加到数组的开始位置，返 阅读全文
posted @ 2018-11-14 08:19 Katydids 阅读(1521) 评论(0) 推荐(0)
find、filter、map的区别
摘要：1、find 查询数组中符合条件的第一个元素，如果没有符合条件的元素则返回空数组 var arr = [1,2,3,4,5,6,7] var newarr=arr.find(v=>v===4) var men=[ {name:'zhangsan',age:'18',sex:'女'}, {name:'lisi',age:'10086',sex:'nan'}, {name:'xi... 阅读全文
posted @ 2018-11-13 22:37 Katydids 阅读(865) 评论(0) 推荐(0)
经常遇到的js兼容问题大总结----最全总结
摘要：001、获取滚动条滚动的距离 var sTop = document.documentElement.scrollTop || document.body.scrollTop 002、获取非行间样式 IE： currentStyle[attr] 标准： getComputedStyle[attr] 阅读全文
posted @ 2018-11-12 09:13 Katydids 阅读(440) 评论(0) 推荐(0)
未知宽高元素垂直居中
摘要：未知宽高元素垂直居中 给父元素display:table;子元素display:cell-table,vertical-align:center，子元素即可居中 子元素绝对定位，top50%,left50%,transform:translate(50% 50%) 父元素flex， align-it 阅读全文
posted @ 2018-11-12 08:36 Katydids 阅读(159) 评论(0) 推荐(0)
伪数组转换真数组的方法
摘要：伪数组转换真数组的方法 声明一个空数组，通过遍历将他们添加到新的数组中去 1 //这个比较简单就不举例子啦~~ 使用数组的slice()方法，他返回的是数组，使用call或者apply指向伪数组 var arr = Array.prototype.slice.call(oldarr); 使用原型继承 阅读全文
posted @ 2018-11-12 08:20 Katydids 阅读(3618) 评论(0) 推荐(0)
call, apply, bind 区别
摘要：#call, apply, bind 区别及模拟实现call apply bind 三者都可以用来改变this的指向，但是在用法上略有不同 首先说一下call和apply的区别 call和apply都是第一个参数是this的指向 ，只是传参的方式不同 call是 第二个以及第三依次类推都是当前函数的 阅读全文
posted @ 2018-11-07 08:44 Katydids 阅读(1019) 评论(0) 推荐(0)