- 博客(133)
- 收藏
- 关注
RSS订阅
原创 JavaScript基础知识（二）
面向对象是一种编程思想，这种编程思想可以当做一个学科来研究。除了 JavaScript，例如 C++、Java、Python、PHP 等等编程语言都可以使用这种面向对象的编程思想来开发应用程序。DOM：是一套标准编程接口。我们通过 DOM 这套接口来操作HTML元素。
2023-10-23 20:25:11
444
原创 JavaScript基础知识（一）
函数是一个可执行的语句块（通过function关键字声明）。声明的时候不执行语句块，调用函数时执行。优点：声明之后可以反复调用，提高代码的复用能力。//声明函数 function fun() {//语句... } //调用函数 fun();六种数据类型中的一种，对象可以重新设置属性。属性的无序集合。// 创建一个对象 let cat = {name : "miaomiao" , //注意是逗号 age : 2 , };
2023-08-07 17:48:47
894
原创 移动端适配
移动端font-size的适配有的时候，我们在使用font-size和rem来给移动端做适配会遇到这样一个问题，年轻人把字体调小，老年人把字体调大，这样会让我们原本的适配失效，造成页面字体样式错位的问题，下面的方法会根据html的font-size与1px的倍率会页面重新进行适配。代码如下：(function (win, doc) { function createScaleElement() { let scaleDom = document.createElement('div')
2020-07-16 11:51:54
321
原创 vue中监听页面滚动位置
本文介绍了在Vue中监听页面滚动位置的方法。通过e.target.scrollTop获取页面滚动高度，当超过700像素时显示侧边栏导航。在mounted生命周期添加scroll事件监听，beforeDestroy时移除监听，以避免内存泄漏。核心代码包括滚动判断和事件管理两部分，实现页面滚动到指定位置展示侧边栏的功能。
2025-08-22 18:48:30
198
原创 vuex如何在js文件中使用
摘要 本文介绍了如何在.js文件中使用Vuex。通过导出Vuex store模块，在.js文件中直接导入并调用mutations方法，实现状态管理。代码示例展示了从vuex-store.js导出store，并在util.js中调用updateIsLogin mutation的过程。文章强调Vuex不仅限于.vue文件，也可灵活应用于.js文件，扩展了Vuex的使用场景。 关键词：Vuex、状态管理、mutations、JavaScript模块
2025-08-22 17:46:31
271
原创 在图片没有加载完成时设置默认图片
文章摘要：前端开发中，图片未加载时显示空白会影响用户体验。本文介绍两种设置默认图片的方法：1）使用img标签的placeholder属性直接指定默认图；2）通过onerror事件处理加载失败情况，动态替换为默认图。前者简洁但依赖浏览器支持，后者兼容性更好且支持复杂逻辑处理。根据实际需求选择适合的方案可有效改善页面加载体验。（149字）
2025-08-22 17:37:59
224
原创 最近开发PC端关于静态页面的一些心得与感悟
最近开发了一个比较大型的PC端官网项目，该项目UI设计较为复杂且要求还原度极高，开发好后在台式机显示一切正常，但是在较小尺寸的笔记本浏览时，页面样式发生溢出、错位、掉顶、图片模糊等问题。
2025-08-22 11:16:38
166
原创 vue中实现锚点定位
本文介绍了在Vue项目中实现锚点定位的解决方案。传统使用id和a标签的href方法会与路由的hash值冲突。推荐使用scrollIntoView()方法，它通过获取DOM元素并调用该方法实现平滑滚动定位，具有不改变URL、可设置缓冲效果等优点。该方法解决了Vue中锚点定位的常见问题，是更优的实现方案。
2025-08-11 11:08:50
235
转载 es6的Set 和 Map 数据结构
ES6的Set和Map是两种新的数据结构。Set类似于数组，但成员值唯一，可用来数组去重，提供add/delete/has/clear等操作方法，支持遍历和集合运算（并集、交集、差集）。Map是键值对集合，键可以是任意类型，提供set/get/has/delete等方法，支持遍历操作。两者都可通过扩展运算符转换为数组，在数据存储和操作上提供了更灵活的选择。
2025-08-04 11:56:35
72
转载 es6的Symbol
本文介绍了ES6引入的Symbol数据类型，它是一种表示唯一值的原始类型，用于解决对象属性名冲突问题。Symbol通过Symbol()函数生成，每个值都是独一无二的。它可以接受字符串参数作为描述，但不能与其他类型运算。Symbol值可用作对象属性名，但需用方括号而非点运算符访问。文章还讲解了如何通过description属性获取Symbol描述、使用Symbol消除魔术字符串，以及遍历Symbol属性的方法Object.getOwnPropertySymbols()。
2025-07-30 11:02:22
22
转载 es6对象的新增方法
ES6新增了Object.is()和Object.assign()方法。Object.is()解决了===运算符中NaN不等于自身和+0等于-0的问题，实现了"同值相等"比较。Object.assign()用于对象合并，将源对象可枚举属性复制到目标对象，特点是浅拷贝、同名属性替换、支持Symbol属性。主要用途包括为对象添加属性和方法、克隆对象等，但需要注意它对非对象参数的处理方式及浅拷贝带来的引用问题。这些方法为JavaScript对象操作提供了更强大的功能支持。
2025-07-28 18:07:25
45
转载 es6对象的扩展
ES6对象扩展主要包括：1）属性简洁表示法，允许直接写入变量和函数作为对象的属性和方法；2）属性名表达式，支持用表达式定义属性名；3）方法的name属性，可返回函数名或Symbol描述；4）属性的可枚举性控制，新增Object.assign()会忽略不可枚举属性。这些特性简化了对象操作，增强了代码可读性，其中属性简写和方法简写在模块输出和函数返回值中尤为实用。注意属性名表达式与简洁表示法不能混用，且对象作为属性名会自动转为字符串"[object Object]"。
2025-07-23 18:39:34
34
转载 es6数组的扩展
ES6扩展运算符（...）可以将数组展开为参数序列，主要用于函数调用，能够替代apply方法。它支持复制数组、合并数组（浅拷贝）、与解构赋值结合、转换字符串为数组等功能。扩展运算符要求对象必须实现Iterator接口，适用于数组、NodeList、Map、Set等可迭代对象，但不适用于普通类数组对象（需用Array.from转换）。使用需注意扩展运算符在函数调用时的特殊语法要求。
2025-07-18 17:39:32
37
转载 es6函数的扩展
尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下三种情况，都不属于尾调用// 情况一return y;// 情况二// 情况三g(x);上面代码中，情况一是调用函数g之后，还有赋值操作，所以不属于尾调用，即使语义完全一样。情况二也属于调用后还有操作，即使写在一行内。情况三等同于下面的代码。g(x);尾调用不一定出现在函数尾部，只要是最后一步。
2025-07-11 12:02:34
46
转载 es6新增运算符总结
ES6运算符扩展摘要 ES6新增了多项运算符扩展：1）指数运算符**用于幂运算，具有右结合性；2）链判断运算符?.简化深层属性访问，避免繁琐的空值检查；3）Null判断运算符??提供更严格的默认值设置，仅对null/undefined生效；4）逻辑赋值运算符||=、&&=、??=结合逻辑运算与赋值操作。这些新特性显著提升了代码简洁性和安全性，特别是?.和??配合使用能有效处理嵌套对象和默认值场景，而逻辑赋值运算符则简化了条件赋值写法。使用时需注意运算符优先级和特殊边界情况。
2025-07-02 18:25:46
45
转载 es6字符串、数值新增方法总结
ES6字符串与数值新增方法摘要 字符串新增方法： 判断方法：includes()、startsWith()、endsWith()用于检查字符串包含关系 重复方法：repeat()可重复字符串指定次数 填充方法：padStart()和padEnd()用于补全字符串长度 去空格方法：trimStart()和trimEnd()分别去除首尾空格 替换方法：replaceAll()可全局替换字符串 字符获取：at()支持正负索引获取指定位置字符 数值扩展： 数值分隔符：允许使用下划线(_)分隔数字，提高可读性，如1_
2025-07-02 18:11:37
49
原创 Vue中引入外部字体并使用
1.下载需要引入的字体包；2.创建一个新的资源目录 font 文件夹，将需要的字体放在该目录下并创建一个font.css；3.在 font.css 文件中引入想要的字体；4.在项目中全局引入写好的 font.css 文件；5.那么现在就可以在 vue 组件中随意使用引入的字体样式啦！
2025-06-25 15:35:15
1272
原创 用css实现文字字体颜色渐变
摘要： CSS3的background-clip属性配合渐变背景可实现文字颜色渐变效果。通过设置background-image为线性渐变（如从绿到白），并应用background-clip: text与-webkit-text-fill-color: transparent，使文字呈现从左到右的颜色过渡。代码简洁，兼容性需前缀支持，效果直观。
2025-06-25 11:43:21
497
原创 vant Dialog组件调用的坑
在做移动端项目时，需要完成一个带有倒计时按钮的弹窗，这就需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。Dialog 是一个函数，不是组件，因此不支持局部注册，正确的注册方法是 Vue.use(Dialog)，即使用全局引入的方式。
2025-04-23 18:53:10
441
转载 CSS 使用calc()获取当前可视屏幕高度
我们可以获得当前屏幕的视窗宽度，所以在css中，通过计算这个高度即可使得div的高度自动撑开到屏幕高度，而计算这个高度可以使用css3的。需要注意的是，该方法适用于网页高度等于当前屏幕视窗高度，按实际需求可能还是需要JS的。相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。先了解一下CSS3的相对长度单位。
2025-03-13 11:11:34
448
原创 截取一对中括号里面的内容
/ 小括号和中括号作为正则里的特殊字符，需要使用转义字符\)\)/g;// 小括号)\]/g;// 中括号// 下面这些括号，则不需要，不过加了也没关系)}/g;// 大花括号)）/g;// 中文小括号)】/g;// 中文中括号。
2025-03-10 10:29:19
197
原创 vue项目-img 标签的 error 事件
在做vue项目的时候，对img的src动态赋值后，还需要监听下 img 标签的 error 事件，如果这个图片不存在的场景下，需要设置为默认的。
2024-10-23 11:53:33
641
原创 解决页面刷新时白色闪屏问题
在浏览网页时，每次页面刷新都会有一段短暂的白屏，十分影响用户体验。其实有一个最简单的解决方法，就是直接把body元素的background-color直接设定为页面的主色调，我这里是黑色。这样处理完成后就没以后闪白屏的情况了
2024-09-26 17:41:14
692
原创 input输入框支持明文暗文切换
我们通常实现密码框的时候会直接使用 input ,设置它的 type 为 password，如果要实现明文和暗文的切换，实际上就是 type=“text” 和 type="password"的切换。
2024-03-14 11:29:09
727
转载 给伪元素(::before / ::after) 绑定点击事件
伪元素没有 dom 结构，所以无法直接绑定事件。可以利用事件捕获，把事件处理程序绑定到父元素上，再用css禁掉父元素的点击事件 (点击父元素无法再触发点击事件)，同时开启子元素的点击事件。
2024-01-18 11:34:23
1089
原创 关于对象数组的一些方法总结
很多时候，我们想要复制一个对象数组的值，如果使用 map()或者 lodash中的 _.clone()，会发现对于数组里面的JSON对象，指针还是相同的，改变原数组时，对该复制数组是有影响的。这时候可以使用{...obj}语法对数组里面的Json对象进行值的复制。
2023-09-27 18:23:38
564
转载 element ui - el-input 实现点击插入关键词功能
el-input文本框，通过点击下方关键词，在文本框中插入该词；光标移动到文本之间，再点击下方关键词，在光标的位置插入该词；插入关键词后，文本框获取焦点，并将光标的位置定位到关键词后点击按钮，在文本框指定位置插入该按钮的关键词。参考链接：输入文本框实现点击插入词功能。
2023-09-15 18:37:54
1113
原创 去掉number输入框末尾的箭头
在很多场景下，输入框是会被要求限制只能输入数字，不能输入文字或者符号的。通常我们会使用input事件 + 正则表达式 去实现这个功能，但今天提供另一种css的方法，将 type=”number” 的数字输入框去掉末尾的箭头，直接实现一个只能输入数字的输入框
2023-07-31 11:27:37
570
原创 element ui - el-table 设置表头背景颜色和字体颜色
但是对 thead，thead tr，.el-table__cell 元素进行设置，都是无效的，查询了 elementui官网，发现需要使用。在使用 elementui 中的 el-table 时，由于默认表格样式与设计稿不符，需要将表头的背景色和字体颜色设置为新颜色。
2023-06-21 17:15:01
8759
原创 一个非常好用的轻量的处理时间和日期库 - Day.js
Day.js 是一个轻量的处理时间和日期的 JavaScript 库。平时项目中笔者也常用dayjs，它确实很好用。Day.js有着几乎和Moment.js一样的API，因此如果你用过Moment.js，那么也可以轻松使用Day.js。本文将讲解项目中最常用的时间日期处理方法。此外，Moment.js目前维护升级不太明了，而Day.js始终在维护，并且Day.js只有2KB大小，比Moment.js小很多。我们一般在Vue项目中使用，当然实际它与你用什么框架无关。
2023-06-20 19:07:42
1464
原创 element ui - el-select 手动设置高度
当我们的页面想要手动设置 element ui 中 el-select 的高度时，如果只是通过设置 el-select 的 height 属性时，会发现调整无效。继续对 el-select 中的 input 元素 .el-input__inner 设置。会发现高度生效了，但是右侧的下拉框箭头移位了。如下提供一种可以调整。
2023-06-20 09:46:22
6548
1
原创 Vuex的使用
Vuex是 Vue 的共享状态管理，小型项目使用 store模式 即可，中大型项目需要使用 VueX。mapState, mapGetters ：写在computed中；mapMutations, mapActions ：写在methods中。state: 变量；getters: state的计算属性；mutations: 同步；actions: 异步。state: 如果在模块中定义，则为局部的state；getters: 如果在模块中定义，则为局部的getters；
2023-06-09 18:04:03
8324
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人