- 博客(30)
- 收藏
- 关注
RSS订阅原创 列表、表格滚动到底部加载数据方案
滚动加载是前端经常遇到的业务场景，主要是实现列表的加载，其实质跟分页没多大区别，如果不是特别要求，可以使用分页替代，综合性能和用途做以下几种方案。
2023-05-06 11:00:47
947
原创 grid布局
但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。似乎一切进行得很顺利，但是某天 UI 来说，每个网格元素的长度可能不相同，这也简单，通过 span 关键字进行设置网格项目的跨度，grid-column-start: span 3，表示这个网格项目跨度为 3。利用这个特性，我们能够轻易实现一个等分响应式。
2022-11-30 15:41:24
650
原创 单行及多行折行显示省略号并出悬浮提示
2、react版（react版本涉及到很多第三方库调用，不可直接引用，但是具体的宽高判断逻辑和vue是一样的）
2022-11-07 16:22:01
575
原创 前端页面自适应设置
根据UI设计稿和设备尺寸的大小比例，动态计算并更改html根元素字体大小，页面使用rem单位自适应缩放。对于一些引入的库，例如swiper、antd carousel 中是不能转换的，只能转自定义的内容。要求： 1220 < 内容
2022-11-03 18:45:49
1032
原创 proxy与Object.defineProperty()对比
代理对象是用于定义基本操作的自定义行为（例如，属性查找，赋值，枚举，函数调用等），换句话说，我们可以说代理对象是我们的目标对象的包装器，我们可以在其中操纵其属性并阻止对它的直接访问，也就是不让你直接操作对象或者数组等，可以进行数据劫持（定义：在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果.数据劫持最典型的应用—双向的数据绑定）上面代码中，由于设置了存值函数set，任何不符合要求的age属性赋值，都会抛出一个错误，这是数据验证的一种实现方法。
2022-10-08 14:17:47
1152
原创 pnpm学习
之前对于多个项目的管理，我们一般都是使用多个 git 仓库，但 monorepo 的宗旨就是用一个 git 仓库来管理多个子项目，所有的子项目都存放在根目录的packages目录下，那么一个子项目就代表一个package。举个例子，比如 lodash 有 100 个文件，更新版本之后多了一个文件，那么磁盘当中并不会重新写入 101 个文件，而是保留原来的 100 个文件的 hardlink，仅仅写入那一个新增的文件。意思是定义pnpm的workspace空间，项目的多包文件入口是packages。
2022-10-08 14:10:02
10552
原创 js常用方法及写法思路整理
（1）数据、接口整合思维，能合并成一个数组或者接口的尽量合并，代码尽量使用高级一点的写法，不要让代码冗余；多种方案在脑中选择，最终选择从逻辑到代码最优的方案；一开始确定代码解构是否要写成父子结构，不必要的话，尽量不要写成父子结构，因为不利于传参事件联动（2）后端返回的数据结构是一维数组，类似于let resData=[ {a:'11',b:'11',level:'0'}, {a:'22',b:'22',level:'1'}, {a:'33',b:'33',level:'0'},
2022-03-30 14:39:51
785
原创 CSS样式整理
（1）百分比布局，要结合min-width使用，使用定宽的话会出现文字脱离盒子的情况（2）no选择器使用 div:not(:last-child){}（3）div默认一行的情况下，div默认跟随父级结构宽度，如果div暴露在最外层的div中，那么默认就是100%，在此情况下设置宽度跟随文字自适应，设置width:fit-content；但是一般情况下，一行有多个div或者其他元素情况下，宽度是自动自适应的（4）修改滚动条样式/*修改滚动条样式*/div::-webkit-scrollbar{
2022-03-30 14:26:47
84
原创 数组、对象、字符串常用方法整理
数组常用方法会修改原数组的方法：shift、unshift、pop、push、reverse、sort、splice不会修改原数组的方法：concat、join、slice、map、filter、some、every、includes、find、findIndex、reduce等（1）将一个字符串如“20190203”转化成“2019-02-03”？arr.slice(0,4)+'-'+arr.slice(4,6)+'-'+arr.slice(6)（2）将字符串如“2019/02/03”转化
2022-03-30 14:14:17
189
原创 typeScript基础
typeScript学习基础类型let isshow:boolean=falselet num:number=0let myname:string='aaa'let u:undefined=undefinedlet n:null=nullfunction fn():void{ //定义没有返回值的函数 alert('1111')} let someText:any='666' //变量可以为任意类型，当不定义类型时，自动设为anylet list: Array<numbe
2022-03-30 13:41:35
759
原创 offsetTop、getBoundingClientRect、scrollTop、scrollTo、scrollIntoView、offsetWidth、offsetHeight等js页面滚动操作
offsetTop、getBoundingClientRect获取元素距离参考系的距离1、offsetTop是获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置，offsetTop受父级定位的影响（relative、absolute、fixed定位都会影响），向上查找设置定位的父级元素，如果没有找到，直接查到body元素2、getBoundingClientRect是直接获取元素距离浏览器窗口可视区域的距离，不受定位的影响scrollTop、scrollTo、scro
2022-03-30 11:22:59
1085
原创 正则使用规则
正则使用规则//正则// const reg=new RegExp(/123/,'g')// ^ 表示匹配行首的文本// $ 表示匹配行尾的文本//大括号 表示量词 var reg = /^abc{3}$/; //c重复3次//中括号 var reg = /^[abc]$/; //a 可以b也可以 c也可以a||b||c，[^]括号内加^表示非[]内任何一个元素//小括号 表示优先级 var reg = /^(abc){3}/; //abc重复3次// 量词符 // *表示0至多个 /
2022-03-28 10:40:21
210
原创 lodash常用方法
lodash常用方法安装数组处理方法1、_.chunk(array, [size=1])2、_.drop(array, [n=1])3、_.dropRight(array, [n=1])4、_.fill(array, value, [start=0], [end=array.length])`（*会改变原始数组 array）`5、_.flatten(array)、_.flattenDeep(array)、_.flattenDepth(array, [depth=1])6、_.pull(array, valu
2022-03-28 10:38:30
1383
原创 position：sticky失效问题剖析
sticky失效原因position:sticky生效的原理position:sticky生效的原理在 W3 官方文档中的定义是：Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.通俗来说就是，Sticky 定位类似于相对定位relative，（当它表现为 fixed 定位
2022-03-10 16:17:48
10877
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人