客户线上反馈：从信息搜集到疑难 bug 排查全流程经验分享-编程思维
写在前面：本文是我在前端团队的第三次分享，应该很少会有开发者写客户反馈处理流程以及 bug 排查的心得技巧，全文比较长，写了一个多星期大概1W多字（也是我曾经2年工作的总结），如果你有耐心阅读，我相信在未来的问题排查上，一定会对你的思路拓展有些许帮助，考虑到篇幅问题，建议在阅读前泡上一杯茶，那么本文开始。 一、引 在过去，我曾有两年的时间每天跟各种奇怪或者难以解释的 bug 打交道，2年时间累
js将一篇文章中多个连续的
标签替换成两个连续的
标签-编程思维
写本文的目的是今天恰好有一个之前做SEO的同事问我怎样把一篇文章中多个连续的br标签替换成两个连续的br标签，这里就牵涉到SEO层面的问题了。 在做SEO优化的时候，其中有一个需要注意的地方就是尽量减少文章中br标签强制换行的使用，如果换行请尽量使用p标签，p标签严格意义上来说就是段落标签，是专门用在文章的段落中的。br标签对SEO不够友好，我想很大程度上还是搜索引擎想要写代码的人的尽量把代码写
js将一个具有相同键值对的一维数组转换成二维数组-编程思维
这两天，一个前端朋友在面试的笔试过程中遇到了一道类似于“用js实现将一个具有相同code值的一维数组转换成相同code值在一起的二维数组”的题目。他面试过后，把这个问题抛给了我，问我会实现吗？说实话，一开始，我也懵，我唯一能想起来的就是遍历这个一维数组，然后拿数组中的code值来做比较，但是真实现起来就没那么容易了，况且以前我也没有实现过这样的功能，平时的开发中好像也没遇到过这样的功能。 来看看
js实现类选择器和name属性选择器-编程思维
jQuery的出现，大大的提升了我们操作dom的效率，使得我们的开发更上一层楼，如jQuery的选择器就是一个很强大的功能，它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等，很是方便快捷，并且这些选择器的兼容性都很好，可以说操作dom使用jq选择器一时爽，一直使用一直爽！只是，目前Vue、React、Angular三大框架的出现大大降低了JQuery的使用频率
js估算一篇文章的阅读时长-编程思维
每天早上上班在地铁里我都有看技术类文章以及实时新闻的习惯，偶尔会看到有些文章的开始部分会提醒我们这篇文章大概的阅读时长，我就在想这是怎么实现的，具体到前端开发中，又是如何实现的。今天在浏览SegmentFault论坛时，无意中看到了一篇关于“如何估算文章阅读时长？”的帖子，于是就从头到尾看了下实现的原理，谁知实现起来会那么简单。如下图： 知道了实现的原理，那么就来看看具体的代码是如何实现的：
使用object.prototype.tostring.call()方法精确判断对象的类型-编程思维
在JavaScript里使用typeof判断数据类型，只能区分基本类型，即：number、string、undefined、boolean、object。 对于null、array、function、object来说，使用typeof都会统一返回object字符串。 要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法，
js递归遍历多维数组并在修改数组的key后返回新的多维数组-编程思维
我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统，接口会根据用户的权限不同返回不同的菜单名称、URL等，前端要将这些菜单名称及URL动态添加到系统的左侧，这里就用到了vue-router2.2新添的router.addRouter(routes)方法。但是接口返给我的只是普通的由键值对组成的数组，而vue-router需要的是固定格式的路由写法，于是我就只能自己动手将普通的数
js以键值对的方式获取url的参数-编程思维
在前端日常的开发中，大多数时候我们只需用js获取到url中的参数即可，这个实现起来也很方便如： function getQueryString(value) { const reg = new RegExp('(^|&)' + value + '=([^&]*)(&|$)'); const r = window.location.search.su
原生js实现preall和nextall方法-编程思维
一直以来都在好奇，jquery的prevAll和nextAll方法都是咋实现的，那么厉害，而且还那么方便。不得不说，jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题，而且很好的解决了js代码的浏览器兼容性问题，对于js领域来说，真的算是一场革命性的变革。但是如果知道了原理，读懂了jquery的源码，还是会恍然大悟的。下边就贴出自己写的原生js实现preAll和nextAll的
原生js移动端列表无缝间歇向上滚动-编程思维
在项目开发中尤其是在项目的活动页面的开发中，经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中，并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的。通常的做法是通过将列表父元素的margin-top或top在一定间隔内以负值逐渐减小一行的高度的形式来实现，那么今天，我们就通过列表父元素的scrollTop属性来实现这样的效果（其实原理都差不多）。 具体代码如下： &l
原生js之canvas时钟组件-编程思维
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素，比如压缩上传的图片、比如刮刮卡、比如制作海报、图表插件等，很多人在面试的过程中也会被问到有没有接触过canvas图形绘制。 定义 canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。 canvas标签只是图形容器，您必须使用脚本来绘制图形。 浏览器支持 Internet Explorer 9、Firef
js多个元素随机且不重叠分布在页面中-编程思维
最近，公司要做一个类似挖矿的项目，大概其是当用户登录进入首页后，如果用户有已经生成的原力值，则在其点击原力值后可以类似蚂蚁森林那样收集原力值，当用户将所有的原力值收集完毕后开始提醒用户新的原力值正在生成中，待新的原力值生成后，用户可以继续以上的操作收集原力值。如下图： 以上是一种逻辑，还有一种是当用户前一天有剩余的原力值没有收集时，在第二天收集完当天的已生成的原力值后，前一天的原力值还可以出现
js在新页面中返回到上一页浏览的历史位置-编程思维
在微信浏览器中浏览页面时，在当前页面中当我们将页面往下滚动到某一个位置时，可能我们就会点击某个链接而页面跳转到了另外一个页面，而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置，很方便我们接着往下浏览页面上其他的信息，这种效果大大提升了用户的体验度，提升了网站的逼格。今天，我就把实现这种效果的原理和代码分享给大家，方便大家的开发使用。 原理 1、用户滚动页面时，记录滚动条距
js移动端向左滑动出现删除按钮-编程思维
最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，本来想着直接使用zepto的touch.js插件，因为之前实现相同的功能时用过这个插件，当时还挺好用的，直接使用它的swipeLeft和swipeRight方法即可，可是今天又开始做这个功能时，却发现这两个方法在使用时毫无效果，一点反应都没有。上网查资料，又下载了最新版本的zepto和touch.js，都没有
js顺序播放列表中的音乐-编程思维
今天一个朋友问我js顺序播放音乐列表中的音乐的问题，我仔细一想，我也没有做过啊，无从下手啊，怎么办？然后我就上网查了一下audio标签，又百度了js如何顺序播放音乐，结果就找到了解决的办法。 audio标签有一个方法是onended，W3C对它的解释是“当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。”这么问题就迎刃而解了。 直接上代码： <!DOCTYPE html&g
js移动端/h5同时选择多张图片上传并使用canvas压缩图片-编程思维
最近在做一个H5的项目，里边涉及到拍照上传图片的功能以及识别图片的功能，这里对识别图片的功能不做赘述，不属本文范畴。我在做完并上线项目后，同事跟我提了一个要求是可不可以同时选择多张图片上传，我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了，如果不加，就无法同时选择多张图片，于是我就照实跟同事说了这个情况。但回头一想，单张图片可以上传，那多张图片呢？
js+css3+html5拖动滑块(type="range")改变值-编程思维
最近在做一个H5的改版项目，产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果，类似如下图这样： 拿到这样的设计稿后，我有点懵了，自己写一个js？去网上找一个这样的效果？自己写一个可以，只是实现起来有点花时间，项目进度不允许；网上找一个，却不知道这样的效果该如何查，该输入什么关键词查询。于是自己就按照效果大概的意思去查了一下，果真有这样的案例和实现代码，太好了。可仔细一看，大部分都是基于
学习安装并配置前端自动化工具gulp-编程思维
Gulp和所有Gulp插件都是基于nodeJs来运行的，因此在你的电脑上需要安装nodeJs，安装过程请移驾安装并配置前端自动化工具——grunt。安装完成后，通过运行cmd进入DOS命令窗口，如图： 如上图，输入node -v然后回车，看到有版本号，证明nodeJs安装成功。 接下来就是安装Gulp了： 1、首先进行全局安装gulp,如图： 安装完成后，输入gulp -v然后回车，看到
前端自动化工具gulp自动添加版本号-编程思维
之前，我介绍了学习安装并配置前端自动化工具Gulp，觉得gulp确实比grunt的配置简单很多，于是我决定再深入学习一下gulp，就去网上查了资料，发现gulp还可以自动添加版本号，这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼。所以就赶紧去试了一下，果真可以，很高兴啊，真是为项目开发，为效果的快速展现提供了很多的便利。 实现原理： 1、修改js和c
js二进制与十进制互转-编程思维
十进制转换为二进制： var num = 100; console.log(num.toString(2)); toString()方法可把一个 Number 对象转换为一个字符串，并返回结果。 语法 NumberObject.toString(radix); 其中，radix为可选。规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。但是要注意，如果该参数是