![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 63
缓次郎
这个作者很懒,什么都没留下…
展开
-
【css】image 使用 transform:scale 放大后显示不全的问题
为用户点击的坐标值优化体验。问题在于 origin 位于图片下方时,图片放大后出现滚动条,而滚动条的高度会忽略放大显示的图片的上半部分,导致用户滚动到图片上方时会发现图片显示不全。实现图片放大 1.2 倍显示的功能,在此基础上可以修改。值,这样多余的部分会被顶下来,然后在渲染完成后设置。解决:可以设置图片的。,让图片滚动到原先的。原创 2024-07-14 17:29:09 · 399 阅读 · 0 评论 -
【JS】Promise 的并发数控制
写爬虫的时候,可能需要控制网络请求的并发数以避免被反爬。我们知道 Promise 的结果是异步获取的,因此控制 Promise 的并发数的基本思路是。先从最基本的情况开始——限制并发数为 1,也就是只有前一个 Promise 执行完成后下一个 Promise 才能执行。对于并发数 > 1 的情况,特殊的点在于初始化时需要先启动数量原创 2024-03-08 16:53:50 · 534 阅读 · 0 评论 -
[CSS] 文本折行
文本折行一般分为两种情况:CJK(Chinese/Japanese/Korean) 字符和非 CJK 字符。一般非 CJK 字符折行发生在两个单词的空格中间,见下图:图中文本 “hello world” 包裹容器的宽度为 2rem,但是 hello 并没有被截取成两段,反而是在空格处发生了折行。这种行为也很容易理解——把一个单词拆成两部分,很可能会使单词失去意义,所以只能在空格折行。CJK 字符,图中为 “你好世界”,则是在 “世”和“界”中间发生了折行,符合设置的 3rem 字符宽度。原创 2023-11-16 10:58:03 · 718 阅读 · 0 评论 -
[Vue3] 对象的双向绑定
Vue2 和 Vue3 实现对象的双向绑定的思路不同,需要注意二者之间的区别。如果监听的不是对象,则可以直接用 computed 的方式实现双向绑定。原创 2023-08-18 17:10:35 · 397 阅读 · 0 评论 -
【微信小程序】记一次自定义微信小程序组件的思路
用 WXML + CSS + JS 模拟原生组件的样式和行为。原创 2023-08-17 16:46:32 · 1054 阅读 · 0 评论 -
【前端】husky 的使用
git hooksLinux 命令行好在目前 LLM 非常发达,碰到类似的问题可以直接问 AI。原创 2023-08-14 11:34:29 · 1730 阅读 · 0 评论 -
ElementPlus 自定义主题(Vite4 + Vue3)
配置 ElementPlus 主题的时候遇到 SCSS 循环导入的报错,排查后发现是以为在。中引入创建的样式文件(未测试);如果是按需导入,则需要删除。中引入了两次自定义主题的样式文件,解决方法很简单,去掉。如果不是按需导入,则将 2. 最后一行代码放开,并在。以上代码来自 ElementPlus 官网。下面是配置 ElementPlus 自定义主题的流程。选项下的内容,根据项目采用的插件。中导入自定义样式的代码,并配置。中导入自定义主题的文件即可。,全量导入暂时没有测试。原创 2023-08-08 15:23:46 · 2148 阅读 · 0 评论 -
.m3u8、HLS 协议
其中 #[TEXT] 被称为标签,用来给分片和文件提供描述。#EXTINF:10.0 后面的 10.0 标识分片为 10s,下一行的链接则代表分片的地址,可以直接下载这个分片到本地。如果请求 .ts 分片的时候需要认证,则在请求头或者 URL 中添加对应的参数。可以使用这个 https://github.com/globocom/m3u8 Python 包解析 m3u8 文件。上面的例子一共有 3 个 .ts 分片,每个分片 10s,因此该视频长度为 30s。原创 2023-07-14 17:40:44 · 488 阅读 · 0 评论 -
[前端] 虚拟列表的实现
假设后端返回 1000 条数据,前端一次性展示出来,可能用户只想看到前 100 条,那么剩下 90% 的数据就没必要展示了。因为我们实际上只展示一个视口能看到的元素,所以实际上页面是不会有很大的滚动条(或者没有滚动条)的,所以这里需要一个撑起页面高度的元素,这个元素的高度为。另外在无限滚动的页面中,也可能会有大量的数据存在前端展示,随着滚动深度加深,展示的数据也越来越多,就可能造成上面提到的性能问题。只考虑了最基本的情况:元素高度是固定的,一般用来展示图片之类的。,我们要展示的元素则是通过。原创 2023-03-21 14:52:36 · 1005 阅读 · 1 评论 -
ElementUI Table 布局的调试
ElTable 提供了很多自定义表格属性的回调函数,但是官方文档中并没有什么例子。实际开发中,需要结合实际的 DOM 来调试,同时也要清楚 ElTable 的每个元素的作用,这样才能少走弯路。原创 2022-10-21 10:29:44 · 631 阅读 · 0 评论 -
[js] 实现侧边菜单可用鼠标拖动调整大小的功能
element-ui 提供了一个 nav-menu 组件,默认情况下该组件没有拖动调整大小的功能。下面通过代码为 nav-menu 添加这个功能。原创 2022-10-20 14:34:35 · 1008 阅读 · 0 评论 -
ElementUI 组件设置全局默认值
最近碰到个需求,要求把管理系统的所有 `el-select` 元素都添加 `clearable` 属性。整个管理系统估计有几百个页面,`el-select` 的数量更是不计其数,如果用传统方法一个一个的找然后添加属性,绝对是不现实的。下面介绍另一种更加方便的方法。原创 2022-10-19 18:02:51 · 2091 阅读 · 0 评论 -
【Vue】Vue 判断插槽内容是否加载完成
判断插槽内容是否加载完成,实现显示占位内容等功能原创 2022-10-04 11:27:11 · 2550 阅读 · 0 评论 -
[node.js] PrismaORM 入门
Prisma 的官方网站:https://www.prisma.io/目前应该是 4.x 版本其中 sqlite 还可以指定为其他想初始化的数据库,如 MySQL执行这条指令会在当前项目根文件夹创建一个.env文件用来保存数据库的地址,还会创建一个prisma文件夹,该文件夹中有一个的文件,这个文件用来定义数据库表的字段。.prisma 文件在 VSCode 上有插件,安装后能提供语法高亮和自动格式化等功能其中用model关键字定义表,字段的的数据类型可以参考官方文档,这里主要讲讲和的作用。.env。原创 2022-09-28 09:42:51 · 995 阅读 · 0 评论 -
[JS] node.js 入门
API 文档:https://nodejs.dev/en/api/v18/documentation/原创 2022-09-24 20:32:31 · 482 阅读 · 0 评论 -
[JS] 网络请求相关
本文介绍如下内容:1. XMLHttpRequest2. Fetch3. WebSocket三个浏览器原生支持的发送网络请求的方法。原创 2022-09-20 11:08:35 · 256 阅读 · 0 评论 -
[JS] DOM 的事件监听、混杂模式和标准模式适配
本文主要内容:事件监听鼠标事件键盘事件页面加载事件。原创 2022-09-19 08:24:37 · 300 阅读 · 0 评论 -
[JS]迭代器、可迭代对象、生成器详解
"迭代器(iterator)是按需创建的一次性对象。每个迭代器都会关联一个可迭代对象,而迭代器会暴露迭代其关联可迭代对象的 API。迭代器无须了解与其关联的可迭代对象的结构,只需要知道如何取得连续的值。这种概念上的分离正是 Iterable 和 Iterator 的强大之处"——引用自《JavaScript 高级程序设计第四版》。原创 2022-09-15 17:50:02 · 594 阅读 · 0 评论 -
[JS高级程序设计] ES6 新增的集合对象总结
ES6 新增了如下集合对象其中Map和WeakMap是一组,Set和WeakSet是一组,从代码层面来讲,Weakxxx无法被迭代且只能以 Object 或继承自 Object 的对象作为值,因为它们保存的是对象的弱引用。原创 2022-09-14 09:53:16 · 194 阅读 · 0 评论 -
【JS】前端面试常见手写题总结
本文主要总结从网上看到的各种 JS 手写题,其中应用题居多。实际应用中,需要结合自己的理解而不是背代码。原创 2022-09-08 16:46:57 · 216 阅读 · 0 评论 -
【前端】HTTP相关知识总结
主要总结自:https://juejin.cn/post/68449041000358215752022-9-1 持续更新。原创 2022-09-01 21:35:40 · 359 阅读 · 0 评论 -
【JS】模块化的几种解决方案(AMD、CMD、ES6、CommonJS)
摘抄自作者:浪里行舟链接:https://juejin.cn/post/6844903744518389768来源:稀土掘金CommonJS规范主要用于服务端编程,加载模块是同步的,这并不适合在浏览器环境,因为同步意味着阻塞加载,浏览器资源是异步加载的,因此有了AMD CMD解决方案。AMD规范在浏览器环境中异步加载模块,而且可以并行加载多个模块。不过,AMD规范开发成本高,代码的阅读和书写比较困难,模块定义方式的语义不顺畅。...原创 2022-09-01 15:16:03 · 593 阅读 · 0 评论 -
【Vue】v-html 功能加强
v-html的功能是替换元素的innerHTML,在大部分场景下都够用,但是因为是直接替换innerHTML所以无法用 Vue 的事件监听方法。下面引入一个需求,来实现这个功能。原创 2022-08-08 22:39:29 · 901 阅读 · 0 评论 -
【JS】实现 Promise 的并发数控制
首先JS自带两个并发控制的函数和,前者用来实现并发运行参数列表中的所有Promise;setTimeout(resolve,1000)})}//myFetch并发执行,返回参数列表的PromisePromise.all([myFetch(),myFetch()])//返回最先运行完的myFetch的结果,只有一个Promise.race([myFetch(),myFetch()])上面两个方法还不够灵活,无法实现并发数的控制,下面提供两个思路。...原创 2022-07-30 09:58:28 · 2368 阅读 · 0 评论 -
实现下拉刷新功能
下拉刷新主要用于移动端网页,PC端网页并没有touch事件所以需要自行模拟。从事件名我们很容易就能看出这几个事件分别代表什么含义。在事件回调函数里面,可以获取touchList,该list中的每一个元素表示一个触摸点的信息。可以看出,触摸事件可以监听到多个触摸点,例如多个手指滑动屏幕就会有多个触摸点。实现下来刷新功能,我们只考虑一个触摸点即可。...原创 2022-07-15 11:31:17 · 3336 阅读 · 0 评论 -
[JS]数据类型转换规则和运算
先总结看 和 的调用顺序和返回值,如果返回值为原始值则使用,如果两个函数都没返回原始值,则报错。 和 方法的调用顺序在这两个方法都返回原始值的时候有用,因为先被调用的那个方法的返回值会作为运算的值。[] + {}、({}) + [] 等奇怪的加法运算加号的运算规则回头看上面的代码,因为 是两个对象相加,所以会先调用 方法,同理 因为 a 被转为 number,所以整体也是 number 运算。而 则是因为有 string 参与运算,将 的结果当成 string 看待,得到 ‘100’原创 2022-07-05 15:34:30 · 63 阅读 · 0 评论 -
【JS】实现函数柯里化
函数柯里化也是JS中讲烂的东西了,今天初次接触,结合大佬的文章讲讲自己的理解。参考:https://github.com/mqyqingfeng/Blog/issues/42柯里化的作用最直观的用法就是节省代码中共同参数的重复,比如一个函数有四个参数,其中前三个在多次调用中都是一样的,最后一个视情况不同,伪代码如下:为了减少参数的重复,可以把函数curry化以上,日常开发中感觉并不是很用的上。curry 化的核心实际上 curry 化的核心思路就是不断返回收集参数的函数,直到参数满足函数调用个数,再原创 2022-07-03 22:14:50 · 1005 阅读 · 0 评论 -
【underscore】实现链式调用
这是 underscore 学习的第二章,本章我们在上一章的基础上实现链式调用功能的实现。具体思路参考:https://github.com/mqyqingfeng/Blog/issues/57首先 underscore 默认并没有提供链式调用,需要使用 作为调用第一段的方法,让后面的方法支持链式调用。链式调用的核心是返回 underscore 的实例对象,先写个小 demo 演示这一点可以看到虽然实现了链式调用但是因为没有显式指定调用的终点所以返回的还是 this,一个解决方法是提供一个显式的方法获取原创 2022-07-03 20:08:45 · 75 阅读 · 0 评论 -
【underscore】函数式调用和面向对象式调用方法的实现
函数式调用_.reverse(‘text’)面向对象式调用_(‘text’).reverse()可以看到二者的区别是函数式调用是直接使用调用方法,而面向对象调用的方法是先创建对象,然后调用方法(不传参)从上面可以看出,underscore 对象不是一个简单的对象,除了能调用方法外,还可以调用自身,在 JS 中函数也是一种对象,且符合我们的要求。underscore 构造函数上面的代码,调用时先判断调用者是否是 underscore 的实例,如果不是就以 obj 为参数创建 underscore 实例,原创 2022-07-03 17:23:29 · 186 阅读 · 1 评论 -
JS基础-深拷贝的实现
简单手写了个深拷贝,记录一下。原创 2022-06-09 17:10:29 · 66 阅读 · 0 评论 -
ElMessage 组件实现
源码在线预览功能分析参考 ElementPlus 官网给出的例子,我们的 Message 组件至少需要:自定义各种类型的 Message(error、info、success 等)提供静态方法调用,如 Message.success()进入、退出动画;Message 消失后上移动画Message 组件样式方面 Messge 组件非常简单,就是个 fixed 居中的 div,而进入、退出动画可以通过 transition 实现,消失可以通过 props 调用回调通知调用者。<tem原创 2022-05-25 17:18:55 · 5986 阅读 · 0 评论 -
实现 ElementPlus 的 MessageBox
ElementPlus 的 MessageBox 主要功能分析提供一个函数用来展示消息框,这个函数提供如标题、内容等配置参数消息框出现和消失时有动画使用 Promise 获取消息框的结果基本思路Vue 中动态显示一个组件,无非就是通过 h 函数创建 VNode,并且把这个 VNode 挂载在 DOM 树上。这里有两种挂载的方式:createApp在 main.js 中创建 Vue 实例用的就是这种方法,这也是 Vue3 中代替 Vue2 的 Vue.extend 的方法,简单使用案例如下:原创 2022-05-25 10:53:19 · 2640 阅读 · 0 评论 -
【前端逆向】实现拦截函数功能
需求:实现 hook 某个函数,调用该函数后可以执行自定义的 hook,无需修改原网站的 js 代码。示例这里实现原创 2022-05-17 15:44:32 · 372 阅读 · 0 评论 -
HTTP 请求传参个人总结
?传参格式:http://www.baidu.com?name=123&age=12参数直接跟在 URL 后面json body这种传参方式一般用于 POST 请求格式:http://www.baidu.com请求体:{ name: 123, age: 12}打开浏览器可以看到 body 被解析为 JSON 格式,且名字为请求负载formdata 传参这种传参方式一般也用于 POST,URL 中无法看到请求参数格式:请求头需要指定:headers: {原创 2022-05-07 19:01:07 · 1026 阅读 · 0 评论 -
【Vue3】实现 el-tab 的基本功能
这次我们要实现两个组件:Tab.vue 和 TabItem.vue,其中 TabItem 是 Tab 的插槽内容。实际上不用封装组件也能达到类似的效果,但是考虑到语义化和可复用性等要求,封装一个 Tabs 组件还是有必要的。根据 Vue 的风格指南,组件名需为两个以上的单词,以避免和原生 HTML 的标签冲突,这里为了简单起见不实现这个要求。在线体验Tabs 的基本功能<Tab :active-index="activeIndex"> <TabItem v-f原创 2022-04-20 17:47:42 · 2371 阅读 · 1 评论 -
【Vue】Vue-Router 差缺补漏
最近看了 vue-router 的官网,学到了不少新东西,现记录如下404 匹配const routes = [ { path: '/:pathMatch(.*)*', component: () => import('NotFound.vue') }]其中 pathMatch 是 $route.params 的 key 的名字,可以任意。后面跟的是正则表达式.*,表示匹配任意路径。到这里实际上 404 匹配前端路由这部分就完成了,如果你想把匹配的值分开,可以在匹配正则后面再.原创 2022-03-07 15:32:39 · 819 阅读 · 0 评论 -
【JavaScript】ES5实现继承的几种方案
原形链继承function Person(name, age) { this.name = name; this.age = age; this.sleeping = function() { console.log(`${this.name} is sleeping.`) }}function Student(name, age) { Person.call(this, name, age); this.studying = function()原创 2022-02-26 14:38:23 · 543 阅读 · 0 评论 -
【JavaScript】JS正则断言
先行断言格式:exp1(?=exp2) 查找 exp2 前面的 exp1后行断言格式: (?<=exp1)exp2 查找 exp1 后面的 exp2正向否定查找格式:exp1(?!exp2) 查找后面不是 exp2 的 exp1反向否定查找格式: (?<!exp1)exp2 查找前面不是 exp1 的 exp2例子const r1 = /\w+(?=\d+)/;const r2 = /(?<=http)\w+/;const r3 = /www(?!com)/;co原创 2022-02-24 21:10:51 · 820 阅读 · 0 评论 -
【CSS】Flex布局总结
本文基本是 Flex入门(MDN) 的总结,推荐先观看原文。弹性容器和弹性元素Flex 的 CSS 属性主要作用于弹性容器和弹性元素,因此在学习 Flex 布局之前,我们需要先搞清楚这两个概念。弹性容器设置了 display: flex 的元素是弹性容器弹性元素弹性容器的直接子元素是弹性元素。下面我们将分别讲解作用于这两个容器的属性。弹性容器的属性align-items 定义交叉轴(副轴)的对齐方式。默认值是 stretch,也就是弹性元素会拉伸填满弹性容器的副轴。justify-.原创 2022-02-23 12:52:07 · 332 阅读 · 0 评论 -
【JavaScript】npm 包管理
package.jsonnode 用 package.json 记录当前项目所依赖的包。可以通过 npm init 创建这个文件,使用 npm install 安装依赖。package.json 中还有很多配置,相信写过项目的应该都不会陌生,所以这里不再赘述。semver ~ 和 ^ 的含义查看 package.json 可以看到依赖的版本,有的版本号前面是 ~,有的是 ^,那么这两个符号代表着什么意思呢。这要从 semver 版本规范讲起。semver 将版本号分为三个部分 x.y.z,其中 x原创 2022-02-14 21:36:24 · 366 阅读 · 0 评论