JavaScript
小鸟哗啦啦
日落月深,风华雪月动人,久别遇故人,沉沦
展开
-
ElementUI的不常见报错Error in beforeDestroy hook: “Error: [ElementForm]unpected width
beforeDestroy 钩子中的错误:‘Error: [ElementForm]unpected width‘原创 2022-11-15 14:29:18 · 7402 阅读 · 5 评论 -
tsconfig.json的配置说明
tsconfig.json的配置说明原创 2022-07-19 09:38:46 · 1237 阅读 · 0 评论 -
项目中自用的 .eslintrc.js 配置
自用eslint配置原创 2022-06-30 08:59:04 · 2109 阅读 · 0 评论 -
滚动条的样式选择器
滚动条的样式选择器原创 2022-06-23 08:42:06 · 148 阅读 · 0 评论 -
TypeError: Object(...) is not a function at eval问题
问题描述:项目运行时控制台报错,这里拿别人的图说明一下可以看到,assginPermission.vue这个文件中报错;这里需要确定的有一下的几个点:1.引入名称,比如说getEvaluationBuyMember 这个函数在api/piaget/common.js中的名称2.存在与否,在api/piaget/common.js中是否存在getEvaluationBuyMember3.引入方式,common.js 中是 使用 export 导出的函数,所以需要 ...原创 2021-11-24 10:39:07 · 5342 阅读 · 0 评论 -
解决el-dialog弹出时,页面抖动,右侧会缩小的问题
问题描述:我们在使用el-dialog时,会发现弹出框弹出时,页面会抖动,直接效果就是页面右侧会发生变化,缩小了几个像素点;体验感不是很好,另一个就是会影响到页面的布局;解决方法:1.全局设置body的padding-right: 0 !important;不太可取,虽然可以解决这个问题,但是影响了页面的布局效果;2.在main.js中,找到引入element的地方,举个例子import Element from "element-ui";import "element-ui/l...原创 2021-11-19 10:53:48 · 3061 阅读 · 3 评论 -
Echarts图表初次加载时,显示不全
首先,我这里设置的width="100%",首次加载当前页会出现,图表超出容器的现象:但是,刷新一下或者按下F12弹出控制台就恢复了;why????????????1.起初想从width入手进行分析,给echart组件增加div包裹或者添加内部的padding,无果;2.鉴于echart的自带resize方法,这也是为啥刷新和F12都能触发恢复的原因;解决:于是,在echart引入的当前页面,手动来触发一下window.resize()就完美解决了这个问题,const myEvent原创 2021-10-15 14:51:31 · 2088 阅读 · 0 评论 -
intersection observe 的一次使用
原因:公司官网的单一页面有很多图片,图片又有很多的动画效果,受到服务器配置限制,初次访问会卡顿,而官网这种东西恰恰是单次访问类型的。着手开始优化。当前存在的问题:1.图片太多,几乎每张都是png的高清大图。感觉没必要使用质量这么高的。2.图片的加载,原生写法,监听scroll事件判断图片是否出现在视图区,然后添加动画。优化:那么针对上面两个点开始处理第一 图片的处理关于图片太多如何处理,这里简单说几种方式:没啥好坏之分,自己看着用吧1.CDN托管(个人认为比较好用),需要考虑原创 2021-08-03 14:25:08 · 690 阅读 · 0 评论 -
JavaScript 复杂判断的更优雅写法
一元判断原型: 常见 冗余/** * 按钮点击事件 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButtonClick = (status)=>{ if(status == 1){ sendLog('processing') jumpTo('IndexPage') }else if(status == 2){ sendLog('fail')原创 2021-05-11 09:36:33 · 118 阅读 · 0 评论 -
基于JS实现回到页面顶部的五种写法(从实现到增强)
基于JS实现回到页面顶部的五种写法(从实现到增强)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-04-27 19:58:46 · 215 阅读 · 0 评论 -
如何理解 Javascript中apply、call、bind
apply和call JavaScript中的每个函数都有2个非继承而来的方法 那就 apply、call,作用是用来改变 this 的指向 先来个判断参数是不是数组的例子: functionIsArray (obj) { return Object.prototype.toString.call(obj) === '[object Array]'} 我理解为 借刀杀人 ,没理解怎么改变的this指向?没关系,看这个 var numbers = [5, 458.原创 2021-02-05 17:32:58 · 112 阅读 · 2 评论 -
vue中监听iframe的高度来实现自适应
在上一篇文章中说明了如何iframe的父子级之间如何传递信息,但是获取iframe子页面滚动高度的效果并不是很理想。可能出现的问题:1.特殊场景下会出现双重滚动条,影响体验2.即时是加了setTimeout()定时器函数,有的时候也不能够取得准确的scrollHeight的值,例如iframe子页面有很多图片,图片加载过程就会影响到页面的高度。优化:考虑到上述问题,开始寻求其他方式来监听iframe子页面的滚动高度值。经大神提点,建议在iframe子页面中监听整个页面容器的高度,类似原创 2021-01-07 21:13:50 · 3270 阅读 · 3 评论 -
Vue 中使用 iframe 踩坑记录 iframe + postMessage
好久没写博客了,前一段时间都在准备面试相关的,最近换工作了,加上住进了自己买的小房子,各种事情,还是比较忙的。我们来言归正传:需求:最近在写一个博客的功能模块,技术栈是单独选择的vuepress,完成后想要融合到一个vue工程里,考虑到后期维护的问题,就通过iframe将vuepress打包后的工程页面引入到vue工程的一个页面中,这样iframe的父子级页面之间也要进行信息的传递,比如说传递iframe的子页面的滚动高度给父页面,然后撑开页面高度。1.iframe的初始高度问题vue工程的原创 2021-01-06 17:44:35 · 1783 阅读 · 0 评论 -
如何手写一个jquery的工具库
这是我听过的一个公开课所做的笔记~先来一个基础版的,这样有什么问题呢,就是把各种事件都绑定到原型上面了,破坏了原型的纯净性let $ = jQuery = (function (windwo) { let jquery = function (nodeSelector) { this.nodes = document.querySelectorAll(nodeSelector); }; jquery.prototype = { // 封装函数原创 2020-11-20 09:28:27 · 174 阅读 · 0 评论 -
图片懒加载的简单思路
1.懒加载的优点提高前端性能,图片按需加载,减轻服务器的压力,提高页面的响应速度,减少带宽。2.实现原理图片的加载通过 src ,对 src 赋值时浏览器会请求图片,src = ' ' 时不会发生请求。基于 html5 的 自定义 data-xxx 来实现,也就是 data-xxx 存放的图片的真实路径,需要加载图片的时候,再将 data-xxx 的值赋值给 src。<img data-src = "图片的真实路径" src = " " />3.实现当然,向后台请求原创 2020-11-13 16:53:38 · 232 阅读 · 0 评论 -
如何简写出 document.querySelectorAll?
看了一篇风趣幽默的文章,简单记录一下~1.原生DOM选择器document.getElementById document.getElementsByClass document.getElementsByName document.getElementsByTagName写出来我都感觉麻烦了~接下来看看jQuery的语法糖2.jQuery封装的DOM选择器document.querySelector document.querySelectorAll但是,名字太长了,就像电影里原创 2020-11-13 15:10:50 · 586 阅读 · 0 评论 -
Object.defineProperty 与 Proxy
众所周知,Vue2.0 的双向数据绑定原理是基于 数据劫持 和 发布订阅,数据劫持部分用的就是Object.defineProperty();但是Vue 3.0 已经做出优化,改为 Proxy() 代理的方式。1.优缺点比较Object.defineProperty():将一个js对象传递给vue实例对象的data()时,vue通过Object.defineProperty来遍历目标对象内部的属性。 优点: 更为准确 缺点:无法对数据下标进行监控,需要遍历对象,效率低 Proxy代理:将原创 2020-11-12 10:20:16 · 299 阅读 · 0 评论 -
Proxy代理
Proxy对象用于定义基本操作的自定义行为,我理解为拦截自处理,官方称为代理。MDN文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy语法:varp=newProxy(target,handler);//target所要拦截的对象//handler规定拦截后如何处理handler的拦截器有13个1.基础示例var target ...原创 2020-11-12 09:37:02 · 292 阅读 · 0 评论 -
如何封装一个函数,用来判断javascript中的各种数据类型?【腾讯面试题】
function getType(value) { // 判断数据是 null 的情况 if (value === null) { return value + ""; } // 判断数据是引用类型的情况 if (typeof value === "object") { let valueClass = Object.prototype.toString.call(value), type = valueClass.split(" ")[1]..原创 2020-11-11 16:36:00 · 282 阅读 · 1 评论 -
patch函数 diff算法 原理
//vnode=>dom虚拟dom=>真实的dom(vue初始渲染)//patch与diff算法http://www.lanlanwork.com/blog/?post=6056//初始渲染根据虚拟dom创建出元素,将该元素的子元素和属性逐个添加到这个元素上面,形成真实domfunctioncreateElement(vnode){//目标对象uldivlettag=vnode.tag;//目标对象的属性...原创 2020-11-06 14:45:34 · 389 阅读 · 0 评论 -
js基础中的 防抖与 节流
昨天被问到这个问题,发现自己还不是很清楚。找了很多博客,学习一下。防抖和节流是属于浏览器性能优化部分,事件的频繁触发,频繁操作dom,会导致页面卡顿和浏览器崩溃。但是,dom绑定的某些事件我们是控制不了它的触发频率window 的 resize()、scroll() mousemove mousedown、keydown 文字输入、自动完成的keyup事件,用户输入过程中事件不断的触发,会导致大量请求发出,但是响应跟不上。对于window.resize()的处理,停止改变n毫秒后执行后续的处原创 2020-11-06 10:42:27 · 283 阅读 · 0 评论 -
2020-09-20 html的微信页面缓存的更新 + css的float如何避免贴边重叠 + JS的对象转换为字符串类型 + 软技能的前端代码评审CheckList
2020-09-20 题目来源:http://www.h-camel.com/index.html[html] 微信H5页面如何更新缓存?缓存设置可以在head标签中进行添加<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8"><meta http-equiv="Expires" c原创 2020-10-16 09:36:33 · 168 阅读 · 0 评论 -
JavaScript中不支持冒泡的事件
focus -- 获得焦点blur -- 失去焦点mouseenter -- 鼠标移入mouseleave -- 鼠标移出load -- 加载unload -- 卸载resize -- 重新调整大小原创 2020-10-12 15:53:24 · 459 阅读 · 0 评论 -
JavaScript 的内置对象
Array -- 数组Boolean -- 布尔对象Date -- 日期对象Error -- 错误异常对象Function -- 函数构造器Math -- 数学对象Number -- 数值对象Object -- 基础对象RegExp -- 正则表达式对象String -- 字符串对象原创 2020-10-12 15:42:55 · 75 阅读 · 0 评论 -
2020-09-19 html的页面禁止微信中的分享 + css的flex实现一行宽度平均分配 + JS的对象转换为数字类型 + 软技能的预估工作量
2020-09-19 题目来源:http://www.h-camel.com/index.html[html] H5页面在微信中如何禁止分享给好友和朋友圈?<script> function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); } if (typeof WeixinJSBridge == "undefined") { if (document.addEv原创 2020-09-29 09:10:08 · 190 阅读 · 0 评论 -
2020-09-18 html的打印网页换页 + css的height100%如何生效 + JS的暂存死区 + 软技能的屏幕坐标、客户区域坐标、页面坐标
2020-09-18 题目来源:http://www.h-camel.com/index.html[html] 打印网页时,如何让指定的元素另起一页打印呢// footer 元素后始终插入分页符@media print { footer {page-break-after: always;}}// h1 标题之前 始终插入分页符@media print { h1 {page-break-before: always;}}// 避免在pre blockquote 中使原创 2020-09-28 10:09:42 · 325 阅读 · 0 评论 -
2020-09-17 html的列表编号倒序 + css的2个inlineblock之间的空隙 + JS的requestIdleCallback + 软技能的周日报的excel的模板
2020-09-17 题目来源:http://www.h-camel.com/index.html[html] 举例说明只用html和css如何使得一个列表编号倒序?方法一: reversed<ol reversed> <li>C</li> <li>B</li> <li>A</li></ol>方法二: li 中的 value 值<ol> <li v原创 2020-09-28 09:08:33 · 202 阅读 · 0 评论 -
2020-09-16 html的http状态码 + css的spacebetween + JS的EventLoop的缺点 + 软技能的管理日常化
2020-09-16 题目来源:http://www.h-camel.com/index.html[html] http中的301、302、307、308有什么区别100 继续,客户端应继续请求101 切换协议,server根据client,只能切换到更高的协议200 OK 请求成功201 已创建202 已接受203 非授权信息301 永久移动,请求的资源以被永久移动到新的URI,今后的任何新请求都应使用新的URI代替302 临时移动,资源被临时移动,客户端应继续使用原有原创 2020-09-27 11:08:06 · 169 阅读 · 0 评论 -
2020-09-15 html的input标签添加清除按钮 + css的清除li标签的默认斜体 + JS的requestIdleCallback + 软技能的模块热替换
2020-09-15 题目来源:http://www.h-camel.com/index.html[html] 如何给input的右上角加个清除的按钮?input右边加个图标,设置它的点击事件,click 去清除input标签的val值$("#clear").click(function () { $(".input_key").val(""); $(".input_key").focus(); // $(this).hide(); // 可以设置iput的获得焦点事件原创 2020-09-27 08:59:36 · 203 阅读 · 0 评论 -
2020-09-14 html的光标聚焦第一input + css的fixed与float区别 + JS的requestAnimationFrame + 软技能前端如何监控性能
2020-09-14 题目来源:http://www.h-camel.com/index.html[html] 进入编辑页面时,如何把光标聚焦到第一个input?首先来看看如何为input设置光标聚集<input type="text" autofocus>那多个input如何处理呢:let arr = document.querySelectorAll("input");//arr[0].autofocus = "true";arr[0].setAttribute(".原创 2020-09-25 10:56:03 · 449 阅读 · 0 评论 -
2020-09-13 html的span的标签嵌套 + css的position fixed定位的基准元素改变的方式 + JS的UI渲染之前处理一些事情你该怎么办 + 软技能的时间
2020-09-13 题目来源:http://www.h-camel.com/index.html[html] html中在span标签里面可以放那些标签?元素开始与结束标签嵌套错误,页面可以在大部分浏览器被正常解析,IE9会出现解析错误在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误吗,亲测可以在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常在<a>元素内嵌入<a>元素会原创 2020-09-25 09:51:42 · 290 阅读 · 0 评论 -
2020-09-12 html的两个数组的交集 + css的flex脱离viewport会产生什么bug + JS的请求的缓存处理 + 软技能的组织内部矛盾处理
2020-09-12 题目来源:http://www.h-camel.com/index.html[html] const nums1 = [1, 2, 2, 1], nums2 = [2] 交集是什么?// map方法求两个数组的交集//使用Map,数组作为键值key,计数器作为valuepublic int[] intersect2(int[] nums1, int[] nums2) { Map<Integer,Integer> map = new HashMap<原创 2020-09-25 09:07:56 · 82 阅读 · 0 评论 -
2020-09-11 html的video的触发顺序 + css的是stacking context + JS的DOM节点的操作如何优化 + 软技能的业务与技术冲突时
2020-09-11 题目来源:http://www.h-camel.com/index.html[html] H5中video的事件的触发顺序是怎样的?onloadstart ondurationchange onloadedmetadata onloadeddata onprogress oncanplay 用户可以开始播放视频/音频时触发 oncanplaythrough[css] 如何创建stacking context?stacking context 层叠上下文...原创 2020-09-24 10:57:56 · 796 阅读 · 0 评论 -
2020-09-10 html的MediaRecorder应用场景 + css的分离图层做动画 + JS的RAIL性能评估模型 + 软技能的管理团队人重要还是事重要
2020-09-10 题目来源:http://www.h-camel.com/index.html[html] 你有使用过MediaRecorder吗?说说它的运用场景有哪些?MediaRecorder() 构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象。对指定的流创建一个音频比特率为128kbps,视频比特率为2.5Mbps的媒体录制器. 被录制的媒体数据会以MP4格式封装。var options = { audioBitsPerSe原创 2020-09-24 08:56:23 · 286 阅读 · 0 评论 -
2020-09-09 html的sharedworker应用场景 + css的动画代替js动画有什么好处 + JS的寄生式组合继承 + 软技能的空降管理团队
2020-09-09 题目来源:http://www.h-camel.com/index.html[html] 说说你对H5的SharedWorker的理解,它有什么运用场景?Worker SharedWorker 是HTML5为我们提供的多线程的实现机制。解决问题: 如果js花费较长时间来处理一件事,那么浏览器这段时间将不会对用户产生响应。看看这个主线程调用多个子线程的例子:主线程要完成一个任务需要两个线程,它创建了两个线程worker1,2,先向worker1请求,得到返回的数据后,再请求w原创 2020-09-23 09:32:34 · 166 阅读 · 0 评论 -
2020-09-08 html的sharedworker应用场景 + css的同级li的最后一个li的右边距 + JS的sdk设计 + 软技能的团队管理核心要素
2020-09-08 题目来源:http://www.h-camel.com/index.html[html] 说说你对H5的SharedWorker的理解,它有什么运用场景?Worker SharedWorker 是HTML5为我们提供的多线程的实现机制。解决问题: 如果js花费较长时间来处理一件事,那么浏览器这段时间将不会对用户产生响应。看看这个主线程调用多个子线程的例子:主线程要完成一个任务需要两个线程,它创建了两个线程worker1,2,先向worker1请求,得到返回的数据后,再请求w原创 2020-09-23 09:13:12 · 185 阅读 · 0 评论 -
2020-09-07 html的head的必有标签 + css的单位 + JS的sdk设计 + 软技能的团队管理
2020-09-07 题目来源:http://www.h-camel.com/index.html[html] 在head标签中必不可少的是什么?head标签中主要包括,标题、编码格式、引入的css和js,还有很多meta标签中所定义的部分。主要包含的内容参考:<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user原创 2020-09-22 16:57:13 · 211 阅读 · 0 评论 -
2020-09-06 html的大数据列表优化 + css的flex + JS的SeaJS与requireJS库 + 软技能的技术管理
2020-09-06 题目来源:http://www.h-camel.com/index.html[html] 如何优化大数据列表(10万+)的性能?说说你的方案1.列表中固定只显示少量的数据,比如60条2.在列表滚动的时候不断的去插入删除dom3.startIndex、endIndex,不断的改变这个值来获取最新的显示列表4.paddingTop、paddingBottom撑开容器的滚动区域转自 https://www.cnblogs.com/songbw/p/11613869.h原创 2020-09-22 09:26:11 · 107 阅读 · 0 评论 -
2020-09-05 html的获取所有img标签的src地址 + css的flex 1的完整写法 + JS的非行间样式获取 + 软技能的平衡点
2020-09-03 题目来源:http://www.h-camel.com/index.html[html] 请写一个正则获取html源码中所有img标签的src地址/// <summary>/// 取得HTML中所有图片的 URL。/// </summary>/// <param name="sHtmlText">HTML代码</param>/// <returns>图片的URL列表</returns>publi原创 2020-09-22 09:00:02 · 221 阅读 · 0 评论 -
2020-09-04 html的纯htm实现跑马灯效果 + css的弹幕效果 + JS的实现对节点的拖拽 + 软技能的web端的批量打印
2020-09-03 题目来源:http://www.h-camel.com/index.html[html] 如何使用纯HTML实现跑马灯的效果?应该是纯css实现的吧,css的动画属性animation:动作名称 动画时间 速度曲线 延时 播放次数animation: traffic-light 5s linear 0s infinite;[css] 使用css使用一个弹幕的效果结合动画特性 animation 对div的位置进行修改 tansform: translateX();原创 2020-09-21 10:35:36 · 311 阅读 · 0 评论