- 博客(52)
- 收藏
- 关注
RSS订阅原创 你还在傻傻分不清scroll、offset、client吗？
属性作用返回该元素上边框大小返回该元素左边框大小返回该元素包括padding+content的宽度，不含边框返回该元素包括padding+content的高度，不含边框属性描述返回该元素带有定位的父级元素，如果父级元素没有定位则返回body。返回该元素上外边框相对带有定位的父级元素上内边框的偏移，如果父级元素没有定位则返回相对body上方的偏移。返回该元素左外边框相对带有定位的父级元素左内边框的偏移，如果父级元素没有定位则返回相对body左侧的偏移。
2025-03-16 16:20:14
770
原创 原生js实现虚拟列表
虚拟列表是一种优化长列表性能技术，用于大量数据渲染的场景。在传统的渲染过程中，是一次性渲染全部数据，将会导致大量内存损耗，可能也会引起卡顿，影响用户体验。只渲染可见区域滚动时动态加载虚拟列表根据列表容器的可视范围，动态计算出在可视范围内的列表节点 item，然后只渲染视野边界内容的 item，通过控制页面节点数避免内存线性增加。
2025-03-08 15:56:31
365
原创 安康同行难点和亮点
菜单权限的难点在于如何处理后端数据，正确的设置好route的component，这是最关键也是最难的一步，在动态导入路由的时候怎么解决不必要的性能开销。
2025-01-11 17:52:58
265
原创 饭搭难点亮点
当用户修改时，只需要点击叉号，删除当前预览的照片，因为:max-count=“1”，只能上传一张照片，当照片消失时，上传按钮会出现，点击上传，就能完成照片的修改。个人头像的修改是最大的难点，这个功能花费了两三天，因为做出来的要不是有bug，要不就是达不到理想效果，因为我用了vant ui，里面有图片上传的组件。在首页和其他展示多个数据的页面，有时候下部的导航栏会挡住数据展示，影响用户使用，所以做了一个功能，当用户往下滑动时，底部导航栏隐藏。但是这种有问题，基础用法只能展示图片，不能进行修改。
2025-01-11 17:48:41
1264
原创 git项目提交步骤(简洁版)
在命令窗口中输入：git remote add origin 仓库地址。在命令窗口中输入：git pull origin master。在命令窗口中输入：git push origin master。在命令窗口中输入：git commit -m “提交项目”4.找到要上传的文件，在目录内右键点击。在命令窗口中输入：git add .在命令窗口中输入：git init。
2025-01-10 19:52:24
325
原创 vue2基础
特性数据驱动视图vue 会监听数据的变化，从而自动重新渲染页面的结构优点：当页面数据发生变化时，页面会自动重新渲染！但是数据驱动视图是单向的数据绑定2.双向数据绑定双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。优点：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！MVVMMVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是ModelView和ViewModel。
2024-12-18 17:34:46
1056
1
原创 浅谈vuex和pinia的区别
VueX：VueX 是 Vue.js 官方提供的状态管理库。它基于 Flux 架构模式，提供了一个中央状态存储器来管理应用程序中的状态。VueX 可以通过 mutations、actions 和 getters 等概念来修改和处理状态的变更，同时具有强大的工具和插件支持。Pinia是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。
2024-11-04 21:53:11
892
原创 Pinia
pinia是一个状态管理工具pinia是 Vuex4 的升级版，也就是 Vuex5官网相比于vuex4，pinia有很大改进，即：mutation已被弃用，Actions同步异步都支持无需要创建自定义的复杂包装器来支持 TypeScript，一切都可标注类型，API 的设计方式是尽可能地利用 TS 类型推理。无需要动态添加 Store，它们默认都是动态的不再有嵌套结构的模块不再有可命名的模块文件结构区别# Vuex 示例(假设是命名模块)。
2024-11-03 10:45:54
1086
原创 小程序其他功能
手机验证组件，用于帮助开发者向用户发起手机号申请，必须经过用户同意后，才能获得由平台验证后的手机号，进而为用户提供相应服务。需要将 input 组件 type 的值设置为 nickname，当用户输入框输入时，键盘上方会展示微信昵称。需要将 button 组件 open-type 的值设置为 contact，当用户点击后就会进入客服会话。当小程序需要让用户完善个人资料时，我们可以通过微信提供的头像、昵称填写能力快速完善。当小程序需要让用户完善个人资料时，我们可以通过微信提供的头像、昵称填写能力快速完善。
2024-09-18 08:07:19
1261
原创 小程序组件间通信
获取子组件的实例对象，就可以直接拿到子组件的任意数据和方法。子组件如果需要向父组件传递数据，可以通过小程序提供的事件系统实现传递传递，可以传递任意数据。与普通的 WXML 模板类似，使用数据绑定，这样就可以向子组件的属性传递动态数据。父组件如果需要向子组件传递指定属性的数据，在 WXML 中需要使用数据绑定的方式。1.在父组件 WXML 中使用 数据绑定 的方式向子组件传递动态数据。2.子组件内部使用 properties 接收父组件传递的数据即可。中的数据进行修改，但是一般不建议修改。
2024-09-16 15:08:31
1048
原创 微信小程序开发，看这一文就够了
主体文件页面文件主体文件又称小程序全局文件，顾名思义，全局文件能够作用于整个小程序，影响到小程序的每个页面，且主体文件必须放到项目的根目录下页面文件页面文件，wxss、json 文件能够覆盖主体文件中的样式和配置强烈建议：页面文件夹名称和页面文件名称要保持一致 感叹号。
2024-09-05 15:12:56
2788
1
原创 react项目--博客管理
利用useLocation进行反向高亮//反向高亮//触发个人信息的action//获取store内的个人信息选择时，高亮效果没实现，增加以下两行代码。
2024-06-10 13:54:01
961
1
原创 css基础
什么是 CSS?CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个。
2024-06-09 18:37:03
732
原创 HTML、HTML5一览
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面。
2024-06-04 17:00:53
1490
1
原创 webpack
webpack就是一个用于javascript应用程序的静态模块打包工具。从v4版本开始，webpack就可以不用引入配置文件进行打包，但是，它仍然有着高度可配置性。入口起点指示webpack该使用的模块，作为构建内部依赖图的开始。进入起点之后，webpack会找出入口起点依赖的模块和库。默认是 可以指定一个或多个不同的起点。文件名：entry也能接收文件路径数组，这将创建一个所谓的 “multi-main entry”。在你想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 “chunk” 中时
2024-05-19 17:57:15
928
原创 Typescript基础
class 类名 {属性名: 类型;constructor(参数: 类型){this.属性名 = 参数;方法名(){....console.log(`大家好，我是${thisconsole . log(` 大家好，我是 ${ this . name } `);} }console . log(` 大家好，我是 ${ this . name } `);} }const p = new Person('孙悟空', 18);
2024-05-10 20:50:28
851
原创 React路由
路由是根据不同的 url 地址展示不同的内容或页面。一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系注：exact 精确匹配 (Redirect 即使使用了exact, 外面还要嵌套Switch 来用)a new entry will not be added to the history stack,这个警告只有在hash 模式会出现。
2024-03-13 23:56:34
772
原创 React hooks
通过自定义 Hook，可以将组件逻辑提取到可重用的函数中，在 Hook 特性之前，React 中有两种流行的方式来共享组件之间的状态逻辑：render props和高阶组件，但此类解决方案会导致组件树的层级冗余等问题。而自定义Hook 的使用可以很好的解决此类问题创建自定义 Hook自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。});}, []);使用return (
2024-03-13 23:56:14
1025
1
原创 React生命周期
调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state。通过这个钩子修改的state，state任何时候都取决于props，其他的函数无法进行修改。在新的生命周期中，废弃了旧版本的3个带will的钩子，新提出了2个钩子。第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ，
2024-03-12 15:27:50
1341
原创 手写Object.create(),call函数,bind函数
在这段代码中，我们将原始函数存储在 that 变量中，然后返回一个新的函数。这个新函数在调用时将使用 apply 方法来调用原始函数，将 target 作为 this 值，并将预先传入的参数 args 与实际调用时传入的参数 innerArgs 进行合并。该函数的目的是在给定的对象 obj 上调用当前函数，并传递参数 args。在函数内部，首先将当前函数（即调用 _call 的函数）作为 obj 对象的属性 fn。语法调用 obj 对象的 fn 属性，并将参数 args 传递给该函数。最后，返回调用结果。
2024-03-11 16:19:55
605
原创 数组去重的方式
6.如果 obj.hasOwnProperty(typeof item + item) 返回 false，表示 obj 对象不包含当前元素，说明当前元素是新的，那么将其添加到 obj 对象中，并在 filter() 方法中返回 true，表示保留当前元素。5.如果 obj.hasOwnProperty(typeof item + item) 返回 true，表示 obj 对象已经包含了当前元素，说明当前元素是重复的，那么在 filter() 方法中返回 false，表示过滤掉当前元素。
2024-03-10 11:04:34
1020
原创 React基础
没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的。setState 是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数。
2024-03-09 08:51:59
2509
8
原创 ajax，axios，fetch
并不是所有的用户请求都提交给服务器。所以这里就和 Ajax 又很大不同了，一个是思想，一个是真实存在的 API，不过它们都是用来给网络请求服务的，我们一起来看看利用 Fetch 实现网络请求。416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段。417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求。Fetch 是一个 API，它是真实存在的，它是基于 promise 的。
2023-11-18 21:20:32
1060
原创 413 (Payload Too Large) 2023最新版解决方法
vue2脚手架2.在根目录下创建一个名为 vue.config.js 的文件（如果已存在，请打开该文件）。4.将 http://backend-server-url 替换为你实际的后端服务器地址。这样一个错误，查遍所有csdn，都没有找到解决方法，通过一些方式，终于解决了。博主在用vue脚手架开发的时候，在上传文件的接口中碰到。5.保存 vue.config.js 文件。最后博主成功解决，这个项目用的是。1.打开Vue项目的根目录。6.重新启动开发服务器。
2023-11-03 19:24:48
3145
2
原创 正则表达式
例如，我们希望从下面的输入字符串 $4.44 和 $10.88 中获得所有以 $ 字符开头的数字，我们将使用以下的正则表达式 (?一般来说 ^ 表示一个字符串的开头，但它用在一个方括号的开头的时候，它表示这个字符集是否定的。例如，表达式[^c]ar 匹配一个后面跟着ar的除了c的任意字符。方法并且匹配成功了，那么这些方法将返回一个数组并且更新相关的正则表达式对象的属性和预定义的正则表达式对象（详见下）。.是元字符中最简单的例子。例如表达式c.+t 匹配以首字母c开头以t结尾，中间跟着至少一个字符的字符串。
2023-10-19 11:39:09
622
5
原创 ECMAScript
of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。数组实例的find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。Array.from() 方法会接收一个类数组对象然后返回一个真正的数组实例，返回的数组可以调用数组的所有方法。
2023-09-16 21:15:26
165
原创 jQuery补充
什么是jQueryjQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities。
2023-09-14 11:37:46
140
原创 js其他方法
getDate() 返回月中的第几天（从 1 到 31）。getDay() 返回星期几（0-6）。getFullYear() 返回年份。getHours() 返回小时（从 0-23）。getMilliseconds() 返回毫秒（0-999）。getMinutes() 返回分钟（从 0-59）。getMonth() 返回月份（从 0-11）。getSeconds() 返回秒数（从 0-59）。getTime() 返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。
2023-09-14 11:32:38
100
原创 BOM操作
文章目录BOM事件页面加载调整窗口事件定时器停止计时器Location对象History对象Offsetleft获取元素偏移Offset与style的区别可视区client系列滚动scroll系列Mouseover和mousenter区别动画原理实现动画封装给不同对象添加定时器缓动动画原理多个位置间移动BOM事件页面加载调整窗口事件定时器停止计时器Location对象History对象Offsetleft获取元素偏移Offset与style的区别可视区clie
2023-09-14 11:08:05
621
原创 媒体查询技术
媒体查询（Media Query）是CSS3新语法。使用@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询。
2023-09-14 11:00:43
232
原创 CSS3基础
模块CSS3 被拆分为"模块"。旧规范已拆分成小块，还增加了新的。一些最重要 CSS3 模块如下：选择器盒模型背景和边框文字特效2D/3D转换动画多列布局用户界面。
2023-09-14 10:50:48
300
原创 vue Router从入门到精通
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码理解。
2023-09-06 21:35:05
462
8
原创 vue中解决ajax跨域问题（no “access-control-allow-origin”）
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）例如：本机是locahost：8080 要给locahost：5000发请求，那么配置的就是5000。跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。当请求的资源本机原本就存在时，就不会发送请求，如果解决这个问题，请看方式二。优点：可以配置多个代理，且可以灵活的控制请求是否走代理。缺点：不能配置多个代理，不能灵活的控制请求是否走代理。常见的跨域解决方法有。
2023-08-29 16:38:30
723
原创 Vuex从入门到精通
vuex是什么？官方给出的解释是：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。看完官方解释后，你可能对状态管理模式很疑惑，对于状态管理模式，官方给出了详细的解释。状态，驱动应用的数据源；视图，以声明方式将状态映射到视图；操作，响应在视图上的用户输入导致的状态变化。详细的视图演示如何理解这个图示呢？
2023-08-21 15:28:22
552
14
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人