- 博客(575)
- 资源 (8)
- 收藏
- 关注
原创 【IOS webview】源代码映射错误,页面卡住不动
webpack配置不要GENERATE_SOURCEMAP。其他IOS也会报错,但不影响页面显示。
2025-04-02 15:37:57
163
原创 【webview Android】视频获取首帧为封面
把图存起来,盖在video上,记录video是否被点击。点击过的视频不会显示首帧封面了,因此点击过就隐藏图片等。在拿到首帧图前,可以让上传控件状态与上传时一致(即。让用户以为还在上传视频,实际上在解析封面。客户端中h5上传视频,视频封面默认首帧。
2025-02-14 15:58:24
584
原创 【webview IOS】Unexpected token ‘=‘. Expected an opening ‘(‘ before a method‘s parameter list .
把代码编译为ES5,兼容性更好。这里使用webpack-Babel。一打开h5就报错,且高版本不会报错。得知此功能在IOS15以下不支持。IOS 15 以下的版本。
2025-01-09 16:26:17
389
原创 【前端】跨域问题与缓存
顾名思义是由于浏览器的缓存机制导致的一种跨域情况。这种跨域一般会出现在浏览器通过一些无视跨域的标签和css(如img、background-image)缓存了一些图片资源之后,当再次发起图片请求时(比如转base64等操作),就不会向服务器端请求数据,而是直接请求缓存数据,从而引起了跨域。这个时候即使服务端设置了。省流:浏览器请求的是服务器的缓存数据,会导致跨域的发生。解决方法:禁用缓存强刷/无痕浏览。
2024-11-28 15:57:37
745
原创 【Vue.js设计与实现】第三篇第11章:渲染器-快速 Diff 算法-阅读笔记
快速 Diff 算法在实测中性能最优。它借鉴了文本 Diff 中的预处理思路,先处理新旧两组子节点中相同的前置节点和相同的后置节点。当前置节点和后置节点全部处理完毕后,如果无法简单地通过挂载新节点或者卸载已经不存在的节点来完成更新,则需要根据节点的索引关系,构造出一个最长递增子序列。最长递增子序列所指向的节点即为不需要移动的节点。
2024-10-18 15:47:21
857
原创 【Vue.js设计与实现】第三篇第10章:渲染器-双端 Diff 算法-阅读笔记
本章我们介绍了双端 Diff 算法的原理及其优势。双端 Diff 算法指的是,在新旧两组子节点的四个端点之间分别进行比较,并试图找到可复用的节点。相比简单 Diff 算法,双端 Diff 算法的优势在于,对于同样的更新场景,执行的 DOM 移动操作次数更少。
2024-10-18 10:51:28
1064
原创 【Vue.js设计与实现】阅读笔记目录(持续更新)
【Vue.js设计与实现】第一篇:框架设计概览-阅读笔记【Vue.js设计与实现】第二篇第4章:响应系统-响应系统的作用与实现-阅读笔记【Vue.js设计与实现】第三篇第9章:渲染器-简单Diff算法-阅读笔记
2024-10-17 15:43:21
340
原创 【Vue.js设计与实现】第三篇第9章:渲染器-简单Diff算法-阅读笔记
当新旧vnode 的子节点都是一组节点时,为了以最小的性能开销完成更新操作,需要比较两组子节点,用于比较的算法就叫作。需要引入额外的key作为vnode的标识:key相当于一个节点的身份证号,如果两个虚拟节点具有相同的key和。可以通过 DOM 的移动来完成子节点的更新,这要比不断地执行子节点的卸载和挂载性能更好。要从旧的位置移动到新位置,即4在3的后面,5在4的后面。答:当新旧两组节点的顺序不变时,就不需要额外的移动操作。新节点没有在旧节点找到,说明这是新元素。则新的节点对应的旧节点的。
2024-10-17 15:38:27
758
原创 【HTML并不简单】笔记5-你不知道的label、fieldset、legend、progress、meter
这样,用户就能清楚地知道,下面的“有”和“没有”对应的到底是什么。如果optimum属性值在low和high之间,则说明low和high都是警戒值,只有在这个区间范围内的值才是正常的,因此,最终的色值状态只有两个,即橙色警戒和绿色正常。元素中的“有”和“没有”两个词,至于对应的问题是什么,不得而知,或者是触摸到了问题,但是并不知道对应的选项是什么,这时用户体验就不好。如果optimum属性值比high大,也会出现3段色值状态,此时,大于high的值会被认为是正常的,因此表现为绿色,这个效果可以类比为。
2024-10-16 11:17:21
1106
原创 【ElementPlus源码】Switch开关
分别表示开关文案、控制文本是否显示在点内。源码中是驼峰式的,主要通过条件渲染实现。开关icon。条件渲染实现。
2024-10-15 15:36:49
1127
原创 【HTML并不简单】笔记4-你不知道的details、dialog和popover元素
summary {隐藏浏览器原生的标记符,再使用::before或::after伪元素模拟。
2024-10-14 14:37:28
824
原创 【debug】ElementPlus table组件column传入formatter类型报错
不能将类型“((row: ShortUserPayType) => string) | ((row: ShortUserPayType) => number) | undefined”分配给类型“((row: any, column: TableColumnCtx。但我不需要这么多属性,我只需要row属性。
2024-10-11 15:33:41
436
原创 【HTML并不简单】笔记3-你不知道的列表元素和html、body
首字母的d表示定义:definition。l表示列表:list。t表示术语:term。第二个d表示描述:description。
2024-10-08 14:47:05
908
原创 【HTML并不简单】笔记2-你不知道的a元素属性:target、download、ping、referrerpolicy和href
ping请求的content-type是text/ping,包含了用户的User-Agent、浏览器和操作系统信息、目标来源地址等信息,非常方便开发人员追踪收集的数据。元素中,只要target属性设为某个任意的固定值,则每次新窗口打开的时候,都只会在这个窗口创建。元素还自带上报能力。只要设置了ping属性,当用户点击此链接元素的时候,浏览器就会自动发送一个POST请求给ping属性设置的地址。使用base很容易出现意料之外的状况,在不知名的地方设置了base,会在很多地方都生效,不好。
2024-09-30 15:30:11
1187
原创 【HTML并不简单】笔记1-常用rel总结:nofollow、noopener、opener、noreferrer,relList
在移动端开发中,页面左上角往往会有一个“返回”按钮,但如果用户是通过点击某个分享链接进入的,那么这个返回的逻辑就不对,因为并没有上一页,此时这个“返回”按钮显示为“主页”按钮更合适。在某列表页面,点击任意列表会进入详情页,然后希望再次返回(通过页面内链接,而非浏览器的“后退”按钮)到列表页的时候,页面依然定位在之前的滚动位置,但如果是从其他页面进入的,则滚动置顶。SEO中有个策略,如果一个权重很高的网站,直接外链一个权重不高的中小网站,同时没有设置rel=“nofollow”,那么这个中小网站的权重。
2024-09-30 10:39:29
1111
原创 【前端】自动回复点击生成新的自动回复:下发html在前端生成dom,点击调用方法
方法返回自动回复的内容,把它加到自动回复的列表中。由于是svelte,需要。自动回复会下发内容和链接,点击链接会自动回复新的内容,像淘宝等的自动回复。生命周期(即DOM更新后)添加点击自动回复的事件。目标:实现点击下发的链接调用对应方法,完成自动回复。由于下发的链接不会经过svelte编译器,因此。下发的内容已经写了类和方法,并传入参数。点击后自动触发方法,需要手动去调用。直接获取链接的DOM元素,在。否则会点一次触发多次。技术栈:svelte。中获取参数,手动调用。
2024-09-04 19:48:10
579
原创 【前端】上传视频,截取第一帧图片
使用canvas实现:从一个视频文件中提取一帧图像,并将这个图像转换为一个可以在浏览器中使用的URL。使用input上传视频,获得视频的第一帧。得到的videoImg 可以在。
2024-07-30 18:07:05
1008
原创 【前端】原生实现图片的放大与缩放
,否则会不断地触发监听事件,表示为:当手指捏合操作图片的放大和缩小时,图片的变化显得很卡,且控制台输出一堆信息(中:我们点击图片会显示一个蒙版,图片显示在蒙版上,允许放大和缩小。因此,点击图片时才渲染这个蒙版,点击图片,出现一个蒙版和图片,双指捏合可以使图片放大或缩小。使用前端框架是svelte,但是不影响,功能都是JS实现。中定义此事件的监听,此时可能不存在。,要先把之前定义的监听移除(至于蒙版和图片:点击图片时。等,简单逻辑不赘述。
2024-07-16 16:33:50
1171
原创 【Swiper】轮播图 笔记
网络请求得到数据,原本使用循环渲染每一个slide,即3个。但是,这样会使得loop失效:使用loop的话(loop:true)要请求完图片才知道有多少个slide,会导致:一进页面不能立即显示轮播图。需求是:一共三张图,来回切,保持循环(1,2,3->2,3,1->3,1,2->1,2,3).虽然会显示循环,但是效果不好,在循环的图active(选中居中)之前,它是没有图片渲染出来的。,循3 才会显示出图片,但是此时循2没有显示出图片。的 循3 是空的,要把 循3 滑到中间,即。是选中居中的前一个的类,
2024-07-09 11:01:29
1225
1
原创 【前端】上传和下载zip文件,有进度条(el-progess)
传入一个srtProgress即可。不过效果是一下就闪到100了(可能是接口响应很快?场景:要上传一个zip,调用接口,然后下载一个zip。调用接口的接口响应要显示在进度条中。点击button实现上传,调用input原生组件的方法。的响应头,File对象不能被序列化为JSON。上传用的是input原生控件,在页面中隐藏。创建一个url和a标签,点击a标签则下载。在event中拿到上传的文件file。,要使用formData和。,以支持二进制的传输。请求某个接口下载文件。限制只能上传zip。
2024-07-02 16:45:38
578
原创 【ElementPlus源码】Scrollbar 滚动条
Scrollbar 滚动条组件从里到外分为三个组件:thumb(滚动条的可拖动部分)、bar(thumb的相关信息)和Scrollbar(滚动条组件)。此方法做的事情是:将滚动条thumb移动到点击位置,并相应地调整滚动区域的滚动位置。,可以在elementPlus滚动条的文档中试验一下,拖动滚动条结束后,滚动条的显示会消失。鼠标移动时,函数会根据鼠标位置更新滚动条thumb的位置,并调整滚动区域的滚动位置。通俗的语言就是:点击滚动条然后拖动,滚动条和滚动区域都会更新位置,就做了这样的事情。
2024-07-01 16:42:06
1267
原创 【ElementPlus源码】Layout 布局
col中注入一个rowContextKey,如果没有就默认为ref(0),解构出gutter。row和col感觉都挺简单的,样式文件的话,是以import形式写的。rowContextKey在row中provide。gutter是一个row的属性,表示栅格间隔。左右margin是gutter间隔/2。看源码时候做的笔记。col有属性如下:(与文档一致)
2024-06-28 15:40:54
466
原创 【ElementPlus源码】Container 布局容器
返回了一个对象ElContainer ,有一个install方法,若调用install方法,则将Container、Aside、Footer、Header、Main五个组件注册到app上,并可以通过ElContainer.Container的方法访问Container。在许多编程语言和环境中,它通常被用作一个占位符函数,当你需要一个函数但又不希望它做任何事情时,可以使用NOOP。若没有props.direction,判断插槽中是否有header和footer,有则返回true,代表垂直。
2024-06-28 14:22:47
1237
原创 【ElementPlus源码】Button 按钮
vm.proxy 是当前 Vue 实例的代理对象,$props 是代理对象的属性集合,[name] 是指定的属性。获取当前Vue实例,返回一个计算属性,其值是:实例的某个属性。调用useButton创建button实例,解构出一堆属性。,即是字符串类型的,values值是枚举值,非必填的属性。如:在button中,当传入的type为text时,定义了button有哪些属性,和属性的类型。作用:传入一个name,返回实例的name属性。是一个构建属性的方法,没看懂。看源码时候做的笔记。其他props的属性。
2024-06-28 09:48:39
1056
原创 el-pagination分页组件导致发送两次请求
当分页组件选择到别的页数(非第一页),再进行查询,查询的内容会显示在第一页,此时会发送两次网络请求。,这里是自动切到1,因为bookTotal<pageSizes。页数的参数变化后,会。网络请求后,返回的数据会改变bookTotal,即分页组件的total参数,网络请求代码:将返回的数据中的数据个数赋值给bookTotal。搜索代码:将分页组件页数选择为1,发送网络请求。可以控制当前分页的页数,写上它就不会触发。,于是又调用了一次接口getList。
2024-06-18 14:47:22
655
原创 el-radio单选框的选中与取消
结果为:第一次点击时选中,之后多次点击都是选中,且控制台输出为false。需求是有一个单选框,点击选中,再次点击取消。
2024-06-18 14:33:23
2392
6
原创 NodeJs实现脚本:将xlxs文件输出到json文件中(已封装成npm)
最近有一个功能,将json文件里的内容抽取到一个xlxs中,然后维护xlxs文件。不要做那种:“没有outputKey应该不传,但我就传个空串”,可能会报奇怪的错误!中途使用md5加密后的en翻译为key,将对应xlsx文件中的翻译(那一行)保存到set中,是因为xlsx中。维护一个xlsx文档,里面包含国际化的所有翻译,如下:第一行 为 语言。:传入一个数组,包含要求的语言,没有就不填,会默认xlsx里的所有文件。),将对应翻译生成到对应文件夹。其中key值为i18n的标记,value值为对应的翻译。
2024-06-07 16:56:09
808
原创 【debug】element-ui时间控件回显后不可编辑且显示为空
问题:使用element-ui的时间控件回显数据,编辑数据没有反应:点时间和“确认”按钮都没反应。我认为不是这个原因,因为其他的控件都回显成功且可以编辑。输入框中会显示数据,但提交时的校验显示为空。查了很多资料,基本上都说要手动赋值,如。中显式地声明值,这里是。中显示的声明这个值。
2024-03-06 19:05:55
921
原创 【前端】登陆页面:记住密码、设置cookie、加密
这里有加密和解密的操作。在线生成RSA的公钥和私钥,使用。将保存在cookie中的密码自动填入表单:库。
2024-03-03 21:07:55
1297
原创 【随记】分享第1期(2024.03.02)
而课堂上现在的教法,把历史上长长的思考过程压缩,裁减掉所有的错误和累赘,压缩成一条条公式与冷冰冰的推导。背了那些,除了考出完美的答卷,就没太多意义了。
2024-03-02 17:40:55
1019
原创 【国际化】用JQuery-i18next的国际化demo,引入json
【代码】【国际化】用JQuery-i18next的国际化demo,引入json。
2024-02-21 15:30:40
908
【知识图谱研究综述】知识图谱构建技术.xmind
2021-04-20
【知识图谱研究综述】知识表示.xmind
2021-04-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人