JS this指向问题 2019-12-23 this问题,是很多前端同学初学JS的拦路虎,甚至一些两三年工作经验的同学对this的理解还是模棱两可或是有一些误解,一个常见的误区就是:this指向函数本身。本文尝试总结了一下this的使用,并在最后总结了this指向的确定规则。其实它很简单,你早该熟悉它了!
前端利用canvas给图片添加水印 2019-12-15 前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助了canvas在前端实现图片添加水印的实现方法,canvas元素其实就是一个画布,我们可以很方便地绘制一些文字、线条、图形等,它也可以将一个img标签里渲染的图片画在画布上。
tree-tool: 树结构操作工具库 2019-12-12 之前写过一篇文章:《JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换》,文章详细讲述了树结构的各种操作原理等。因为问我树相关操作的朋友比较多,我将树结构操作的相关函数写得更加通用,并且作为一个小工具库放到了npm:tree-tool,需要的同学可以在项目中使用。本文是对tree-tool工具库用法的说明。
字符串压缩:使用正则表达式匹配相同连续字符 2019-12-11 今天遇到个问题,需求是字符串压缩:给定输入为英文字母组成的字符串,对字符串进行压缩,'abbbcc'压缩为‘ab3c2’,即统计连续相同字符个数,将字符连续出现2次及以上的子串压缩为“字母+出现次数”的形式。
字符串替换:replace的使用 2019-12-10 replace是JS字符串处理函数中最常用的函数之一,由于有正则表达式的支持,replace功能非常强大。同时,使用replace函数对于学习正则表达式非常重要,可以说,熟练掌握了replace函数,JS的正则就很简单了。
Javascript对象命名风格转换——小驼峰命名和下划线命名相互转换 2019-12-07 目前前后端数据交互通常会使用json,如果前后端变量命名风格不一致,就会导致某一端要迁就另一端,这样在自己的代码中就会同时出现两种命名风格。为了避免这种尴尬,我们可以在接口获取数据和发送数据的地方做统一处理,将收到的数据统一转为前端的风格,而将发出的数据转为后端的风格。 这不,项目里后端用了下划线形式的命名风格,而前端用的是小驼峰格式,所以写了两个函数进行转换,主要用到了递归算法和字符串正则替换。
Vue关键词搜索高亮 2019-11-19 本文基于Vue实现了在页面中搜索关键词,并且实现仿浏览器搜索结果的的高亮展示。同时将关键词搜索高亮组件vue-search-highlight发布到了npm,可以在Vue项目中直接安装使用。
CSS实现下拉菜单,点击下拉区域以外的区域关闭菜单 2019-11-16 下拉菜单是比较常见的一个需求:点击按钮,弹出下拉菜单;点击下拉菜单以外的区域,隐藏菜单。本文以介绍了纯CSS的方式实现下拉菜单的方法。