javascript基础
文章平均质量分 56
ZhuAiQuan
我在发光和发热中选择了发疯;
在上班和上学中选择了上吊;
在社恐和社牛中选择了社畜;
在努力和摆烂中选择了顺其自然;
在素质和道德中选择了口吐芬芳;
展开
-
[next.js] svgr/webpack
按照上面的配置后发现无效,组件直接报错了。思考了许久才发现是因为我在开发环境使用了–turbo,所以一些webpack的loader加载器不支持。来开启turbopack加速文件构建,所以之前的一些webpack loader之类的无法正常工作。直接在next.config.js里这样配下就好了,现在Next.js会把import进来的svg处理成react 组件。的官网文档里turbo的介绍中发现就有@svgr/webpack的示例。所以当时的笨方法是把.svg内容复制下来放到封装的react组件里。原创 2024-06-12 17:32:09 · 365 阅读 · 1 评论 -
【懒加载】监听视图是否到达可视区域
监听加载视图可视区域来实现懒加载原创 2022-06-15 14:28:08 · 433 阅读 · 0 评论 -
[javascript]手写一个懒加载组件
参考一下vantui里的List组件,实现一个印象中的懒加载功能(之所以说是印象中呢主要是vant打不开鸭,全凭记忆中的功能来摸索了);不是我想重复造轮子,是我想自定义一些些功能。。。逻辑 主要是监听滚动条 计算设置好的滚动条到底部的高度来异步加载数据,期间异步加载尚未结束时不会重复执行加载操作,所以应该是用了节流。废话不多说,开始coding先声明一个组件 就叫他LazyLoad吧 <div class="lazy-load-ctx" ref="scrollRef">原创 2022-04-24 15:56:26 · 1038 阅读 · 0 评论 -
[TypeScript]监听事件event.target无法正确的获取属性
在使用ts开发项目的背景下,一般给dom添加监听事件时函数会拿到当前的事件对象;在我们指定了参数是Event后,我们去获取e.target里的属性时ts会提醒我们target里没有这个属性;类似于这样明明我们已经指定了事件的类型,为啥获取target里的值的时候会报错呢??经过我多方查阅方才得知,ts无法知道当前这个事件是什么元素的事件的类型,不同dom元素的事件里的target值都不相同;需要指定当前这个事件具体是什么元素里的HTMLElement类型比如我这个是div 那我指定他是HTML原创 2022-04-24 13:35:11 · 4321 阅读 · 0 评论 -
手动实现一个简易版的promise
理解基本的promise执行逻辑原创 2022-03-10 15:33:00 · 391 阅读 · 0 评论 -
【牛客网】前端面试手撕题讲解
最近在准备金三银四,刚好看到有一些常见的前端手写原理题目,遂记录下解题的思路(不是全部,好几道我也不会啊);地址: 20道前端面试手撕题下面正文开始FDE1 事件委托描述请补全JavaScript代码,要求如下:给"ul"标签添加点击事件当点击某"li"标签时,该标签内容拼接".“符号。如:某"li"标签被点击时,该标签内容为”…"注意:必须使用DOM0级标准事件(onclick)dom0级事件只有两个,一个是直接在dom上绑定onclick事件,另一个是获取dom元素并绑定o原创 2022-03-04 17:45:03 · 1849 阅读 · 1 评论 -
理解js函数柯里化
函数柯里化用过loadsh的都大概了解过其中提供了一个curry方法,可以把传参拆分开延迟执行;把简单函数复杂化,复杂化是为了通用性,为了能够更灵活调用,重复使用。比如:function num(a, b, c) { console.log(a,b,c)}这个函数经过柯里化后const curryNum = curry(num);可以分开传参curryNum(1)(2)(3);curryNum(1)(2, 3);curryNum(1, 3)(3);// 或者const curr原创 2021-09-07 14:23:18 · 139 阅读 · 0 评论 -
js反向递归查找值
业务开发中tree树数据经常打交道,经常需要用到递归去操作更改数据。现在遇到一个后台传给你一个某个位置的id值且需要你向上一层一层获取数据的值,这个时候你就需要反向递归去获取数据。记录一次才坑经历吧思路1之前是想把源数据转成json字符串去查找,这样性能应该能更好,少了很多循环操作。后面发现自己正则似乎太菜了学的都还给老师了无奈只好放弃这种方法,思路2正常递归源数据数组 判断children值以及使用数组的some方法判断是否需要继续递归下去还是从头递归;贴代码 // 反递归查找 f原创 2020-12-02 14:19:58 · 3133 阅读 · 2 评论 -
前端手动分页
在后台没有做分页的情况下,前端可以自己写好算法并借用elementui之类的ui组件里的Page分页功能手动完成分页;具体思路是根据后台传回的源数据 处理成二维数组;1、总数量除以每页数量并向上取整获取总页数;Array(‘总页数’).fill([])获取一个基于总数索引的二维空数组;2、for循环总页数,每次向二维数组传入数据;具体代码如下// 手写分页数据 private sliceArray(arr: any[], size: number = 10) { // ar原创 2020-09-02 14:09:23 · 807 阅读 · 0 评论 -
es5/es6 继承总结
一 原型链继承原型链继承的原理:直接让子类的原型对象指向父类实例,当子类实例找不到对应的属性和方法时,就会往它的原型对象,也就是父类实例上找,从而实现对父类的属性和方法的继承。// 父类function fat () { this.name = 'zaq'}// 父类上的原型方法fat.prototype.getName = function() { return this.nam...原创 2020-04-13 12:10:34 · 831 阅读 · 3 评论 -
类数组对象转数组
mark一些常用的类数组转数组方法所谓类数组对象,即拥有一个 length 属性和若干索引属性的对象举个例子const arr = { 0: 'name', 1: 'age', 2: 'like', length: 3}以及形参argument等function getData (name, age, like) { /** * 此时的argument为 * { ...原创 2020-04-10 14:45:40 · 281 阅读 · 0 评论 -
typeof、instanceof和Object.prototype.toString.call()的区别
mark下typeof返回一个字符串,指示未经计算的操作数的类型。const str = 'abcdefg'typeof str // string值得注意的是typeof 无法判断数组const arr = []typeof arr // objecttypeof 只能判断基本类型,除此之外Date null regExp等都只是object的拓展因此数组建议使用insta...原创 2020-04-09 20:47:18 · 456 阅读 · 0 评论 -
javascript 数组去重常用方法汇总
mark一些我常用的数组去重的方法1、set方法const arr = [1,2,3,1,1,2,3,4,2,1,2,3,4,4,2,2,1,2,3,4]function reset (arr) { return Array.from(new Set(arr))}let Arr = reset(arr)console.log(Arr) // [1, 2, 3, 4]Set...原创 2020-04-07 12:27:26 · 278 阅读 · 0 评论 -
js超简单深拷贝
通过JSON.stringify将一个对象转成json字符串然后再通过JSON.parse格式化Json得到原来的数据结构此时修改得到的数据任意修改都不会影响到原来的数据 const obj = { a: 'aa', b: { c: 'ccc', ...原创 2020-03-30 10:02:21 · 257 阅读 · 0 评论