- 博客(59)
- 收藏
- 关注
RSS订阅原创 前端甘特图组件开发（二）
基于甘特图组件开发（一）的内容，本篇将继续完善相关功能并修复之前遗留的问题。包括 ① 自定义时间轴功能 ② 数据交互处理逻辑预留 ③ 样式布局调整 等。
2022-11-28 11:01:47
1984
1
原创 前端甘特图组件开发（一）
工作中需要使用甘特图组件展示数据，故考虑自主开发一款基于Angular的甘特图组件以满足业务的需求。基本包含以下几项功能：① 根据数据自动渲染进度图；② 支持树形表格数据展示；③ 支持多层时间轴自定义；④ 支持数据增删改查。其余功能将在后续持续拓展完善。
2022-11-28 10:53:07
6826
原创 CSS伪类生效顺序
在开发过程中，css 中给元素设置了 :active ，即激活状态下的相关样式，但该样式效果并未生效。经过研究，是由于伪类的设置需要按照一定顺序才能生效。
2022-11-21 23:37:03
234
原创 JS元素拖拽过快失效问题
在对页面元素设置拖拽事件，使元素随鼠标进行移动的时候，若鼠标移动速度过快，会导致鼠标跑出元素外导致拖拽提前结束，本文旨在解决上述问题。
2022-11-20 20:32:05
2329
3
原创 SVG基础语法及使用
SVG（Scalable Vector Graphics可缩放矢量图）作为一种常见的图片格式，其可以直接通过代码描绘图像并添加交互效果，可以用任何文字处理工具打开SVG图像，且随时可以插入到html中通过浏览器进行查看。本文将对SVG图像的一些基本标签语法及使用方法进行介绍。
2022-11-20 16:40:54
1984
原创 JS 使用 new Date() 时间不一致问题
JS 使用 new Date() 创建时间时，根据传入的日期(不包含时分秒)字符串格式不同，创建的出的日期时间有部分不一致现象。本文根据本现象进行梳理，避免实际使用时发生意料外的结果。
2022-11-20 16:31:58
4322
原创 js判断数组回文的常用方法
在刷算法题时遇到需要判断数组是否回文，故考虑以下两种方法1. 通过数组的 reverse 方法进行翻转并比较（注意不能直接使用 reverse 方法，因为会改变原数组）arr.toString() == arr.toString().split('').reverse().join('')2. 双指针法 (性能较好)for(let i = 0, j = arr.length - 1; i < j; i++, j--) { if(arr[i] !== arr[j]) return fals
2022-01-24 15:42:58
868
原创 js 位运算符
位运算就是直接进行二进制运算。位运算属于低级的运算操作，因此相较于一般运算符速度最快。基本概念& 按位与若两个相应的二进制位都是1，则该位的结果为1，否则为0| 按位或若两个相应的二进制位有一个是1，则该位的结果为1，否则为0^ 按位异或若参加运算的两个二进制位值相同则为0，否则为1~ 取反用来对一个二进制数按位取反，将0变1,1变0<< 左移用来将一个数的各二进制位全部左移N位，右补0>> 右移用来将一个数的各二进制位全部右移N位，移到右端的低位
2022-01-24 11:04:12
575
原创 js数据结构-链表
概述链表存储有序元素集合，但链表中的元素在内存中并不连续设置。每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（也称指针或链接）组成。特点相较于数组数据结构，链表的好处在于添加或移除元素的时候无需移动其他元素。想访问链表中间的某个元素，需要从起点（表头）开始迭代链表直到找到所需元素。⭐️链表最后一个节点的下一个元素始终是 undefined 或 null操作0. 循环迭代链表直到目标位置getElementAt(index) { if(index >= 0 &&
2022-01-21 11:42:46
1496
原创 部署到 gitee pages 的静态页面更新后部分样式未刷新问题
原因是在重新提交文件并执行更新 gitee pages 操作后，协商缓存ETag和Last-Modified虽然会改变，但是强缓存Cache-Control仍然存在，且优先级更高，导致内容未发生改变。解决方案： ctrl+F5 强制刷新
2021-12-21 16:50:34
1088
8
原创 Vue项目 - css 使用 js 变量值
解决问题：组件中需要使用变量的值作为某元素的背景颜色，但 style 标签中无法直接使用变量值作为样式
2021-12-21 11:30:07
876
1
原创 MVVM 理解
MVVM ：Model-View-ViewModel是一种软件架构模式View视图 - 用户在屏幕上看到的结构、布局、外观Model模型 - 代表内容的数据访问层ViewModel视图模型 - 暴露公共属性和命令的视图的抽象Vue 中的 MVVMView 和 Model 没有直接联系，而是通过 ViewModel 进行交互核心：ViewModel，是一个 Vue 实例从 View 向 Model 方向，通过 DOM Listeners 检测页面的元素变化并更改 Model 中数据；
2021-12-08 16:49:39
385
原创 Webpack 知识点总结
Webpack 基础配置前置知识普通的 js 文件导入页面方法存在以下问题作用域问题文件大小问题可读性差的问题可维护性差的问题如何解决作用域问题：立即调用函数var result = (function () { const name = 'a' return name})()如何解决代码拆分问题Node.js commonjs:module.exports --> require如何让浏览器支持模块加载 require.jsES6exp
2021-12-06 17:20:52
612
原创 手写防抖节流
防抖：n 秒后执行该事件，若在 n 秒内被重复触发，则重新计时 (计时器归零)function debounce(fn, delay, triggleNow) { let timer = null // 处理一个函数，故需要返回一个函数 return function () { if (timer) clearTimeout(timer) // 立即执行防抖 if (triggleNow) { const firstClick = !timer
2021-12-02 20:29:23
60
原创 排序算法学习总结
冒泡排序思路：依次对所有元素中将相邻两个元素作比较，较大者置于后位。一轮结束后固定最后一位元素的位置重复进行以上操作 n - 1 轮(n为元素个数)，由于每轮交换会固定最后一位的位置，故每轮交换的次数为 n - 1 - i ( i 为当前轮数)const bubbleSort = function (arr) { for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length - 1 -
2021-12-02 12:24:26
194
原创 Vue 城市联动下拉选择组件实现
实现具备 省市区 三级联动选择功能的城市选择框。element-ui 中有相关组件，但该组件将三者统一在同一个 select 下拉选择框，使得数据双向绑定时还需要切分数据。故考虑根据实际开发情况封装该通用的联动下拉选择组件。
2021-11-30 17:36:55
2394
1
原创 JavaScript 基本/引用数据类型比较及检测方法
js中变量分为两大类：“基本数据类型” & “引用数据类型”基本数据类型包括Number 数值String 字符串Boolean 布尔NullUndefinedSynmbol (ES6)引用数据类型包括Object 对象Array 数组Function 函数DateRegExp 正则两种类型区别如下基本数据类型① 数据直接存储于栈中，可直接操作引用数据类型① 数据存储在堆中，并在栈中保存数据的引用地址② js 不能直接操作对象的内存空间 (堆内存)
2021-11-29 15:46:22
303
原创 Vue 项目 控制页面内 div 根据浏览器窗口大小自适应高度
做项目时遇到以下问题：在页面顶部、底部组件高度固定的情况下，如何实现中间内容区域盒子根据浏览器窗口大小自适应高度解决方案如下// 定义方法，获取浏览器窗口高度methods: { getDivHeight() { const screenheight = window.innerHeight this.$refs.mainDiv.style.height = screenheight - 704 + 'px' // 704 为 头部组件高度 + 底部组件高度 /
2021-11-27 11:18:22
3501
1
原创 Error in nextTick: “RangeError: Maximum call stack size exceeded“ 问题解决 (Vue项目)
在做 Vue 项目遇到标题所示问题，意思是 超出最大调用堆栈大小经检查代码发现出错原因为：组件命名错误，有两个组件使用了相同的 name 。修改后已恢复正常
2021-11-23 10:48:57
938
原创 为表格中 tr 添加 border 无效问题
在给表格中 添加 border 时发现并没有显示出来。tr{ border-bootom:1px solid #e5e5e5;}解决方式为给 table 标签添加如下样式：table { border-collapse: collapse;}border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。合并（collapsed ）模式下，表格中相邻单元格共享边框。分隔（separa
2021-11-22 15:04:50
1645
原创 解决Vue页面跳转保存滚动条位置问题
router/index.js 中添加如下配置const router = new VueRouter({ routes, // 解决页面跳转保存滚动条位置问题 scrollBehavior(to, from, savedPosition) { return { x: 0, y: 0 } },})
2021-11-19 17:12:01
932
1
原创 表单 submit 使用问题
若使用表单 form 中<input type="submit" class="submit" value="登录" @click.prevent="login" />需添加 .prevent 组织表单提交的默认行为，否则引起意料外的问题或者避免使用该标签
2021-11-19 16:57:05
596
原创 页面滚动到某个位置触发动画效果 -- 响应式页面
布局时需要用到 window.pageYOffset 判断滚动位置触发动画，但是页面采用响应式布局，高度无法通过 px 单位确定。现考虑如下方法getHeight() { const scrollTop = window.pageYOffset // 当 [窗口下沿滚动距离] 超过 [上一个模块底边与页面顶部距离] 时触发渐入动画 this.show = scrollTop + innerHeight > this.ToPageTop(this.$refs.sec3) + this.$
2021-11-19 14:20:36
2707
原创 css设置元素宽高比保持不变
代码如下(使用sass预处理器).section { width: 100%; &::before { content: ''; display: block; padding-top: 50%; }}思路：不设置高度，通过创建伪元素并设置padding撑开盒子，伪元素中百分比以原元素尺寸为基准...
2021-11-18 17:25:07
601
原创 三元表达式简写问题
this.fixed = scrollTop > 140 ? true : false遇到 eslint 报错如下error Unnecessary use of boolean literals in conditional expression no-unneeded-ternary即 “该情况下条件表达式中没必要写出布尔值”故可以简化如下this.fixed = scrollTop > 140...
2021-11-18 16:17:35
631
原创 手写 apply call bind
手写 bind 函数Function.prototype.myBind = function () { // 将参数转换为数组形式 const args = Array.prototype.slice.call(arguments) // 取出参数的第一项 const t = args.shift() // 确定 this const self = this return function () { return self.apply(t, args) }}
2021-11-18 12:04:12
78
原创 手写深拷贝
手写深拷贝function deepClone(obj = {}) { if (typeof obj !== 'object' || obj == null) { return obj } let result if (obj instanceof Array) { result = [] } else if (obj instanceof Object) { result = {} } for (let key in obj) { // 确认
2021-11-18 11:37:20
50
原创 js中parseInt超过16位失真问题
刷 LeetCode 算法题 66 过程中使用 parseInt 方法将字符串转化为数值，发现部分测试用例未通过。经检查发现问题在于：js中整型参数超过16位，会失真。反映到本题中体现为使用 parseInt 进行转换时超过16位的字符变成 0 。故本题不能采用数据类型转换方法求解。...
2021-11-18 10:18:20
671
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人