![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 78
codingWeb
知行合一
展开
-
three.js实现全套3d测距功能(附完整代码)
网上关于测距的实现都是比较片面的,没有完整的例子,最近因为需求,有对相关需求进行实现,给出我的实现方案,供大家参考效果图:完整代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c原创 2022-04-24 11:54:02 · 3469 阅读 · 25 评论 -
一道很难的promise题目
上篇文章讲了promise的实现,这篇则结合题目让你对promise有个更深入的认识:为了能让大家有个更直观的认识,会使用到https://www.jsv9000.app/这个工具,它能可视化出异步任务执行的整个过程题目1: 简单,相信都能答出 Promise.resolve().then(() => { console.log(0) return 'aaa' }).then(res => { console.log(res)原创 2022-03-07 22:56:06 · 833 阅读 · 0 评论 -
实现一个符合promiseA+规范的promise
关于异步的解决方案目前有四种:callback(回调函数)generato + co库promiseasync+awaitpromise的基本特点:promise代表的是承诺的意思 promise最核心的就是有三个状态,等待态(pending), 成功态(fulfilled),失败态(rejected)状态只能从等待态改变成其他状态 ,不能从成功变成失败,也不能从失败变成成功默认你传入的executor会立刻执行, 这个executor函数接受两个参数 resolve,reject原创 2022-03-03 00:48:17 · 531 阅读 · 0 评论 -
measure.js,一个Web元素度量工具,欢迎来star~~,为ui走查打造(脱离蓝湖也能使用它的度量功能
蓝湖里面的尺寸度量功能好用吗?现在脱离蓝湖也能使用了原创 2021-12-25 23:50:54 · 722 阅读 · 0 评论 -
前端监控原理及实践
随着产品的用户数量的不断增长,对于站点体验衡量的的需求也日益紧迫,用户会将产品和他们每天使用的体验最好的 Web 站点进行比较。想着手优化,则必须先有相关的监控数据,才能对症下药。性能是留住用户的关键。 大量的研究报告已经表明了性能和商业成绩的关系,糟糕的性能会让您的站点损失用户数、转化率和口碑。错误监控则能够让开发者第一时间发现并修复问题,单靠用户遇到问题并反馈是不现实的,当用户遇到白屏或者接口错误时,更多的人可能会重试几次...原创 2021-10-06 19:18:47 · 1010 阅读 · 1 评论 -
JS中document和window的区别
标题Document 对象:每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。## Document 对象描述:HTMLDocument 接口对 DOM Documen...原创 2019-09-30 16:13:53 · 1221 阅读 · 0 评论 -
前端js常用剪贴板(复制粘贴)操作和应用,以及navigator.clipboard新粘贴板API使用
最近的项目上需要做复制粘贴相关的操作,来总结下吧复制、剪切、粘贴事件:copy 发生复制操作时触发;cut 发生剪切操作时触发;paste 发生粘贴操作时触发;每个事件都有一个 before 事件对应:beforecopy、beforecut、beforepaste;这几个 before 一般不怎么用,所以我们把注意力放在三个事件就可以了。触发条件:鼠标右键菜单的复制、粘贴、剪切;使用了相应的键盘组合键,比如:ctrl+c、ctrl+v;复制操作:copy事件使用示例:<原创 2020-12-28 23:29:14 · 14603 阅读 · 4 评论 -
探索图片懒加载的最佳实践及封装一个懒加载插件
这周研究了下目前图片懒加载的所有主流方式,分享下,末尾封装了一个兼容所有方式的图片懒加载插件图片懒加载的意义:1.首先它能提升用户的体验,试想一下,如果打开页面的时候就将页面上所有的图片全部获取加载,如果图片数量较大,对于用户来说简直就是灾难,会出现卡顿现象,影响用户体验。2.有选择性地请求图片,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。原理:1、将页面中的img标签src指向一张小图片或者src为空,2、然后定义data-image属性(这个属性可以自定义命名,我常用data原创 2020-11-24 22:19:49 · 479 阅读 · 2 评论 -
js中url、base64、blob、字符串等相互转换方法---有关系图,最全总结
事情的起因是这样,这周在工作时,调用了一个图片转灰度透明的接口,返回来的是一个image字段不是一个url地址,是一个base64编码的字符串一般来说,图片在后端的存储方式分为两种:可以将图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中;将图片转换成二进制流或base64,直接存储到数据库的 Image 类型字段中.对于第一种存储方式,我们前端直接将存储路径赋值给 src 属性即可轻松显示。对于第二种存储方式,我们前端需要将二进制流交由 blob 对象处理,然后通过 b原创 2020-11-08 00:50:41 · 11177 阅读 · 5 评论 -
contentEditable,window.getSelection详解---可编辑div,容器,设置/获取光标位置,光标处插入内容及光标的操作
这周碰到一个骚东西,contentEditable ,它是用来指定一个元素是否是可编辑的,这也是富文本编辑器实现的底层支持,网上关于这部分东西的资料比较少或者不全,所以我来整理下关于这个属性,和可编辑区域的一些操作吧,比如获取光标位置,设置光标,往可编辑区域光标处插入内容等等HTML中的contentEditable的属性可以打开某些元素的可编辑状态.也许你没用过contentEditable属性.甚至从未听说过.contentEditable的作用相当神奇.可以让div或整个网页,以及span等等元素原创 2020-11-07 00:49:55 · 8607 阅读 · 8 评论 -
浅析js中隐式类型转换的规则(巨坑)
虽然开发中基本都是用的===全等,==很少用,基本不用,但奈何有些面试题考的很刁钻,我就来做个小总结把大多数隐式转换的规则:先说结论:大多数情况下,隐式转换都遵循这个规则,当然有特殊情况,特殊情况特殊对待就行了,当使用==判等时,会转成同类型再比较1. 对象和布尔值比较对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字[] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1,所以为false2. 对象和字符串比较对原创 2020-10-15 18:42:27 · 1189 阅读 · 3 评论 -
Js中process.nextTick,setImmediate,setTimeout,Promise.then,async/await终极异步执行顺序全解析
虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解await做了什么处理从字面意思上看await就是等待,await 等待的是一个表达式,这个表达式的返回值可以是一个promise对象也可以是其他值。很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码,实际上await是一个让出线程的标志。await后面的函数会先执行一遍,然后就会跳出整个async函数来执行后面js栈后面的代码。等本轮事件循环执行完了之后又会跳回到async函数中等待await原创 2020-09-28 22:09:07 · 1271 阅读 · 3 评论 -
react独特的事件机制(react-events)
react事件机制独特在哪里?function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> );}当我们在组件上设置事件处理器时,React内.原创 2020-08-19 18:17:31 · 1462 阅读 · 0 评论 -
react中setState()是异步的还是同步的,如何控制?
上上篇博客我讲了setState() 的批处理合并,而setState()是异步的还是同步的,和setState() 的批处理有很大的关系,推荐先看完上上篇博客再来看这篇,会清晰很多地址如下:setState()批处理,合并策略,控制批处理----batchUpdatessetState()是异步的还是同步的?先看异步的情况:import React, { Component } from 'react';class com2 extends Component { state =原创 2020-08-16 16:36:48 · 4589 阅读 · 1 评论 -
React-hooks的useEffect模拟componentDidUpdate生命周期
先回忆一下:class组件中的componentDidUpdate生命周期是初次渲染完后,当接收的props,state改变时或者this.forceUpdate()就会调用函数组件中的useEffect可以看做 componentDidMount,componentDidUpdate和componentWillUnmount 这三个函数的组合useEffect( ()=>{ } )只有第一个参数的时候此时相当于componentDidMount + componentDidUpdat原创 2020-08-15 18:14:59 · 10548 阅读 · 6 评论 -
setState()批处理,合并策略,控制批处理----batchUpdates
之前一直在做vue开发,可能对vue了解的多一些,也期待vue3的发展,但是近期想开始整明白react背后的事情react开发对setState的使用可能一点也不陌生,但肯定会碰到过这种情况import React from 'react'export default class BatchedDemo extends React.Component { state = { number: 0, } handleClick = () => {原创 2020-08-15 16:25:04 · 2742 阅读 · 4 评论 -
url编码 及 js中url编码的api和应用
在因特网上传送URL,只能采用ASCII字符集,即是常说的get请求只能使用ASCII 字符也就是说URL只能使用字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*’()[不包括双引号]、以及某些保留字(空格转换为+),才可以不经过编码直接用于URLRFC文档的建议:这意味着 如果URL中有汉字或者不在ASCII字符集中的特殊符号,就必须编码后才能使用。对于非ASCII字符,RFC文档建议使用utf-8对其进行编码得到相应的字节,然后对每个字节执行百分号编码可以看到a!@$%%5E&原创 2020-08-09 16:23:58 · 1137 阅读 · 0 评论 -
手写bind(),call(),apply(),防抖和节流实现,及常用的数组api
手写xxx并不是说一定要在开发中去用才有意义,也不是为了覆盖原生提供的方法,而是培养自己的思维方式,学习下这种实现思路,让自己对方法的运用更加通透bind,call,apply的实现;需要注意的是,bind的一种特别用法:通过bind改变完this指向后返回的函数,调用的参数也算在内的哦 function fn(a, b) { console.log(a, b) console.log(arguments) } var newFn = fn.bind(this, 1, 2)原创 2020-07-30 21:56:01 · 243 阅读 · 0 评论 -
react16知识点总结,试图一篇搞定react16
接触react有段时间了,有需求就做一次总结吧,为同学,为友人,也为同行,更为大环境,如有错误还望指出当然,这只是react16的基本使用,里面没说react-hook,和redux,因为说这两个庞然大物又是一篇长文章了react16知识点目录:react的基本概念:jsx的理解:Render函数:react列表渲染,遍历数组:组件化开发:受控组件和非受控组件:推荐使用受控组件Props数据传递:父传子,子传父props验证和默认值:state状态原创 2020-07-24 23:46:08 · 307 阅读 · 0 评论 -
直击算法,剖析前端高频算法(含排序算法,去重,数组扁平化,交差并补,深浅拷贝)
大O标识法和时间复杂度:度量一个程序的执行时间通常有两种方法 - 事后统计的方法 - 事前分析估算的方法 OΟ(1)<Ο(log2(n))<Ο(n)<Ο(n^2)<Ο(n^3)<…<Ο(2^n)Ο(1):如果算法的执行时间不随着问题规模n的增加而增长,即使算法中有上千条语句,其执行时间也不过是一个较大的常数let a=12;let b=13;let temp=a;a=b;b=temp;Ο(log2(n)):当数据增大 n 倍时,耗时增大 logn 倍(这里的 log 是以 2原创 2020-07-15 02:16:15 · 226 阅读 · 0 评论 -
vue2中Options API 和 vue3中Composition API 的对比
回顾一下:在vue2中如何组织代码的,我们会在一个vue文件中methods,computed,watch,data中等等定义属性和方法,共同处理页面逻辑,我们称这种方式为Options API缺点: 一个功能往往需要在不同的vue配置项中定义属性和方法,比较分散,项目小还好,清晰明了,但是项目大了后,一个methods中可能包含20多个方法,你往往分不清哪个方法对应着哪个功能vue3中的Composition API就是用来解决这个问题的在vue3 Composition API 中,我们的原创 2020-06-05 16:14:39 · 9714 阅读 · 2 评论 -
原生js造轮子之----仿ElementUI消息提示组件,含生命周期钩子
先来看看ElementUI消息提示组件官网:https://element.eleme.cn/#/zh-CN/component/message我的效果:代码如下:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2020-05-25 22:44:54 · 718 阅读 · 1 评论 -
关于Cookie和express中cookie的使用,以及跨域请求携带Cookie的问题和解决方案
一、关于Cookie在我们关闭一个登录过的网址并重新打开它后,我们的登录信息依然没有丢失;当我们浏览了商品后历史记录里出现了我们点击过的商品;当我们推回到首页后,推荐商品也为我们选出了相似物品;事实上当我们有过此类操作后,浏览器会将我们的操作信息保存到cookie上面。阿进而言之,cookie就是储存在用户本地终端上的数据。Cookie的特点cookie保存在浏览器本地,只要不过期关闭浏览...原创 2020-03-18 18:38:02 · 1404 阅读 · 0 评论 -
浅谈浏览器的渲染引擎和渲染过程,以及阻塞(css阻塞,js阻塞)
一、浏览器的渲染引擎主要模块一个渲染引擎主要包括:HTML解析器,CSS解析器,javascript引擎,布局layout模块,绘图模块HTML解析器:解释HTML文档的解析器,主要作用是将HTML文本解释成DOM树。CSS解析器:它的作用是为DOM中的各个元素对象计算出样式信息,为布局提供基础设施Javascript引擎:使用Javascript代码可以修改网页的内容,也能修改c...原创 2020-05-04 02:08:11 · 950 阅读 · 0 评论 -
ECharts的介绍和使用方法,以及其他常见的数据可视化库介绍
常见的数据可视化库:D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案 等等Highcharts 和 Echarts 就像是 Offi...原创 2020-04-30 20:47:35 · 1067 阅读 · 0 评论 -
组合使用css选择器
一、用法介绍在css中.classA.classB指的是一个元素,同时满足classA和classB,即(class=“classA classB”)<style>.classA.classB{ border:1px solid red;}.classa .classb{ border:1px solid blue;}</style>--------...原创 2019-07-16 14:09:04 · 1144 阅读 · 0 评论 -
js解决浏览器兼容性问题的原理
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> </div> ...原创 2019-09-09 20:36:33 · 256 阅读 · 0 评论 -
用canvas和js模拟重力小球
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ margin: 0; } canvas{ backgroun...原创 2019-09-06 11:40:43 · 547 阅读 · 0 评论 -
用html,css,js模拟飞机大战
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ...原创 2019-09-06 11:36:10 · 1074 阅读 · 0 评论