随笔分类 - 前端容易被忽略的知识点/小细节
摘要：import domtoimage from 'dom-to-image' import html2camvas from 'html2canvas' function saveView() { // 这个框架ok,网上说这个框架清晰度不好，我试了下，感觉还够用！ 2 let capture = d
阅读全文
摘要：1. vue3 中，想要直接调用子组件上的的方法，最重要的一个步骤就是将想要访问的子组件上的方法和属性给暴露到外部！！！ <template> <el-drawer> </el-drawer> </template> <script setup> const func1= () => { // 业务
阅读全文
摘要：盲区1：事件绑定： js中的事件绑定可以一次绑定多个事件。 比如 鼠标移动事件。 事件的移除： 需要注意的点就是 removeEventListener时， 第二个参数需要带上绑定的函数， 并且 需要是同一个函数： 建议 const callback = this.drawLine.bind();
阅读全文
摘要：这里添加点击事件有两种方式： method1: 例如 柱状图和折线图，就是给每个柱子或者每个拐点添加点击事件 使用： method2： 给整个图表添加点击事件
阅读全文
摘要：如果 fill() 填充的 是一个引用类型， 比如 : const a = [0,1] | {a:1} const b = Array.from({length: 6}).fill(a) ； 如果去修改 b[0][0] = 1 | b[0].a = 10 那么生成的数组，填充的所有 元素的都会被改变
阅读全文
摘要：Object 中的 key 只能是 Sting 类型的，如果将非String类型的当做key， 会转成String。 Object[2] 和 Object['2'] 获取到同一个value。 Object中没有直接的api去返回Object的 key的数目，也就是键值对的个数。但是Map可以直接通过
阅读全文
摘要：Array.reduce((pre,cur,index, array)=>{ MDN 上对于这个方法的特殊情况做了详细的阐述，但是一般下意识都不去看，老师一般也都没讲。 S1:如果 initVal，传递了， 那么 pre initValue, cur array[0]; S2:如果没有传递initV
阅读全文
摘要：密集数组： 占据连续的内存空间，数组元素之间紧密相连，不存在empty 稀疏数组：数组元素之间存在间隙。 ex: const arr1 = [1,2,3] 这样定义的一个 数组 arr1 就是一个密集数组 const arr2 = [1,2,3] arr2[8] = 8 打印arr2 会发现 : [
阅读全文
摘要：？？ =》 空值合并运算符。 只会判断 null 和 undefined。 | | =》 短路运算。 不仅会判断 null 和undefined， ‘’ 和0 也都会判断！！！ ex: const a = null(undefined) ?? 1 => a 1 const b = null(unde
阅读全文
摘要：原因是： 根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 解决办法有 给父盒子加内边距，边框的，最简单的就是 设置溢出隐藏： overflow：hidden。
阅读全文
摘要：实现这个效果需要一下几个步骤 1.让容器盒子占满整个可视区，并且始终出现横向滚动条 2.监听wheel 事件 3.阻止 容器的默认wheel事件对象event的默认事件 4.设置容器的scrollLeft = event.deltaY
阅读全文
摘要：1. 获取滚动条移动的距离——最好的定义方式： scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
阅读全文
摘要：原生js都是通过自己定义函数来实现的，vue中 可以直接使用 loadsh 中封装好的 ，loadsh 向外 暴露了 { throttle, debounce } 这两个方法 import { throttle, debounce } from 'lodash' /** * 函数节流装饰器 * @p
阅读全文
摘要：实例【来自https://www.cnblogs.com/Renyi-Fan/p/12003409.html】
阅读全文
摘要：产生原因：元素设置 行内块后，元素与元素之间的空白【回车 、换行】都会被浏览器处理，由于 whitt-space：normal 这个默认项，空白会被忽略，但是换行会被解析为一个空白符（类似于 ，当字体大小 font-size 不为0时，就导致产生间隙！！！ 解决办法： 1. 父元素设置 f
阅读全文
摘要：所谓的 组合函数就是 把多层函数的调用 【f(g(h(x))】【f,g,h 为三个函数】变成=》 F(f,g,h)(x) 这中便于阅读的格式 。 最简洁代码： function compose(...funcs) { if (funcs.length 0) { return arg => arg;
阅读全文
摘要：var reverse = function (arr) { let temp = arr.splice(0,arr.length-1) // splice 第二个参数为 要删除的元素个数！！ 0表示不删除 ，第三个为可选，表示向数组新增元素 temp = temp.reverse(); conso
阅读全文
摘要：{ display:-webkit-box; // 有区别于 display：flex 详细：【https://www.zhihu.com/question/22991944】 ，flex 有时候也会加上浏览器前缀 text-overflow:ellipsis; overflow:hidden; w
阅读全文
摘要：定时器 settimeout 中this 指向 非严格模式指向 window对象 严格模式指向 undefined 其实也是因为 定时器回调是在window 全局被执行的 this 指向函数 运行的环境 但不绝对： （1）hello直接调用者是obj，第一个this指向obj，setTimeout里
阅读全文
摘要：继承 对于使用过面向对象语言【基于类 class】的语言的开发者来说， javascript有点一言难尽，因为 js是动态的，不具备正真意义class 语法，并且不具备一个class实现， es2016/es6 之后引入了 class这个概念，但也只是一个语法糖的结构，本身还是基于原型的。 当谈到继
阅读全文
