- 博客(66)
- 收藏
- 关注
RSS订阅原创 Ts里联合类型和交叉类型,枚举类型,父子组件生命周期钩子函数执行顺序,setup函数和script setup语法糖,rightreduce+reverse
由于要从父组件给子组件传递props，所以需要在父组件的beforeMount或beforeMount阶段发起数据请求，子组件中要对props做简单判断再使用，因为在渲染阶段可能会拿到非法的值。父组件更新：onbeforeupdate-〉子组件onbeforeupdate-》子组件onupdated-〉父组件onupdated。父组件：onbeforemount-》子组件onbeforemount-〉子组件onmounted-》父组件onmounted。在实例创建之前，但是在props解析之后。
2024-10-15 14:15:15
778
原创 bind实现，foreach手写， [‘1‘, ‘2‘, ‘3‘].map(parseInt)， promise.any手写，promise串行执行， ajax 封装，柯里化函数，单例模式
promise.any: 如果有成功的立刻返回成功的结果，空数组或者全失败则返回aggregate error。思想：当函数需要的参数小于传入的参数时候，直接执行，否则 bind 等待下一次传参。传入两个参数 分别对应0，1，2。parseint里2: 二进制。parseint里0:十进制。parseint里1:NaN。
2024-10-15 10:49:31
258
原创 代码输出题总结：异步/事件循环/this指向/原型和继承
1. Promise 状态与输出：当使用 .then() 或 await 时，如果没有返回新的 Promise，而当前的 Promise 仍然处于 pending 状态，则后续的输出将被忽略，因为程序会在该位置阻塞，等待 Promise 被解决（resolve 或 reject）。
2024-10-02 18:30:32
429
原创 递归手撕，JSON 字符串化和解析，加权树结构的字符串解析对象，解析并返回DOM 树结构（DOMParser），解析带有层级的文本
递归手撕，JSON 字符串化和解析，加权树结构的字符串解析对象，解析并返回DOM 树结构（DOMParser），解析带有层级的文本
2024-09-22 22:00:43
391
原创 flex，promise里catch，作用域和作用域链和闭包，递归展开嵌套数组
在promise链中 如果promise出现错误被reject 错误会沿着链向下传播 直到遇到第一个catch为止,链条后续的then处理被跳过 直接进入catch。执行栈：先全局执行上下文压入栈里，每次函数调用就新的执行上下文压入栈里，然后执行栈顶 弹出执行上下文。生命周期： 创建：确定this，词法和变量环境；剩余空间为100px，两者都拓宽50px，宽度分别为550px和450px。div1缩小 200px，div2缩小100px，最终 都是300px。以400px+400px，发现超出200px。
2024-09-22 15:21:11
455
原创 Directives Vue3 自定义指令
在 Vue.js 中，自定义指令的常用生命周期钩子函数通常是mounted、updated、unmounted这些钩子函数接收参数 el 和 binding。看到 el 和 binding 作为函数参数出现，特别是在 mounted 和 unmounted 钩子中，这是一个明确的标志，表明这是一个 Vue.js 的自定义指令。},alias: {},pairs: {},// 提供默认事件// 检查别名// 初始状态// 存储原始样式// 获取并存储原始样式。
2024-09-21 21:26:24
762
原创 Promise源码模拟内部实现,then和mypromise构造函数，resolve，catch，reject，myfinally实现
promsie接受一个函数作为参数，这个函数称作exe，exe包含 resolve和reject两个参数 是两个函数，内部的异步任务会放入对应的异步队列 等着then的执行。catch方法是then方法的简化形式,是promise.then(undefined,onrejected)方法的别名。1 将_resolve和_reject分别封装到函数里 然后放到settimeout里，防止exec是同步的。允许在 `Promise` 的 `then` 或 `catch` 后插入一个回调。then 方法的实现。
2024-09-08 11:42:39
205
原创 Vue3 Hooks 用法 scrollTop， mousemoveHandler，useCountDown
注意 一般hooks里包括一些函数钩子，比如mounted，注意 hooks里重要的是state一般被包裹在函数里面，这样不同组件调用 不会共享state//一键回到顶部 时间默认1000毫秒if(!timer){else{//这部分让平滑动画，直接赋值timer=null},40)//响应式数据实时滚动距离//同步scrolltop//组件挂载时候添加scrollhandler})//组件卸载时候移除scrollhandler})//如果存在要恢复的数据。
2024-07-04 21:39:10
453
原创 js继承，原型链继承，构造函数继承，组合式继承，原型式继承，寄生式继承，组合寄生式继承，extends继承
继承的理解，复用父类的属性和方法并增加新的属性和方法。
2024-06-16 20:30:07
447
原创 实现自己的组件库＜4＞. 仿elementui，封装 radio组件，radiogroup组件，checkbox组件，checkbox-group组件，form组件和form-item组件
v-model给什么无所谓，最终需要得到的是label的值，有v-model肯定会接收到value。如果是多个box一起用，value就有用了，因为选中的是value,这个value就是label。由于父组件传入数据不能修改，在radio里绑定的v-model绑定的数据应该是重写定义的。在radio.vue里肯定不能写固定的，用插槽替代，让男和女两个出现在界面里。在父组件用provide提供一个值，在任何孙组件里用inject获取值。首先设置v-model，name，label属性，需要传参数，
2024-06-15 19:26:25
688
原创 仿element-ui 实现自己组件库 ＜3＞
用户使用switch组件实际上当成表单元素使用，可能用到name属性，需要在switch组件中添加一个checkbox，当值改变时候，需要设置checkbox的value值。nexttick是基于promsie的封装，这里用语法糖async和await，用nexttick等数据修改后dom更新完毕再更改按钮颜色。如果传来show-password判断是否需要切换密码显示，如果不传不判断。同步checkbox里的checked值，一进来mounted和切换时候设置值。点击label相当于点击input框。
2024-06-14 14:57:09
782
2原创 封装组件库仿elementui＜1＞
=是包含的意思，只要类名包含miao-icon-，就用如下样式，这样就只要写一个类名就行了。$slots能够获取所有插槽，只有icon的slots为空就可以不显示文字span。在下载下来的iconfont.css里 把类名全改成miao-icon。用到props传参，app向button组件传参数type。然后发现button里点击事件，直接给组件定义事件无法触发。用属性选择器：[class*='miao-icon']然后所有button都有了camera的icon。然后在button里添加。
2024-06-07 21:24:57
607
原创 2024 前端手撕代码 有限异步调用promise,实现自己的reduce方法,实现自己的map方法,实现自己的call,bing,apply方法,数组和对象去重
。
2024-06-06 17:30:54
251
原创 2024 javascript前端面试手撕代码 deepequal，deepcopy，浅拷贝深拷贝，手写防抖节流，手写promise.all promise.race，拉平数组，实现new操作符原理
Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。⚠️`catch(err=>reject(err))` 和`catch(err=>console.log(err))`节流，单位时间内只执行一次，比如scroll和resize事件。递归判断俩对象是否相等。
2024-06-04 21:48:51
200
原创 贪心算法三道总结：合并区间，无重叠区间，用最少数量的箭引爆气球
遍历结束后，将最后一个 res 添加到 ans 中，因为最后一个区间不会在循环内被添加到结果中。如果当前区间的起始时间小于 maxx，说明这个区间与前面的区间发生重叠：增加 res 计数器。从第二个区间开始，依次检查每个区间是否与当前不重叠区间集合（由 maxx 表示）发生重叠。更新 res 的结束点为 res结束点和当前区间结束点中的最大值。更新 res 为当前区间。返回结果：最后，返回需要移除的重叠区间的数量 res。更新 maxx 为当前区间的结束时间。从第二个区间开始，依次处理每个区间。
2024-05-22 15:32:05
252
原创 promise实现多次超时重传
的函数，该函数返回一个 Promise 对象。这个 Promise 在一个 setTimeout 函数内部，500 毫秒后会执行。在 setTimeout 内部，生成一个随机数。，表示重试 3 次。如果所有重试都失败，会捕获到 Error 对象，并打印出其错误消息。为 0），则抛出一个 Error 对象，其中包含。在这个函数内部，使用了一个。函数返回的 Promise 对象。返回的随机数），然后返回。的函数，它接受一个参数。大于 0.7，则调用。首先，定义了一个名为。然后，定义了一个名为。
2024-04-17 20:36:29
243
原创 绑定class，条件渲染，列表过滤，列表排序
将index作为key：如果对数据进行逆序添加，逆序删除等破坏顺序操作，产生没有必要的dom更新，效率低；一旦有输入类dom（input等），就会串行。2 将数组中元素单独替换，数据修改成功但vue不能检测到，因为数组元素没有getter和setter，修改数组中元素无法实现响应式。新建一个filpersons存过滤后的数组，由于filter函数是通过返回新的数组但对原数组没有修改的方式进行过滤的。如果旧的虚拟dom找到与新的虚拟dom相同的key，如果内容没变直接使用已经转的真实dom（复用dom节点）
2024-01-19 16:05:21
1205
原创 键盘事件，DOM事件流，e.keyup, e.keypress,BOM里的window对象, setInterval, clearInterval
监听事件：传统的onclick对于后面的注册事件会覆盖前面的注册事件方法监听注册方式：addEventListener()注意：type事件类型字符串 click mouseover不用on删除事件在移除事件里不能用匿名函数，不然移除出错dom事件流从页面接受事件的顺序第三个参数决定是冒泡(顺序为son，father)还是捕获（顺序为father，son），为true代表捕获解决问题：只点击了son为何father和document都弹出了。
2024-01-05 16:02:00
894
原创 createElement, parentNode, removeChild, appendChild
3 .children[0],.children[ol.children.length-1]（ol是变量，具体见楼下代码）html结构：一个大ul里包括四个li，每个li里上下栏，上栏是a标签，下栏是ul包含三个li。previousSibling前一个兄弟节点，包括元素节点，文本节点。nextSibling获得下一个兄弟节点，包括元素节点，文本节点。需要把所有链接取过来，点击当前链接时候，删除当前链接的li。文本节点 nodetype=3（文字，空格，换行）//将一个节点添加到父节点指定子节点前面。
2024-01-01 09:55:58
534
原创 tab切换栏，淘宝图关闭，精灵图遍历，onfocus/onblur, setAttribute, getattribute
存着所有以data开头的自定义属性注意后面就不用跟data了，因为前面dataset已经包括data了或者（这里element取的div或者区分：对于来说写什么样的自定义属性都能被获取，但是dataset只能获取data-开头的自定义属性。
2023-12-14 16:57:31
946
原创 flex布局,flex-direction, justify content, align-content
1 数值越小，排列越靠前默认为02 和z-index不一样在上述程序中想把2放1前面order:-1;默认都是0，第二个孩子改为-1，-1在0前面，所以这样第二个孩子会出现在第一个孩子前面。
2023-12-13 14:46:43
395
原创 品优购：主体页，列表页，注册页
3）注册核心内容里：一定加一个父盒子，父盒子给个宽度，在里面水平居中显示，在里面通过ul和li显示，每个li包含三块：label（行内元素）input和span；4）安全程度部分，再加一个li里面放三个span，依次添加三个类名，通过padding拓展开span的大小，并增加相应背景颜色；6）注意这里对input的text表单调整宽高是对于input设置的，而里面有text类型的还有checkbox类型的因此通过将input里的class设置为inp，防止把checkbox类型的框也带成同样格式；
2023-12-02 23:23:34
938
原创 品优购：nav导航、footer部分
准备.mod_help大类，注意这里盒子间间距通过宽度来设置，每个盒子都由data list组成，但是最后一个list因此会掉下去，通过last-child选中后重新设置宽度。先看dropdown里，先表头，这里意思是description term, 然后是一系列表格内容，其中text-align，line-height调整。navitems用无序列表写，他们都是并列的，文字要垂直居中，防止文字个数不一样，使用margin，最好给a，这样用户点击链接跳转范围大。nav盒子通栏有高度，有下边框。
2023-11-28 12:14:24
464
原创 品优购首页快捷导航部分
首先是search整个模块，与父盒子header关系是子绝父相，调整top和left值到正确位置，然后在search整个模块里包含input:search和button两个模块，分别调整高和宽，里面的input设置padding。注意：在css里引入直到block的部分，并且记得改五行关于front的目录，将front文件夹放入根目录里，\ea43记得加反斜杠转义符号。关键词就一堆下来后继续absolute，修改top和left的值，然后hotwords里的a设置个margin。
2023-11-25 21:10:19
1661
原创 css三角，鼠标样式，溢出文字
解决： 1 给图片添加vertical-align：middle，top，bottom。css三角中：line-height：0和font-size：0是防止兼容性的问题。vertical-align:baseline默认父元素基线对齐；4 vertical-align 设置图片或者表单和文字垂直对齐。这样能使得当左边是图片右边是文字时候，文字在左边图片中间的位置。bug：图片底侧会有空白缝隙，由于行内块元素和文字基线对齐。那么这个盒子里所有行内元素和行内块元素都会水平居中。1 单行文本溢出显示省略号。
2023-11-21 16:18:36
282
原创 前端：定位，display，visibility，overflow
定位模式：position：static，relative，absolute，fixed。由于小箭头压住父盒子，以父盒子为标准，不能用fixed，fixed以浏览器为准。隐藏对象，而且后面的盒子会占据它的位置（用的多！绝对定位脱离标准流，不占用原来的位置, 父亲一定要占有原来的位置，而孩子不用。top:100 水平坐标走了100，相当于原来位置在现在的位置的上方100。(2) 如果嵌套的爷爷和父亲都有定位，以就近的父亲为准。不是隐藏元素，只是把多出内容隐藏，只显示在盒子里的部分。
2023-11-16 11:45:44
85
原创 css基础4
只写一个角：border-top-left-radius， border-top-right-radius，border-bottom-left-radius。第一个参数影子数值越大越往水平的右边移动，第二个参数影子数值越大越往水平的上面移动，第三个参数数值越大越模糊，第四个参数数值越大影子整体越大。1）块级元素独占一行，从上向下顺序排列 div，p，h1-h6，ul，ol。浮动的盒子不再保留原先的位置，浮动盒子上边缘对齐，父元素管上下，子元素管左右。前面浮动元素有一个标准流父元素，他们都是有高度的。
2023-11-08 12:17:18
44
原创 css基础2
设置父元素margin-top为10，子元素margin-top设置为30，但是小盒子没有往里面走，反而大盒子往下靠了30。在盒子内部没有指定width属性，或者如果父元素指定了width，那么在子元素中没有指定width，就不会撑开盒子。上内边距5px， 左右内边距10px， 下内边距20px。padding: 5px 10px 20px 30px:上5px 右10px，下20px，30左，顺时针。margin: 20px 30px 40px 50px（同padding）表示上下5px 左右10px。
2023-11-05 23:34:49
42
原创 CSS基础
font:font-style font-weight font-size font-family顺序，其中font-size和font-family最后两个绝对不可以省略。-text-decoration:文本装饰,none,underline（直接对a标签设置就行）(2) 行内样式表：直接在标签属性里写 style="属性名：属性值;-text-indent:文本缩进,2em(直接对p标签设置就行，别不小心加个.)通配符选择器 *{属性名：属性值}选择所有标签。-text-align:文本对齐。
2023-11-03 16:16:47
35
原创 javascript基础2
随机生成[1,10]之间的数字，并让用户猜，直到猜到为止。split,类似于前面的join。pop：删除末尾元素，一次一个。shift:删除开头第一个。unshift:开头加元素。
2023-11-02 14:36:36
35
原创 javascript基础
案例的关键一个是函数内不var的是全局变量，还有一个关键就是var a = b = c = 9;函数里带var的都是局部变量，没带var的是局部，函数外带var的是全局变量。(1)fun是变量名，函数表达式声明方式和声明变量差不多，可以传参数。在执行时候，先提升变量定义，再提升函数定义，最后按照顺序执行（赋值）(2) 形参不传值，形参个数大于实参时，默认undefined。但是若字符串后面跟着运算符，若字符串里包含数字，就会转为数字。==是判断数值相等，但是===是判断数值和数据类型都相同。
2023-11-01 10:08:54
59
原创 leetcode
或者从a到z计数，对于aet来说，都是a，e，t计数为1，但是list在python里不可映射，转换为turple元组。哈希思想，将乱序的单词按照char排序，得到相同的key，比如ate和eat的key都是aet。
2023-04-02 09:49:40
46
原创 双指针27 移除元素
思路：l和r终结情况为r=l此时要么不为val的值，+1，是val的值直接返回。l负责指向不为val的值，r负责指向为val的值，swap。那么双指针时候就是l<r。
2023-03-18 17:29:21
54
原创 链表交换（leetcode）
首先判断head是否为null，或者head->next=null,因为如果只有 一个节点1，则不需要交换。易错在设置nx节点且最后返回的也是nx节点，理解为递归后head->next为空的。//这个随着cur变化，放循环里。listnode* tmp=nx->next//随着cur变化，放循环里。1 迭代解决：设置变量头节点cur和jiedian,第二个易错是nx->next=head放在递归之后。每次要变化的节点只有。
2023-03-18 17:01:02
120
原创 递归和迭代，链表合并，leetcode21
理解：l1->next=(l2,l1->next):意思就是确定l1，//后一句就是return l1，意思是当前l1和l2比较，l1值小，选择l1，那么l1的下一个就是从11->next和原l2里选择。思路：先确定头节点，要两个，一个返回作用，一个连起合并后链表。递归：return的就是当前确定的。
2023-03-17 15:10:58
87
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人