随笔分类 - JS/JQuery
摘要：
相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统，基于element-ui很丰富的组件生态，我们可以很快速的开发管理后台系统的页面（管理后台系统的页面也不复杂，大多都是分页查询类需求和增删改查）。但一个前端框架有优点，就必然会有一些缺点或bug存在，element-ui框架也不例外，甚至elementui框架的缺点或bug还很多，这里就不一一列举了，相信使用它的我们都心知肚明。
今天，本篇文章就针对element-ui的一个组件——select选择器进行一些改进，以达到我们实际的项目开发中想要实现的一个效果，或者说完善该组件的一些功能。当然了，还是在select选择器的基础上改进，不会对它的源代码做任何修改。
阅读全文
相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统，基于element-ui很丰富的组件生态，我们可以很快速的开发管理后台系统的页面（管理后台系统的页面也不复杂，大多都是分页查询类需求和增删改查）。但一个前端框架有优点，就必然会有一些缺点或bug存在，element-ui框架也不例外，甚至elementui框架的缺点或bug还很多，这里就不一一列举了，相信使用它的我们都心知肚明。
今天，本篇文章就针对element-ui的一个组件——select选择器进行一些改进，以达到我们实际的项目开发中想要实现的一个效果，或者说完善该组件的一些功能。当然了，还是在select选择器的基础上改进，不会对它的源代码做任何修改。
阅读全文
摘要：
一开始看到这个功能需求，我也很懵逼，因为从来没有做过啊，哈哈。。。但转念一想既然产品能提出这个需求，想必会有人实现过，就去网上查了查资料，果不其然，还真有人做过，但离我想要的效果还是差着十万八千里，所以按照网上大神的思路，结合我司的实际需求，自己就把它给捣鼓出来了。
其实刚做好的效果还是能实现产品的需求的，我就让同事帮忙测试一下看看有没有什么bug，因为我司对bug的要求以及对用户体验的要求还是很严格的，所以在同事的实际测试以及提醒下，后面我又参照电脑上基于ctrl、shift键来选中文件的实际效果做了改进，算是不给测试提bug的机会吧。
阅读全文
一开始看到这个功能需求，我也很懵逼，因为从来没有做过啊，哈哈。。。但转念一想既然产品能提出这个需求，想必会有人实现过，就去网上查了查资料，果不其然，还真有人做过，但离我想要的效果还是差着十万八千里，所以按照网上大神的思路，结合我司的实际需求，自己就把它给捣鼓出来了。
其实刚做好的效果还是能实现产品的需求的，我就让同事帮忙测试一下看看有没有什么bug，因为我司对bug的要求以及对用户体验的要求还是很严格的，所以在同事的实际测试以及提醒下，后面我又参照电脑上基于ctrl、shift键来选中文件的实际效果做了改进，算是不给测试提bug的机会吧。
阅读全文
摘要：
在开发公司管理后台系统时，遇到了需要根据不同的时间段如“近一年、近半年、近三月、近一月、近一周”来获取并展示不同图表数据的需求，很是繁琐，项目开发周期又非常的短，自己想了一下，虽然有思路，但一时半会儿要写出来还是比较费时的，所以就索性上网找一个现成的轮子吧，还好已有大神写过同样的效果的，但离我实际的需求还是有点远，现在先参考大神的代码来做一个笔记吧
阅读全文
在开发公司管理后台系统时，遇到了需要根据不同的时间段如“近一年、近半年、近三月、近一月、近一周”来获取并展示不同图表数据的需求，很是繁琐，项目开发周期又非常的短，自己想了一下，虽然有思路，但一时半会儿要写出来还是比较费时的，所以就索性上网找一个现成的轮子吧，还好已有大神写过同样的效果的，但离我实际的需求还是有点远，现在先参考大神的代码来做一个笔记吧
阅读全文
摘要：
jQuery的出现，大大的提升了我们操作dom的效率，使得我们的开发更上一层楼，如jQuery的选择器就是一个很强大的功能，它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等，很是方便快捷，并且这些选择器的兼容性都很好，可以说操作dom使用jq选择器一时爽，一直使用一直爽！只是，目前Vue、React、Angular三大框架的出现大大降低了JQuery的使用频率，而且JQuery在操作dom和绑定数据时确实存在一定的性能问题和各种坑，但依旧不可抹杀jq在操作dom方面的强大存在！
阅读全文
jQuery的出现，大大的提升了我们操作dom的效率，使得我们的开发更上一层楼，如jQuery的选择器就是一个很强大的功能，它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等，很是方便快捷，并且这些选择器的兼容性都很好，可以说操作dom使用jq选择器一时爽，一直使用一直爽！只是，目前Vue、React、Angular三大框架的出现大大降低了JQuery的使用频率，而且JQuery在操作dom和绑定数据时确实存在一定的性能问题和各种坑，但依旧不可抹杀jq在操作dom方面的强大存在！
阅读全文
摘要：这两天，一个前端朋友在面试的笔试过程中遇到了一道类似于“用js实现将一个具有相同code值的一维数组转换成相同code值在一起的二维数组”。他面试过后，把这个问题抛给了我，问我会实现吗？说实话，一开始，我也懵，我唯一能想起来的就是遍历这个一维数组，然后拿数组中的code值来做比较，但是真实现起来就没那么容易了，况且以前我也没有实现过这样的功能，平时的开发中好像也没遇到过这样的功能。
阅读全文
这两天，一个前端朋友在面试的笔试过程中遇到了一道类似于“用js实现将一个具有相同code值的一维数组转换成相同code值在一起的二维数组”。他面试过后，把这个问题抛给了我，问我会实现吗？说实话，一开始，我也懵，我唯一能想起来的就是遍历这个一维数组，然后拿数组中的code值来做比较，但是真实现起来就没那么容易了，况且以前我也没有实现过这样的功能，平时的开发中好像也没遇到过这样的功能。
阅读全文
摘要：
写本文的目的是今天恰好有一个之前做SEO的同事问我怎样把一篇文章中多个连续的br标签替换成两个连续的br标签，这里就牵涉到SEO层面的问题了。
在做SEO优化的时候，其中有一个需要注意的地方就是尽量减少文章中br标签强制换行的使用，如果换行请尽量使用p标签，p标签严格意义上来说就是段落标签，是专门用在文章的段落中的。br标签对SEO不够友好，我想很大程度上还是搜索引擎想要写代码的人的尽量把代码写的规范，什么时候该用什么标签突出强调，什么时候该用什么标签换行，什么时候该用什么标签包裹标题等等。
阅读全文
写本文的目的是今天恰好有一个之前做SEO的同事问我怎样把一篇文章中多个连续的br标签替换成两个连续的br标签，这里就牵涉到SEO层面的问题了。
在做SEO优化的时候，其中有一个需要注意的地方就是尽量减少文章中br标签强制换行的使用，如果换行请尽量使用p标签，p标签严格意义上来说就是段落标签，是专门用在文章的段落中的。br标签对SEO不够友好，我想很大程度上还是搜索引擎想要写代码的人的尽量把代码写的规范，什么时候该用什么标签突出强调，什么时候该用什么标签换行，什么时候该用什么标签包裹标题等等。
阅读全文
摘要：
单点登录中的A系统的某个页面没有登录，它就会来到一个统一的登录界面并在url中携带有它当前页面的地址和参数，参数可能还会有多个，在登录成功后，需要再返回到之前访问的页面并且还要把该页面的参数再放在url中一并返回，而且每个页面、每个系统的参数名可能还不一样，所以你就不能把返回的参数名写死，那是不是就很难办呢？
阅读全文
单点登录中的A系统的某个页面没有登录，它就会来到一个统一的登录界面并在url中携带有它当前页面的地址和参数，参数可能还会有多个，在登录成功后，需要再返回到之前访问的页面并且还要把该页面的参数再放在url中一并返回，而且每个页面、每个系统的参数名可能还不一样，所以你就不能把返回的参数名写死，那是不是就很难办呢？
阅读全文
摘要：
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。WebPack大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
阅读全文
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。WebPack大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
阅读全文
摘要：
在JavaScript里使用typeof判断数据类型，只能区分基本类型，即：number、string、undefined、boolean、object。
对于null、array、function、object来说，使用typeof都会统一返回object字符串。
要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法，判断某个对象之属于哪种内置类型。
分为null、string、boolean、number、undefined、array、function、object、date、math。
阅读全文
在JavaScript里使用typeof判断数据类型，只能区分基本类型，即：number、string、undefined、boolean、object。
对于null、array、function、object来说，使用typeof都会统一返回object字符串。
要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法，判断某个对象之属于哪种内置类型。
分为null、string、boolean、number、undefined、array、function、object、date、math。
阅读全文
摘要：
每天早上上班在地铁里我都有看技术类文章以及实时新闻的习惯，偶尔会看到有些文章的开始部分会提醒我们这篇文章大概的阅读时长，我就在想这是怎么实现的，具体到前端开发中，又是如何实现的。今天在浏览SegmentFault论坛时，无意中看到了一篇关于“如何估算文章阅读时长？”的帖子，于是就从头到尾看了下实现的原理，谁知实现起来会那么简单。
阅读全文
每天早上上班在地铁里我都有看技术类文章以及实时新闻的习惯，偶尔会看到有些文章的开始部分会提醒我们这篇文章大概的阅读时长，我就在想这是怎么实现的，具体到前端开发中，又是如何实现的。今天在浏览SegmentFault论坛时，无意中看到了一篇关于“如何估算文章阅读时长？”的帖子，于是就从头到尾看了下实现的原理，谁知实现起来会那么简单。
阅读全文
摘要：
最近，公司要做一个类似挖矿的项目，大概其是当用户登录进入首页后，如果用户有已经生成的原力值，则在其点击原力值后可以类似蚂蚁森林那样收集原力值，当用户将所有的原力值收集完毕后开始提醒用户新的原力值正在生成中，待新的原力值生成后，用户可以继续以上的操作收集原力值。以上是一种逻辑，还有一种是当用户前一天有剩余的原力值没有收集时，在第二天收集完当天的已生成的原力值后，前一天的原力值还可以出现在页面当中继续供用户收集（具体的情况，看你公司的实际业务需求，比如可以设置三天内的原力值都能收集，也可以设置两天内的原力值可供收集等）。
阅读全文
最近，公司要做一个类似挖矿的项目，大概其是当用户登录进入首页后，如果用户有已经生成的原力值，则在其点击原力值后可以类似蚂蚁森林那样收集原力值，当用户将所有的原力值收集完毕后开始提醒用户新的原力值正在生成中，待新的原力值生成后，用户可以继续以上的操作收集原力值。以上是一种逻辑，还有一种是当用户前一天有剩余的原力值没有收集时，在第二天收集完当天的已生成的原力值后，前一天的原力值还可以出现在页面当中继续供用户收集（具体的情况，看你公司的实际业务需求，比如可以设置三天内的原力值都能收集，也可以设置两天内的原力值可供收集等）。
阅读全文
摘要：canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素，比如压缩上传的图片、比如刮刮卡、比如制作海报、图表插件等，很多人在面试的过程中也会被问到有没有接触过canvas图形绘制。
定义：canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成，canvas标签只是图形容器，您必须使用脚本来绘制图形。
浏览器支持：Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持。
那么本篇文章就通过一个时钟组件来熟悉使用一下关于canvas的api。
阅读全文
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素，比如压缩上传的图片、比如刮刮卡、比如制作海报、图表插件等，很多人在面试的过程中也会被问到有没有接触过canvas图形绘制。
定义：canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成，canvas标签只是图形容器，您必须使用脚本来绘制图形。
浏览器支持：Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持。
那么本篇文章就通过一个时钟组件来熟悉使用一下关于canvas的api。
阅读全文
摘要：js求和运算在可变参数的情况下ES3、ES5和ES6的写法区别
阅读全文
摘要：
在做公司的运营报告页面时，有一个数字累计增加的动画效果，一开始，毫无头绪，不知如何下手，于是上网查资料，发现大多都是用的插件来实现的，那么今天，我也来用插件jquery.animateNumber.js来实现一个不一样的数字动画效果吧，也等于是做个笔记吧。
阅读全文
在做公司的运营报告页面时，有一个数字累计增加的动画效果，一开始，毫无头绪，不知如何下手，于是上网查资料，发现大多都是用的插件来实现的，那么今天，我也来用插件jquery.animateNumber.js来实现一个不一样的数字动画效果吧，也等于是做个笔记吧。
阅读全文
摘要：
在项目开发中尤其是在项目的活动页面的开发中，经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中，并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的。通常的做法是通过将列表父元素的`margin-top`或`top`在一定间隔内以负值逐渐减小一行的高度的形式来实现，那么今天，我们就通过列表父元素的`scrollTop`属性来实现这样的效果（其实原理都差不多）。
阅读全文
在项目开发中尤其是在项目的活动页面的开发中，经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中，并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的。通常的做法是通过将列表父元素的`margin-top`或`top`在一定间隔内以负值逐渐减小一行的高度的形式来实现，那么今天，我们就通过列表父元素的`scrollTop`属性来实现这样的效果（其实原理都差不多）。
阅读全文
摘要：
一直以来都在好奇，jquery的prevAll和nextAll方法都是咋实现的，那么厉害，而且还那么方便。不得不说，jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题，而且很好的解决了js代码的浏览器兼容性问题，对于js领域来说，真的算是一场革命性的变革。但是如果知道了原理，读懂了jquery的源码，还是会恍然大悟的。
阅读全文
一直以来都在好奇，jquery的prevAll和nextAll方法都是咋实现的，那么厉害，而且还那么方便。不得不说，jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题，而且很好的解决了js代码的浏览器兼容性问题，对于js领域来说，真的算是一场革命性的变革。但是如果知道了原理，读懂了jquery的源码，还是会恍然大悟的。
阅读全文
摘要：
最早时，公司的H5项目中曾用过点击一个“加载更多”的DOM元素来实现分页的功能，后来又用过网上有人写的一个上拉加载更多的插件，那个插件是页面将要滚动到底部时就自动请求数据并插入到页面的后边，其实这样也是可以的，不过在我们的负责人看了之前的效果后提出的要求是希望页面滚动到底部时先暂时不加载更多的数据，而是当页面滚动到底部且用户还在往上拉动页面时再加载更多。这样的好处是，万一用户只是想滚动到底部只看看被屏幕遮挡住的其他数据而没有想要看更多的数据时，就不用再请求数据了。于是我就查资料找到了一个基于iscroll的插件实现的这种效果。
阅读全文
最早时，公司的H5项目中曾用过点击一个“加载更多”的DOM元素来实现分页的功能，后来又用过网上有人写的一个上拉加载更多的插件，那个插件是页面将要滚动到底部时就自动请求数据并插入到页面的后边，其实这样也是可以的，不过在我们的负责人看了之前的效果后提出的要求是希望页面滚动到底部时先暂时不加载更多的数据，而是当页面滚动到底部且用户还在往上拉动页面时再加载更多。这样的好处是，万一用户只是想滚动到底部只看看被屏幕遮挡住的其他数据而没有想要看更多的数据时，就不用再请求数据了。于是我就查资料找到了一个基于iscroll的插件实现的这种效果。
阅读全文
摘要：公司马上就要三周岁了，所以市场部和产品共同策划了一个“正青春，共成长”的主题代言活动，该活动已经在国庆节及中秋节期间让公司员工和用户为公司代言了，本篇博客内容主要为了记录在这次开发中遇到的问题以及解决问题的办法。
开发要求：
1、用户可以从手机相册上传图片或拍照上传图片；
2、用户可以输入为公司代言的地点，如：我在：上海；
3、将用户输入的代言地点及活动二维码生成一张图片供用户保存到手机，以方便发送朋友圈或好友。
功能实现：
1、使用H5的input[type="file"]标签来上传图片，并使用其原生的js代码将其转换成base64字符串的图片；
2、使用canvas将用户上传的图片和输入的代言地点及活动二维码生成一张图片;
3、记录用户生成的图片信息。
阅读全文
公司马上就要三周岁了，所以市场部和产品共同策划了一个“正青春，共成长”的主题代言活动，该活动已经在国庆节及中秋节期间让公司员工和用户为公司代言了，本篇博客内容主要为了记录在这次开发中遇到的问题以及解决问题的办法。
开发要求：
1、用户可以从手机相册上传图片或拍照上传图片；
2、用户可以输入为公司代言的地点，如：我在：上海；
3、将用户输入的代言地点及活动二维码生成一张图片供用户保存到手机，以方便发送朋友圈或好友。
功能实现：
1、使用H5的input[type="file"]标签来上传图片，并使用其原生的js代码将其转换成base64字符串的图片；
2、使用canvas将用户上传的图片和输入的代言地点及活动二维码生成一张图片;
3、记录用户生成的图片信息。
阅读全文
摘要：
最近一直在做移动端的改版项目，做之前老大就跟我说了好几次，说这次改版一定要用雪碧图减少一个页面的图片的请求次数，能加快页面的加载速度就一定要加快，我说可以。因为之前的项目开发时间过短，也没有时间去慢慢实现雪碧图，所以就一直没有做这样的一个功能，但这次时间较为充分，于是就开始着手做雪碧图。做之前呢，首先想到的就是用PS将所有的小图放在一张大图上，可那么多的小图，一张一张往上放，岂不累趴，而且你还没有办法去确切的计算整张雪碧图的宽高，这不搞死人吗？于是就上网查资料，然后就有了本文很简单的生成雪碧图的方法。
阅读全文
最近一直在做移动端的改版项目，做之前老大就跟我说了好几次，说这次改版一定要用雪碧图减少一个页面的图片的请求次数，能加快页面的加载速度就一定要加快，我说可以。因为之前的项目开发时间过短，也没有时间去慢慢实现雪碧图，所以就一直没有做这样的一个功能，但这次时间较为充分，于是就开始着手做雪碧图。做之前呢，首先想到的就是用PS将所有的小图放在一张大图上，可那么多的小图，一张一张往上放，岂不累趴，而且你还没有办法去确切的计算整张雪碧图的宽高，这不搞死人吗？于是就上网查资料，然后就有了本文很简单的生成雪碧图的方法。
阅读全文
摘要：
最近在做一个H5的改版项目，产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果，拿到这样的设计稿后，我有点懵了，自己写一个js？去网上找一个这样的效果？自己写一个可以，只是实现起来有点花时间，项目进度不允许；网上找一个，却不知道这样的效果该如何查，该输入什么关键词查询。于是自己就按照效果大概的意思去查了一下，果真有这样的案例和实现代码，太好了。可仔细一看，大部分都是基于jquery的，而且还连带着引用相关的插件，这不太好吧，这个效果也没有多难吧，引用一个插件有点浪费之嫌吧。
阅读全文
最近在做一个H5的改版项目，产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果，拿到这样的设计稿后，我有点懵了，自己写一个js？去网上找一个这样的效果？自己写一个可以，只是实现起来有点花时间，项目进度不允许；网上找一个，却不知道这样的效果该如何查，该输入什么关键词查询。于是自己就按照效果大概的意思去查了一下，果真有这样的案例和实现代码，太好了。可仔细一看，大部分都是基于jquery的，而且还连带着引用相关的插件，这不太好吧，这个效果也没有多难吧，引用一个插件有点浪费之嫌吧。
阅读全文
浙公网安备 33010602011771号