![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Html5、JavaScript、ES6
文章平均质量分 78
胖鹅68
熟悉h5,jquery,css2/3,angular,ionic,springMVC,hibernate,spring,struts,mybatis,mysql,oracle,linux,android等技术
了解openfire开源系统,熟悉openfire的IM功能
展开
-
js判断数据类型(typeof、instanceof、Object.prototype.toString.call(value))
在遍历JSON 对象的时候,发现JSON 对象的值是各种类型,如果是数组和JSON 对象,就要继续遍历,问题:怎么知道值是什么类型?原创 2023-03-04 14:59:21 · 346 阅读 · 1 评论 -
Clipboard 剪贴板学习笔记
Clipboard.read()方法用于复制剪贴板里面的数据,可以是文本数据,也可以是二进制数据(比如图片)。由于用户可能把敏感数据(比如密码)放在剪贴板,允许脚本任意读取会产生安全风险,所以这个 API 的安全限制比较多。ClipboardItem 接口是对剪切板里的内容的抽象,比如我们选中网页上的一段文字,并右击选择复制,Clipboard.write()方法用于将任意数据写入剪贴板,可以是文本数据,也可以是二进制数据。用户使用剪贴板数据,进行粘贴操作时,会触发paste事件。原创 2023-01-05 10:54:27 · 1853 阅读 · 0 评论 -
浏览器绑定快捷键KeyboardEvent
对象描述了用户与键盘的交互。每个事件都描述了用户与一个按键(或一个按键和修饰键的组合)的单个交互;事件类型keydown,keypress与keyup用于识别不同的键盘活动类型。属性只读返回一个 Boolean,如果按键事件产生时,Alt(OS X 中是 Option 或⌥)键被按下,则该值为true。只读返回一个 Boolean,如果按键事件发生时 Ctrl 键被按下,则该值为true。只读that istrue只读that istrue"key", 可选,默认为""原创 2022-09-08 15:35:08 · 975 阅读 · 0 评论 -
250张png图片实现动画实现方案事件
最近开发的一个项目中,要求使用一个动画效果,UCD 提供了三种解决方案,各有优劣。使用 生成一个SVG 动画,浏览器渲染SVG,由于DOM频繁的变动,即不断的重绘,这个动作会大量的占用CPU 和 GPU 的资源,针对一些比较老的机器(工厂、政府单位的机器可能比较老旧),可能会导致资源不够,打开浏览器CPU直接冲到100%导致浏览器卡死。应用场景:针对特定性能比较强悍的机器,适用于全屏和局部界面的动画视频或者gif 能很好的展示动画的完整性,资源占用也比较小,但是会有如下缺点:应用场景:可以用于浏览器部分界原创 2022-09-06 14:37:06 · 1297 阅读 · 0 评论 -
offsetX pageX clientX offsetHeight offsetParent 和 offsetLeft学习笔记
工作中,需要在航拍图中 添加摄像头在航拍图中的位置,因此,需要开发一个功能:鼠标点击航拍图(背景),显示鼠标点击位置在页面中的位置(pageX和pageY),然后将坐标数据告诉后台,手动添加到数据库中。原创 2022-08-25 13:37:46 · 595 阅读 · 0 评论 -
js装饰器@decorator学习笔记
js装饰器原创 2022-07-06 15:13:57 · 205 阅读 · 0 评论 -
js 双冒号(::)运算符
文章目录一、参考二、call(),applay(),bind() 函数2.1 API 说明2.2 API 差异说明三、 箭头函数 VS. 双冒号运算符3.1 ( :: ) 双冒号3.2 react 中的使用案例一、参考阮一峰 双冒号运算符二、call(),applay(),bind() 函数2.1 API 说明let arg = [arg1, arg2, arg3......]1. call(target,...arg) 第一个参数,是this指向第二个参数,`及其以后的参数都是数组原创 2022-03-14 13:55:30 · 1382 阅读 · 0 评论 -
escape,encodeURI,encodeURIComponent有什么区别?
文章目录一、参考二、函数介绍2.1 escape(string)2.2 encodeURI(URIstring)2.3 encodeURIComponent(URIstring)三、encodeURIComponent() 函数 与 encodeURI() 函数的区别?四、使用场景一、参考escape,encodeURI,encodeURIComponent有什么区别?encodeURIComponent() MDN二、函数介绍2.1 escape(string)概念escape是对字原创 2022-02-18 18:40:48 · 504 阅读 · 0 评论 -
MutationObserver监听DOM变化
文章目录一、参考二、快速入门三、MutationObserver相关对象和方法3.1 MutationObserver3.2 MutationObserver.observe()3.3 MutationObserverInit四、经典案例4.1 MutationObserver的callback回调函数是异步的,只有在全部DOM操作完成之后才会调用callback。4.2 如何模拟添加节点?一、参考MutationObserver MDNMutationObserver observe() MDN原创 2022-02-15 13:43:31 · 1887 阅读 · 0 评论 -
扩展 js复制内容到剪贴板
文章目录一、参考二、原理三、代码实现四、代码实现4.1 普通HTML代码中实现4.2 vue中 v-copy指令一、参考分享8个非常实用的Vue自定义指令document.execCommand MDN二、原理动态创建 textarea 标签,并设置 readOnly 属性及移出可视区域将要复制的值赋给 textarea 标签的 value 属性,并插入到 body选中值 textarea 并复制将 body 中插入的 textarea 移除在第一次调用时绑定事件,在解绑时移除事件原创 2022-02-15 10:13:42 · 471 阅读 · 0 评论 -
在input、textarea光标处添加字符串(selection、range)
文章目录一、参考二、问题描述三、快速入门四、内置对象介绍HTMLInputElement介绍Selection介绍Range五、代码集合在文本控件的光标位置添加 字符串一、参考setSelectionRange()参考Selection MDNRange MDN二、问题描述业务需求:摄像头发现有违章停车,就需要短信通知到相关车主开发任务:需要提前编辑好相关短信模板,比如时间、车牌号、车主名字等通用模板信息,需要使用特定字符代替,方便后台解析。而这些字符串是开发定的,对编写短原创 2022-02-15 09:52:28 · 2829 阅读 · 0 评论 -
async await 实现Sleep 等待效果
文章目录一、问题描述二、如何保证刷新顺序三、Vue 代码案例一、问题描述在工作中,地图中的车辆需要随着GPS移动,这样就需要地图的中心点是以车子为中心的,直接调用setCenter改变中心点的位置,当屏幕很大的时候,用户就觉得很晃眼,最好的方式就是用flyto函数,实现地图的平移顺滑移动。但是早期版本API 中没有flyto,解决办法就是将当前中心点到最终的中心点拆成若干个节点,然后快速刷新,实现小步快跑,提高用户体验。问题:要保证拆分的中间点要等待页面刷新之后才能启动下一个中心点二、如何保证刷新原创 2022-01-19 10:34:21 · 1144 阅读 · 0 评论 -
HTML画表格table边线重合问题(border-collapse: collapse;)
文章目录一、参考问题描述解决思路一、使用DIV + CSS二、使用table border-collapse案例一、参考CSS border-collapse 属性 问题描述工作中,需要画一个表格,需要显示border,于是使用DIV+CSS的方式,如果设置“border: 1px solid red”的样式,结果div重合的地方就会出现2倍的边线,与设计不符解决思路一、使用DIV + CSS如果一定要使用DIV+CSS, 则需要区分第一行 、 最后一行 、第一列、最后一列 、中间表格的原创 2021-12-03 18:23:29 · 7892 阅读 · 0 评论 -
js cookie常见API 操作(学习整理)
文章目录一、参考二、JavaScript cookie2.1 cookie 介绍2.1.1 cookie 的作用2.1.2 优点2.1.3 缺点2.2 cookie 的 CURD(增删查)2.3 常见问题2.3.1 指定可访问的cookie的路径?2.3.2 指定可访问的cookie的主机名?三、第三方js-cookie3.1 安装3.2 引用库3.3 快速入门3.4 API一、参考菜鸟 cookie 介绍js-cookie github二、JavaScript cookie2.1 cook原创 2021-09-26 14:57:03 · 1151 阅读 · 0 评论 -
js事件Event对象(自定义事件对象 CustomEvent)
文章目录一、参考二、Event 接口介绍2.1 事件分类三、 创建过时Event不推荐3.1 document.createEvent3.1.1 语法`var event = document.createEvent(type);`3.1.2 案例3.2 Event.initEvent()3.2.1 语法 `event.initEvent(type, bubbles, cancelable);`3.2.2 案例四、推荐自定义事件4.1 CustomEvent()4.1.1 语法`event = new Cu原创 2021-09-09 13:47:30 · 3764 阅读 · 0 评论 -
HTML链接标签<a>实现(canvas)下载图片
HTML链接标签实现下载文章目录一、参考二、问题描述2. 1 利用canvas下载图片2.2 思考三、 HTML链接标签介绍3.1 概念3.2 案例3.3 属性说明四、 下载4.1 URL.createObjectURL()4.1.1 概念4.1.2 语法 `objectURL = URL.createObjectURL(object);`4.1.3 内存管理4.1.4 案例4.2 URL.revokeObjectURL()4.2.1 概念4.2.1 语法`window.URL.revokeObjectU原创 2021-09-09 11:57:41 · 961 阅读 · 0 评论 -
JavaScript模块(ES6 module)化总结(import())
文章目录一、参考二、why 模块化2.1 JavaScript设计缺陷2.2 随着前端和JavaScript的快速发展,JavaScript代码变得越来越复杂,不能满足需求2.3 没有模块化的JavaScript的模块化方案2.3.1 全局函数2.3.1.1 示例2.3.1.2 缺点2.3.2 将函数封装到对象命名空间下2.3.3 立即函数调用表达式(IIFE,Immediately Invoked Function Expression)2.3.3.1 示例2.3.3.2 缺点三、CommonJS规范3.原创 2021-09-03 12:01:21 · 3244 阅读 · 0 评论 -
从Vue.extend API了解到Object.create实现继承
文章目录一、参考二、问题描述三、Object.create()3.1 Object.create(proto,[propertiesObject]) 语法3.2 快速入门3.3 单继承3.4 多继承3.5 new Object() VS Object.create() 区别3.5.1 new Object()3.5.2 Object.create()四、Object.prototype.constructor4.1 功能说明4.2 快速入门一、参考Object.create() MDNObjec原创 2021-09-02 13:59:37 · 326 阅读 · 0 评论 -
浏览器视角看——重绘、重排
文章目录一、参考二、 渲染引擎概述2.1 渲染流程各个阶段三、渲染引擎阶段概述3.1 构建 DOM 树3.2 样式计算3.3 布局阶段3.4 分层为什么要分层?那么需要满足什么条件,渲染引擎才会为特定的节点创建新的图层呢?(满足之一)3.5 绘制3.6 分块3.7 光栅化3.8 合成和显示四、重排、重绘、合成4.1 重排4.2 重绘4.3 合成五、如果下载 CSS 文件阻塞了,会阻塞 DOM 树的合成吗?会阻塞页面的显示吗?一、参考强烈推荐 —— 李兵老师的 《浏览器工作原理与实践》二、 渲染引擎原创 2021-08-25 14:01:33 · 330 阅读 · 0 评论 -
浏览器(chrome)资源的优先级, preload和prefetch介绍
文章目录一、文章参考二、浏览器(chrome)资源的优先级2.1 浏览器一般的行为方式2.2 浏览器的加载一般顺序为2.3 浏览器加载资源的过程2.3.1 将资源分类2.3.2 安全策略检查2.3.3 资源优先级计算(分为三类)2.3.4 根据优先级下载资源三、资源预读取prefetch3.1 什么是链接预取?3.2 语法3.3 能够预取不同宿主的文档吗?3.4 a 标签() 会被预取吗?四、资源预加载preload4.1 语法介绍4.2 预加载的脚本4.3 加载资源优先级说明一、文章参考Link p原创 2021-08-23 16:24:03 · 2322 阅读 · 0 评论 -
浏览器视角看——消息队列和事件循环(EventLoop)、宏任务和微任务
文章目录一、参考二、 why 事件循环?2.1 循环任务的演进如果没有事件循环,代码运行完成,程序就终止了添加循环机制,保证程序不终止,并且持续运行引入消息队列,处理其他线程发送过来的任务三、如何处理高优先级的任务?何解决单个任务执行时长过久的问题?如何权衡效率和实时性?—— 引用微任务的概念四、宏任务(代码),微任务(代码)微宏任务执行顺序比较?总结一、参考强烈推荐 —— 李兵老师的 《浏览器工作原理与实践》二、 why 事件循环?先举个例子:一个线程在某个DOM节点上添加内容,另一个线程删除原创 2021-08-21 13:13:13 · 424 阅读 · 0 评论 -
String.prototype.slice() && Array.prototype.slice() 实现克隆数据
文章目录一、参考二、场景说明三、String.prototype.slice()语法参数说明返回值案例说明API四、Array.prototype.slice()语法参数说明返回值案例说明API一、参考Array.prototype.slice() MDNString.prototype.slice() MDN二、场景说明在Vue开发过程中,会遇到如下场景需要克隆一个数组,触发视图的更新在不影响原有数据的情况下,对一个一模一样的数据处理转换,防止多个地方共用一个数据产生未知影响三、S原创 2021-08-11 09:22:21 · 247 阅读 · 0 评论 -
javascript 正则表达式语法和API知识点整理
文章目录一、参考资料二、语法介绍创建正则表达式没有标志的搜索有标志的高级搜索特殊字符RegExp API 介绍regexObj.test(str)regexObj.exec(str)三、分组匹配(正则表达式中有括号)规则说明分组匹配分组不匹配四、String API介绍str.match(regexp)str.search(regexp)str.replace(regexp|substr, newSubStr|function)五、案例动态生成正则表达式六、补充(预查)?= 正向肯定预查?!= 正向否定预原创 2021-08-02 11:10:24 · 331 阅读 · 0 评论 -
js event对象学习(一)
在IE中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:oDiv.onclick=function(){ var oEvent=window.event;}尽管它是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后,事件对象就被销毁。DOM标准规则说,event对象必须作为唯一的原创 2016-09-07 17:53:02 · 452 阅读 · 0 评论 -
Promise.prototype.then().then()学习
文章目录一、问题描述二、介绍 Promise.prototype.then方法介绍then 中的回调函数 返回值三、解析代码一、问题描述最近审核一个同事的代码如下,感觉Promise.all()用法使用有点新奇,与我平时使用不一致,效果应该是没有问题的,不然测试就会测试出来// 防控圈切换场景,支持按防控圈,资源类型过滤统计queryResource (bClear) { const params = { } let _resCamera = [] let _resPolice =原创 2021-06-11 18:01:06 · 398 阅读 · 0 评论 -
快速执行ES6代码 babel-node
文章目录文章参考问题描述解决办法 —— babel-cli第一种:本地安装babel-cli第二种:全局安装 babel-cli文章参考如何愉快的运行ES6代码Node如何执行ES6代码问题描述今天想抽个时间分享 Rxjs ,但是很多例子是使用ES6的语法,为了克服环境过于复杂,本打算使用HTML 网页讲解的,但是考虑到工作中可能用ES6会更多,决定还是用E6的语法讲解。那么,怎么样才能快速运行ES6代码呢?解决办法 —— babel-cli第一种:本地安装babel-cli快速搭原创 2021-04-07 14:28:54 · 638 阅读 · 0 评论 -
JS 获取盒子模型对应的高宽(window.getComputedStyle、dom.getBoundingClientRect)
文章目录文章参考获取dom节点高宽的通用方法案例说明getBoundingClientRect() 获取DOM 的高度和宽度的办法?文章参考原生js操作dom添加删除替换class你了解getBoundingClientRect()?获取dom节点高宽的通用方法dom.style.width/height(只适用获取内联元素的宽和高)dom.currentStyle.width/height(获取渲染后的宽高,但是仅IE支持)window.getComputedStyle(do原创 2021-01-28 15:57:37 · 1791 阅读 · 1 评论 -
iframe跨域消息通信(postMessage和message事件)
文章目录文章参考知识点例子说明能不能使用非message事件?文章参考IFrame消息传递使用 iframe + postMessage 实现跨域通信知识点页面需要监听 message 事件,window.addEventListener(“message”, dealMessage, false);父页面向子iframe页面发送消息:document.getElementById("mapIframe").contentWindow.postMessage("父页面向子页面原创 2021-01-16 10:49:09 · 15395 阅读 · 3 评论 -
js 的解析和执行过程(变量提升)
文章目录文章参考问题描述js解析和执行过程介绍js的执行过程分为两大部分全局预处理阶段命名冲突变量和函数同名冲突 —— 函数优先,函数是一等公民变量和函数同名名冲突 —— 后者会覆盖前者执行阶段函数预处理阶段传入参数值一一对应传入参数没有对应的值没有用var声明的变量,会变成最外部LE的成员,即全局变量关于JS作用域和作用域链javascript并没有块级作用域javascript也没有动态作用域javascript的作用域为静态作用域文章参考JS的解析与执行过程问题描述最近想把js 基础好好复原创 2020-12-29 16:12:57 · 890 阅读 · 0 评论 -
js的事件循环机制 event loops[转载]
文章目录文章参考1. js的单线程2. 什么是事件循环呢?假定JavaScript同时有两个线程(事件)3.同步任务(代码),异步任务(代码)4.宏任务(代码),微任务(代码)我们只需记住:文章参考vue方法nextTick源码分析1. js的单线程我们知道JavaScript的一大特点就是单线程,而这个线程中拥有唯一的一个事件循环作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题2. 什么是事件循环呢?1.所原创 2020-12-25 16:13:44 · 625 阅读 · 1 评论 -
javascript 高阶函数和ES6简单实现AOP
问题描述最近在了解什么是埋点,埋点的作用和原理,发现典型的技术实现的最好方式就是通过 aop 面向切面编程最好。什么是AOPAOP , 个人理解就是“定义什么方法(目标对象(Target))在什么时间(before, after, around)在什么位置(目标的哪个方法或者属性)做什么事情(advise 增强)”应用场景日志记录性能监控埋点上报异常处理实现方式使用高阶函数将目标函数 和 切面函数 作为参数传入返回一个类似代理的函数对象// 原函数var takePhot原创 2020-12-24 09:25:45 · 682 阅读 · 2 评论 -
ES6链判断运算符(?.)和Null判断运算符(??)
文章目录参考链判断运算符(?.)应用场景短路机制delete 运算符括号的影响Null 判断运算符(??)优先级参考链判断运算符链判断运算符(?.)应用场景// 错误的写法const firstName = message.body.user.firstName;// 正确的写法const firstName = (message && message.body && message.body.user && message原创 2020-12-19 16:32:09 · 5858 阅读 · 2 评论 -
js 惰性函数(防止函数重复检测的应用场景)
文章目录参考应用场景上述案例的解决办法什么是惰性函数惰性函数的本质就是函数重写函数重写在函数被调用时,再处理函数。声明函数时就指定适当的函数。参考深入理解javascript函数进阶系列第四篇——惰性函数应用场景使用ajax的时候,不同的浏览器(IE 和 Chrome)创建 底层对象不同,为了代码的健壮性,每次都要做一次检测,这样就会比较麻烦function createXHR() { var xhr; try{ xhr = new XMLHttpRequest原创 2020-12-19 15:21:03 · 446 阅读 · 1 评论 -
javascript(js) 观察者模式和发布订阅模式
文章目录参考文档问题描述观察者模式观察者模式 democlass 描述观察者模式事件的观察者模式数组塌陷发布/订阅模式发布订阅的demoVue的事件管理函数$on && $emit && $off模拟事件管理器发布-订阅模式与观察者模式的区别参考文档视频参考观察者模式和发布订阅模式(JS)JavaScript 发布-订阅模式问题描述最近想学习一下Vue 源码,在设置$data的值的时候,是如何通知模板变化的,其中就用到了 “订阅-发布”模式,发现对此思路不是很原创 2020-12-17 11:41:54 · 592 阅读 · 0 评论 -
JSON 对象的克隆(JSON.stringify、解构)
文章目录文章参考带有function的JSON序列化JSON.stringify 介绍将JSON字符串反序列化(包含function的字符串)JSON.parse 介绍综合整理 —— 克隆方法文章参考带有function的JSON对象的序列化与还原带有function的JSON序列化JSON.stringify() MDNJSON.stringify 介绍JSON.stringify(value[, replacer [, space]])value将要序列化成 一个 JSON 字符串原创 2020-10-19 14:59:19 · 1614 阅读 · 0 评论 -
script 标签 type=‘module‘ defer async的作用
文章目录文章参考script 标签的行为默认行为(无任何修饰)<script async ><script defer ><script type="module" ><script type ="module"><script type ="module" async>案例文章参考在浏览器中使用JavaScript module(模块)script 标签的行为默认行为(无任何修饰)浏览器会立即加载并执行指定的脚本会阻塞 HTM原创 2020-09-02 14:03:02 · 4013 阅读 · 0 评论 -
Mockjs POST和GET不同参数返回不同结果的解决办法
文章目录文章参考问题描述Mock 关键API介绍说明API 介绍参数说明案例POST 请求,相同的URL不同的参数GET 请求,相同的URL不同的参数Restful 请求,不同的URL不同的参数文章参考Mock.mock() 方法介绍Mockjs如何拦截带参数的GET请求问题描述在工作中想使用POST请求方式获取数据字典的数据,由于不同的数据字典需要传递不同的参数,但是接口是同一个,这样就尴尬了,因为URL是固定的,那么怎么区分不同的参数呢?Mock 关键API介绍说明API 介绍Mo原创 2020-08-27 13:31:45 · 4948 阅读 · 4 评论 -
Vue2.x 路由实现地址栏变化的API(history.replaceState() 与pushState())
文章目录快速体验history 对象history的APIhistory属性`HTML5为history对象添加了两个新方法`history.pushState()参数案例步骤说明`不允许输入跨域网址`history.replaceState()history.replaceState() 与pushState()功能类似,除了这点:应用场景案例 (history.replaceState() 与pushState())快速体验在控制台中输入如下代码,回车history.pushState({name原创 2020-08-14 17:02:40 · 1404 阅读 · 0 评论 -
回流和重绘引发思考——DocumentFragment、Vue(keep-alive)
https://javascript.ruanyifeng.com/dom/node.htmldocument.createDocumentFragment()keep-alive虚拟DOM回流和重绘文章参考document.createDocumentFragment()详解回流和重绘及优化问题描述昨天同事培训Vue问了一个“回流”和“重绘”的问题,自己回答的是数据量过大导致浏览器渲染慢和卡顿的问题,Vue解决办法是使用虚拟DOM,缓存DOM组件,应该是没有给出准确答案,会后自己深入原创 2020-07-09 17:20:53 · 1670 阅读 · 0 评论 -
Promise多个请求、finally、链式调用学习
文章目录文章参考基本语法捕获异常处理链式调用promise的finally方法应用场景异步应用场景使用说明两个请求没有必然关系,各自执行回调即可两个请求有先后顺序,一定要先请求One之后再用Two多个请求都成功,但是请求之间没有关系多个请求只需要一个成功就做逻辑处理axios多个异步请求全部成功之后处理的业务请求封装使用案例文章参考阮一峰 ES6 promisevue实力封装axios基本语法早期浏览器兼容:Promise对象是ES6的内容,我们可以使用babel做一个转换,基本语法如下:原创 2020-06-24 09:44:57 · 2049 阅读 · 0 评论