Javascript
文章平均质量分 67
E_li_na
这个作者很懒,什么都没留下…
展开
-
ES12到ES6
ES12(2021)1、replaceAll所有符合规则的字符都将被替换掉const str = 'hello world'str.replaceAll('l','')//'heo world'2、Promise.anyPromise.any() 接收一个Promise可迭代对象,只要其中的一个 promise 成功,就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功(即所有的 promises 都失败/拒绝),就返回一个失败的 promiseconst原创 2021-10-14 17:01:30 · 378 阅读 · 0 评论 -
localeCompare实现中文排序
定义:用本地特定的顺序来比较两个字符串。语法:stringObject.localeCompare(target)参数:target——要以本地特定的顺序与 stringObject 进行比较的字符串。返回值:说明比较结果的数字。(1)如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。(2)如果 stringObject 大于 target,则该方法返回大于 0 的数。(3)如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0。原创 2021-09-13 14:39:50 · 636 阅读 · 0 评论 -
document.documentElement.clientHeight 与 document.body.clientHeight
document.documentElement.clientHeight 与 document.body.clientHeight这两个是有区别的,前一个是html标签,后一个是body标签。这两个是不同的东西,如果这两个的值返回相同的值,应该是设置了 body,html{ height: 100%}...原创 2020-12-18 10:01:45 · 374 阅读 · 0 评论 -
vue实现图片预加载实操
业务场景是这样的:在页面里有一个提醒文案,提醒文案里有个按钮,点击按钮会弹出示例弹窗,弹窗里上面有标题,中间一个比较大的图片,27kb;下面有个按钮。在苹果手机使用微信打开时,上面的标题和下面的按钮都先于图片加载出来。中间的按钮过了一会才渲染出来。为此,我也懒得去找ui沟通能不能把图片弄小一点,正好试试图片预加载这个功能。于是,在网上搜索到1、实例化Image对象,添加src为需要预加载的图片路径function preloadImg(url) { var img = new Image()原创 2020-12-17 16:51:44 · 1856 阅读 · 1 评论 -
js遍历数组三种方式对比利弊
js遍历数组有几种方式:for,forEach(es5),for of (es6)for循环略显臃肿;forEach不臃肿,但是,不能用break中断,也不能用return语句跳出去;for of 弥补forEach的不足,还可以遍历字符串;遍历类数组;支持Map,Set对象的遍历...原创 2020-08-31 19:39:11 · 279 阅读 · 0 评论 -
手写swiper组件基本原理
主要使用touchstart,touchmove,touchend事件touchstart时记录用户触摸点的x,y坐标,存入数组[x,y],将slide Container的transition设置为0s(默认有transition: all 0s ease 0s)touchmove事件也会进行触摸位置移动,触摸的距离len为用触摸点的x坐标e.touches[0].clientX减去touchstart时记录的数组里的x坐标.(得出的len为负值)移动的位置为:负的slide container原创 2020-07-14 11:24:50 · 1827 阅读 · 0 评论 -
总结javascript中的遍历
(1)for…in可用范围:字符串,数组,对象不可用范围:Map,Set返回:字符串和数组返回下标,对象返回属性名称缺点:无法保证属性的顺序for(let i in 'good'){ console.log(i);//0,1,2}for(let j in ['a','b','c']){ console.log(j);//0,1,2}for(let k in { a:"0",b:"1"}){ console.log(k);//a,b}for (let prop in new原创 2020-07-05 10:54:41 · 158 阅读 · 0 评论 -
由vue遍历对象引发对深度拷贝的思考
项目中用v-for遍历一个对象{ count:"",age:""}进行参数渲染,输入参数后送到后端要转化为JSON字符串,于是提交之前新声明了一个对象,值为原先对象的JSON.stringify字符串。但是,问题来了,后端接口还没部署上去,调用的时候是502,接口调用不成功不会走剩下的流程。此时,数据已经改动为JSON字符串了,v-for遍历的对象改成JSON字符串“{“count”:“bb”,“age”:“ff”}”。于是遍历时就以字符串的形式进行渲染,出现如下图所示的参数渲染。那么,如何避免出现这原创 2020-07-02 09:10:40 · 1173 阅读 · 0 评论 -
ios微信软键盘之殇
先说一下业务场景。界面有弹窗,在弹窗内输入时,弹出软键盘输入短信验证码。验证成功后隐藏弹窗,弹出有复制按钮的弹窗。点击复制按钮,复制相关内容。在开发这个功能的时候,有两个渠道,一个是支付宝h5,一个是微信h5。结果是微信IOS端出现了bug,弹出有复制按钮的弹窗后,点击复制按钮没有任何反应。于是,我这个比较直的人就一直点,点点点,并且进行了计数,一开始,发现大概点了有一分钟后,界面没有卡了,点击复制按钮成功复制到了内容。我首先想到的是复制插件是不是有问题,查看了复制插件的源码,发现复制插件并没有设置什原创 2020-06-21 21:55:03 · 339 阅读 · 0 评论 -
javascript的同步异步操作
数组是引用类型,console.log是异步操作,console.log在前面而对数组的操作是在后面时,console.log打印出来的数组可能是被操作之后的数组。为了避免这样的情况发生,必须对数组进行深拷贝。...原创 2019-04-24 19:20:14 · 283 阅读 · 0 评论 -
浏览器缓存
浏览器缓存:https://segmentfault.com/a/1190000017962411#articleHeader10原创 2019-01-21 14:45:23 · 179 阅读 · 0 评论 -
image-compressors前端图片压缩工具
image-compressorscompressorSettings.toWidth:结果(压缩/拉伸)图像的宽度(以像素为单位),默认值:100。compressorSettings.toHeight:结果(压缩/拉伸)图像的Mime类型,允许值image / png,image / jpeg,默认值:“image / png”compressorSettings.quality:结果压...转载 2019-01-23 18:17:40 · 1247 阅读 · 0 评论 -
用js创建一个可拖曳的元素
我们一直使用并且理所当然的常见手势是能够在屏幕上拖动元素。尽管这种拖拽手势有多么常见,但是没有很好的内置支持来使网络上的元素可拖动。如果我们希望超越鼠标并支持触摸之类的东西,那就更是如此!这就是本教程的用武之地。在接下来的几节中,我们将介绍一个纯粹的基于JavaScript的解决方案(也就是没有jQuery),它允许您将任何无聊的元素转换为可以在页面上拖动的元素。继续~1.例子原文链接2....翻译 2018-10-23 18:01:42 · 1239 阅读 · 0 评论 -
Polyfill简介
1.什么是Polyfill?Polyfill是一个js库,主要抚平不同浏览器之间对js实现的差异。比如,html5的storage(session,local), 不同浏览器,不同版本,有些支持,有些不支持。Polyfill(Polyfill有很多,在GitHub上https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-P...原创 2018-04-13 10:40:46 · 36621 阅读 · 1 评论 -
history对象和HTML5 History API
一、浏览器的history对象1.history对象简介History对象是window对象的一部分,包含用户访问过的URL,可以通过window.history访问。所有浏览器都支持这个对象。2.history对象属性length:返回历史列表中的网址数。 如果当前窗口访问了一个网址,那么history.length属性就为1。3.history对象方法history...原创 2018-04-13 11:26:53 · 802 阅读 · 0 评论 -
深入理解三个定时器
最好用的是requestAnimationFrame,有篇详细描述的文章,其次setItmeout和setInterval是有缺点的。他们都不精确有篇文章有(具体描述)[http://www.cnblogs.com/xiaohuochai/p/5773183.html#anchor3]。他们的时间参数是指创建了定时器后,把定时器代码添加到浏览器UI线程里的时间。比如5s的时候创建了定时器,定时器的...原创 2018-05-25 10:47:05 · 683 阅读 · 0 评论 -
Airbnb JavaScript代码规范(一)
github英文文档,github中文文档,建议看英文文档。1.引用 1)对所有的引用使用const,而不用var。确保你不会对引用重新赋值,也不会导致出现bug,或难以理解。//badvar a=1;var b=2;//betterconst a=1;const b=2; 2)如果你一定要用到可变动的引用,使用let,不要用var。因为le...原创 2018-05-16 15:00:51 · 624 阅读 · 0 评论 -
Airbnb JavaScript代码规范(二)
8.箭头函数 1) 当你需要用到匿名(anonynous)函数的时候,使用箭头函数。eslint:prefer-arrow-callback,arrow-saocing它创建了一个在其上下文中执行的函数版本,这通常是您想要的,并且是一种更简洁的语法。如果你有一个相当复杂的函数,你可能会将这个逻辑移到它自己的命名函数表达式//bad[1,2,3].map(function k(x...原创 2018-05-16 19:16:25 · 295 阅读 · 0 评论 -
es8新特性
发布时间:2017年6月 总共有6个特性,最主要是第五第六! (1)字符串填充(padStart、padEnd) 语法:str.padStart(targetLength[,padString])str.padEnd(targetLength[,padString])例子:'something'.padStart(4);//some'something'.padStart...原创 2018-06-04 14:50:49 · 646 阅读 · 0 评论 -
options预请求
0.预请求来由XMLHttpRequest会遵守同源策略(same-origin policy). 也即脚本只能访问相同协议/相同主机名/相同端口的资源, 如果要突破这个限制, 那就是所谓的跨域, 此时需要遵守CORS(Cross-Origin Resource Sharing)机制。 。那么, 允许跨域, 不就是服务端设置Access-Control-Allow-Origin: *就可...原创 2018-08-16 14:19:42 · 1339 阅读 · 0 评论 -
javascript格式化数字成K,M等格式
数字格式化成K,M等格式 function nFormatter(num, digits) { const si = [ { value: 1, symbol: "" }, { value: 1E3, symbol: "K" }, { value...原创 2018-10-07 20:39:36 · 7083 阅读 · 0 评论 -
wx.getLocalImagData接口的使用时需要注意的点
这篇主要讲到wx.getLocalImagData接口的使用时需要注意的点。wx.getLocalImgData({localId: '', // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据,可以用img标签显示}});该接口获取到的是图片的数据...转载 2018-10-08 11:35:40 · 756 阅读 · 0 评论 -
异步调用三部曲
一、回调地狱 getMoreData(a,b => { getMoreData(b,c => { getMoreData(c,d => { getMoreData(d,e => { console.log('e'); }) }) }) })})二、Promise改进回调地狱.then(a => getMor...原创 2018-10-08 15:06:44 · 214 阅读 · 0 评论 -
第一个vue应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HelloWorld</title> <script src="https://cdn.jsde原创 2018-04-08 20:03:28 · 197 阅读 · 0 评论