- 博客(30)
- 收藏
- 关注
原创 列表、表格滚动到底部加载数据方案
滚动加载是前端经常遇到的业务场景,主要是实现列表的加载,其实质跟分页没多大区别,如果不是特别要求,可以使用分页替代,综合性能和用途做以下几种方案。
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关注的人