博客园 - 5Clay
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=142086
2021-05-17T06:18:10Z
5Clay
https://www.cnblogs.com/5-clay/
feed.cnblogs.com
https://www.cnblogs.com/5-clay/p/14776399.html
js开发技巧集锦 - 5Clay
js有很多开发技巧,把它归为以下几点: String Skill:字符串技巧 Number Skill:数值技巧 Boolean Skill:布尔技巧 Array Skill:数组技巧 Object Skill:对象技巧 Function Skill:函数技巧 DOM Skill:DOM技巧 Str
2021-05-17T03:55:00Z
2021-05-17T03:55:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】js有很多开发技巧,把它归为以下几点: String Skill:字符串技巧 Number Skill:数值技巧 Boolean Skill:布尔技巧 Array Skill:数组技巧 Object Skill:对象技巧 Function Skill:函数技巧 DOM Skill:DOM技巧 Str <a href="https://www.cnblogs.com/5-clay/p/14776399.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/14764531.html
关于前后端处理异常 - 5Clay
最近有同事问到我如果前端接口写错了,服务端返回错误,怎样在前端提示错误?这个错误其实在产品出厂时就不应该存在,代码错误属于开发人员的错误,不应该到了客户端还给予客户提示。这类问题给予用户提示没有任何意义,因为用户不能解决。而且还告诉用户我们的产品有问题。一般像客户端由于用户操作失误或者用户那边可以解
2021-05-13T06:50:00Z
2021-05-13T06:50:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】最近有同事问到我如果前端接口写错了,服务端返回错误,怎样在前端提示错误?这个错误其实在产品出厂时就不应该存在,代码错误属于开发人员的错误,不应该到了客户端还给予客户提示。这类问题给予用户提示没有任何意义,因为用户不能解决。而且还告诉用户我们的产品有问题。一般像客户端由于用户操作失误或者用户那边可以解 <a href="https://www.cnblogs.com/5-clay/p/14764531.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/14759706.html
关于软件产品设计的一些思考 - 5Clay
一个软件产品一般有三类用户:专家型用户、随意型用户、主流用户。 需求开发的时候尽量忽略专家型用户,为主流用户而设计,因为专家想要的功能往往会吓到主流用户。与新增功能相比,用户更关注基本功能,遇到软件缺陷时,用户的挫折感远远高于对新功能的兴趣度。不要以功能的多寡来认定产品的价值,应该看产品能否满足用户
2021-05-12T06:39:00Z
2021-05-12T06:39:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】一个软件产品一般有三类用户:专家型用户、随意型用户、主流用户。 需求开发的时候尽量忽略专家型用户,为主流用户而设计,因为专家想要的功能往往会吓到主流用户。与新增功能相比,用户更关注基本功能,遇到软件缺陷时,用户的挫折感远远高于对新功能的兴趣度。不要以功能的多寡来认定产品的价值,应该看产品能否满足用户 <a href="https://www.cnblogs.com/5-clay/p/14759706.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/10826801.html
对flex-grow和flex-shrink的深入理解 - 5Clay
flex弹性布局,如果子元素宽度之和大于或者小于父元素宽度,空间就会存在剩余和不够,flex默认不换行,除非设置flex-wrap,那么这种情况下,有两个重要的属性,flex-grow和flex-shrink. flex-grow默认值为0,用于子元素的宽度之和小于父元素的宽度时分配剩余空间,假如父
2019-05-07T09:21:00Z
2019-05-07T09:21:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】flex弹性布局,如果子元素宽度之和大于或者小于父元素宽度,空间就会存在剩余和不够,flex默认不换行,除非设置flex-wrap,那么这种情况下,有两个重要的属性,flex-grow和flex-shrink. flex-grow默认值为0,用于子元素的宽度之和小于父元素的宽度时分配剩余空间,假如父 <a href="https://www.cnblogs.com/5-clay/p/10826801.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/10594001.html
移动端rem单位和px单位换算 - 5Clay
rem单位是根据html元素的单位在页面根据不同的手机屏幕分辨率动态整体的按比例缩小或放大字体。 假如html{font-size: 14px;},那么1rem=14px; 一个div宽度48px,那么换成rem:48px/14px=3.4rem; 宽度200px,换成rem:200px/14px=
2019-03-25T07:29:00Z
2019-03-25T07:29:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】rem单位是根据html元素的单位在页面根据不同的手机屏幕分辨率动态整体的按比例缩小或放大字体。 假如html{font-size: 14px;},那么1rem=14px; 一个div宽度48px,那么换成rem:48px/14px=3.4rem; 宽度200px,换成rem:200px/14px= <a href="https://www.cnblogs.com/5-clay/p/10594001.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/10592501.html
移动端的300ms延迟和点击穿透 - 5Clay
移动端300ms延迟:假定这么一个场景。用户在 浏览器里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,浏览器 就等待 300 毫秒,以判断用户是否再次点击了屏幕。也就是说,当我们点击页面
2019-03-25T02:54:00Z
2019-03-25T02:54:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】移动端300ms延迟:假定这么一个场景。用户在 浏览器里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,浏览器 就等待 300 毫秒,以判断用户是否再次点击了屏幕。也就是说,当我们点击页面 <a href="https://www.cnblogs.com/5-clay/p/10592501.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/10565414.html
IE盒子模型和W3C盒子模型 - 5Clay
IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型。 box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie盒模型,盒子的宽高度会把border和padding的算进去。而content-box对应的是标准的
2019-03-20T07:52:00Z
2019-03-20T07:52:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型。 box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie盒模型,盒子的宽高度会把border和padding的算进去。而content-box对应的是标准的 <a href="https://www.cnblogs.com/5-clay/p/10565414.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/10517515.html
Vue的computed和methods区别 - 5Clay
1,computed里面定义的方法是以属性的方式(当然也可以以函数调用的方式)出现在html里面,而methods里面定义的方法是以函数的方式; 2,computed依赖于data里面的数据,只有相关依赖的数据发生改变时才会重新求值,所以具有缓存,methods不具有缓存,每次都会重新计算。如果有1
2019-03-12T08:21:00Z
2019-03-12T08:21:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】1,computed里面定义的方法是以属性的方式(当然也可以以函数调用的方式)出现在html里面,而methods里面定义的方法是以函数的方式; 2,computed依赖于data里面的数据,只有相关依赖的数据发生改变时才会重新求值,所以具有缓存,methods不具有缓存,每次都会重新计算。如果有1 <a href="https://www.cnblogs.com/5-clay/p/10517515.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/10496000.html
display:inline-block间隙产生的原因以及解决方案 - 5Clay
display-inline-block是让元素在一行显示,但是这些元素在html里面是上下行排列的,所以中间有换行符,于是并排显示就有了换行符带来的空隙。那么如何解决呢? 方案一:将html标签要display:inline-block 的元素写在一行。缺点:代码可读性差。 方案二:给父元素设置f
2019-03-08T07:12:00Z
2019-03-08T07:12:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】display-inline-block是让元素在一行显示,但是这些元素在html里面是上下行排列的,所以中间有换行符,于是并排显示就有了换行符带来的空隙。那么如何解决呢? 方案一:将html标签要display:inline-block 的元素写在一行。缺点:代码可读性差。 方案二:给父元素设置f <a href="https://www.cnblogs.com/5-clay/p/10496000.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/10471757.html
图片上传裁剪之小记 - 5Clay
项目需要在图片上传到服务器之前提供用户裁剪图片,而且要求圆形的裁剪框,于是,我们在裁剪上传到服务器之前写一个引用裁剪的方法,当然我们需要插件cropper.js. 然后裁剪之后通过canvas吧图片裁剪成圆形,这时候要求用户上传的图片必须是正方形,所以我们用canvas裁剪时取的半径和圆心位置都是图
2019-03-04T09:03:00Z
2019-03-04T09:03:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】项目需要在图片上传到服务器之前提供用户裁剪图片,而且要求圆形的裁剪框,于是,我们在裁剪上传到服务器之前写一个引用裁剪的方法,当然我们需要插件cropper.js. 然后裁剪之后通过canvas吧图片裁剪成圆形,这时候要求用户上传的图片必须是正方形,所以我们用canvas裁剪时取的半径和圆心位置都是图 <a href="https://www.cnblogs.com/5-clay/p/10471757.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/10471291.html
合并代码注意事项 - 5Clay
1,已上线的代码出现bug,从master拉取新的分支解决bug后合并到master; 2,未上线的代码在测试阶段出现bug,可以直接在此次开发的分支上修复bug,然后合并到test分支; 3,test分支代码如果被合并到master,再revert回滚,再次合并到master就无法合并,因为代码和
2019-03-04T08:06:00Z
2019-03-04T08:06:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】1,已上线的代码出现bug,从master拉取新的分支解决bug后合并到master; 2,未上线的代码在测试阶段出现bug,可以直接在此次开发的分支上修复bug,然后合并到test分支; 3,test分支代码如果被合并到master,再revert回滚,再次合并到master就无法合并,因为代码和 <a href="https://www.cnblogs.com/5-clay/p/10471291.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/10413747.html
上传图片预览 - 5Clay
核心代码:
2019-02-21T09:00:00Z
2019-02-21T09:00:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】核心代码: <a href="https://www.cnblogs.com/5-clay/p/10413747.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/9267678.html
禁止用户打开控制台调试代码 - 5Clay
1,禁用F12,阻止默认行为 window.onkeydown=window.onkeyup=window.onkeypress=function(event){ if(event.keyCode==123){ event.prevnentDefault() window.event.returnV
2018-07-05T04:26:00Z
2018-07-05T04:26:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】1,禁用F12,阻止默认行为 window.onkeydown=window.onkeyup=window.onkeypress=function(event){ if(event.keyCode==123){ event.prevnentDefault() window.event.returnV <a href="https://www.cnblogs.com/5-clay/p/9267678.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/9254277.html
css优化 - 5Clay
1,shallow selector:使用浅层选择器。比如nav ul li .nav-item可以直接换成 .nav-item。浏览器读取css样式是从右到左,层级越深,所耗费的时间就越多。 2,shorthand properties:属性简写。比如{ font-size:1.5rem; lin
2018-07-02T08:00:00Z
2018-07-02T08:00:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】1,shallow selector:使用浅层选择器。比如nav ul li .nav-item可以直接换成 .nav-item。浏览器读取css样式是从右到左,层级越深,所耗费的时间就越多。 2,shorthand properties:属性简写。比如{ font-size:1.5rem; lin <a href="https://www.cnblogs.com/5-clay/p/9254277.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/9016046.html
实用快捷键 - 5Clay
1,ctrl+Alt+L 压缩的文件还原,代码格式化 2,ctrl+G 根据所在行查找代码 3,ctrl+鼠标左击 打开指定变量所在的源代码 4,shift+enter无论光标在哪里都另起一行 5,ctrl+shift+n 快速查找本项目中的指定文件 6,ctrl+F4关闭当前代码选项卡
2018-05-09T10:50:00Z
2018-05-09T10:50:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】1,ctrl+Alt+L 压缩的文件还原,代码格式化 2,ctrl+G 根据所在行查找代码 3,ctrl+鼠标左击 打开指定变量所在的源代码 4,shift+enter无论光标在哪里都另起一行 5,ctrl+shift+n 快速查找本项目中的指定文件 6,ctrl+F4关闭当前代码选项卡 <a href="https://www.cnblogs.com/5-clay/p/9016046.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/9016023.html
前端零碎知识集锦 - 5Clay
1,text-align:center ie7-8不兼容 2,box-sizing ie8以上才支持 3,背景图兼容性解决办法:各个属性分开写 4,border-radius只有ie9才支持 5,移动端1px 边框伪类计算:1/0.33(0.33是缩放率);不管是四条边还是一条边,高度都必须设置为1
2018-05-09T10:44:00Z
2018-05-09T10:44:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】1,text-align:center ie7-8不兼容 2,box-sizing ie8以上才支持 3,背景图兼容性解决办法:各个属性分开写 4,border-radius只有ie9才支持 5,移动端1px 边框伪类计算:1/0.33(0.33是缩放率);不管是四条边还是一条边,高度都必须设置为1 <a href="https://www.cnblogs.com/5-clay/p/9016023.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/7976972.html
点击按钮实现复制粘贴功能 - 5Clay
//获取复制节点 var copyNodes=$(".copy") //给节点添加点击事件 copyNodes.on("click",function(){ $(this).prev().select() document.execCommand("copy") }) //注意:这里复制的内容仅限于
2017-12-04T06:42:00Z
2017-12-04T06:42:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】//获取复制节点 var copyNodes=$(".copy") //给节点添加点击事件 copyNodes.on("click",function(){ $(this).prev().select() document.execCommand("copy") }) //注意:这里复制的内容仅限于 <a href="https://www.cnblogs.com/5-clay/p/7976972.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/7886312.html
chrome浏览器之网络面板 - 5Clay
这篇指导向你展示怎样检测网络张状况或者在chrome开发工具的网络面板中尽可能的优化网页。 排列的或受阻的请求 症状:同时发出六个请求。之后有一系列的请求排队或受阻。一旦最先的六个请求中有一个响应结束,这趟请求中的另一个也开始了。 图一:在上述网络面板中有一系列排队或受阻的请求例子。我们可以从瀑布流
2017-11-23T10:14:00Z
2017-11-23T10:14:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】这篇指导向你展示怎样检测网络张状况或者在chrome开发工具的网络面板中尽可能的优化网页。 排列的或受阻的请求 症状:同时发出六个请求。之后有一系列的请求排队或受阻。一旦最先的六个请求中有一个响应结束,这趟请求中的另一个也开始了。 图一:在上述网络面板中有一系列排队或受阻的请求例子。我们可以从瀑布流 <a href="https://www.cnblogs.com/5-clay/p/7886312.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/7885082.html
js图片预加载以及延迟加载 - 5Clay
当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: 通过调用preLoadImg方法。我们可以实现图片预加载。但是如果想在图片加载后做其他的异步操作,我们可以使用图片的onload事件 此文借鉴了相关资料,为本人原创,转载请注明出处!谢谢!
2017-11-23T07:24:00Z
2017-11-23T07:24:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: 通过调用preLoadImg方法。我们可以实现图片预加载。但是如果想在图片加载后做其他的异步操作,我们可以使用图片的onload事件 此文借鉴了相关资料,为本人原创,转载请注明出处!谢谢! <a href="https://www.cnblogs.com/5-clay/p/7885082.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/5-clay/p/7874267.html
前端切图注意项 - 5Clay
项目需要透明的图片,所以在Ctrl+Shift+Alt+S保存图片时,有png8和png24供选择,其实两种格式保存的图片是有一下差别的: a,以png8保存的图片与原来的图片偏差很大,周围出现锯齿,渐变模糊都没有了;于是改换png24存储,发现与原图片相差不大,几乎没有失真; b,png8格式存储
2017-11-21T09:20:00Z
2017-11-21T09:20:00Z
5Clay
https://www.cnblogs.com/5-clay/
【摘要】项目需要透明的图片,所以在Ctrl+Shift+Alt+S保存图片时,有png8和png24供选择,其实两种格式保存的图片是有一下差别的: a,以png8保存的图片与原来的图片偏差很大,周围出现锯齿,渐变模糊都没有了;于是改换png24存储,发现与原图片相差不大,几乎没有失真; b,png8格式存储 <a href="https://www.cnblogs.com/5-clay/p/7874267.html" target="_blank">阅读全文</a>