摘要: 功能描述 产品要求在h5页面实现集锚点、吸顶及滑动高亮为一体的功能,如下图展示的一样。当页面滑动时,内容区域对应的选项卡高亮。当点击选项卡时,内容区域自动滑动到选项卡正下方。 布局设计 css 布局 为了更清晰的描述各功能实现的方式,将页面布局进行了如下的拆分。 ★ 最外层的元素定义为 conten 阅读全文
posted @ 2024-04-14 20:34 一颗冰淇淋 阅读(261) 评论(0) 推荐(3) 编辑
摘要: npm 存在的问题 我们经常使用 npm 来管理 node 项目中的包,从 package.json 中读取配置将依赖下载到本地,以保障项目的正常运行。 当项目数量多时,这样的包管理方式会非常的占用电脑内存。由于每个项目都有属于自己的依赖,每个项目都需要安装,即使 npm 会对依赖进行缓存,但是每个 阅读全文
posted @ 2023-11-20 20:13 一颗冰淇淋 阅读(1234) 评论(2) 推荐(13) 编辑
摘要: 背景介绍 我们存在着大量在PC页面通过表格看数据业务场景,表格又分为两种,一种是 antd / fusion 这种基于 dom 元素的表格,另一种是通过 canvas 绘制的类似 excel 的表格。 基于 dom 的表格功能丰富较为美观,能实现多表头、合并单元格和各种自定义渲染(如表格中渲染图形 阅读全文
posted @ 2023-09-24 19:00 一颗冰淇淋 阅读(408) 评论(0) 推荐(3) 编辑
摘要: 随着需求的不断开发,前端项目不断膨胀,业务提出:你们的首页加载也太慢啦,我都需要7、8秒才能看到内容,于是乎主管就让我联合后端开启优化专项,目标是3s内展示完全首页的内容。 性能指标 开启优化时,我们要清晰的知道现状和目标,以及我们采用什么样的手段,通过检测什么指标来查看到优化的过程。 结果指标 根 阅读全文
posted @ 2023-09-10 21:00 一颗冰淇淋 阅读(4941) 评论(9) 推荐(21) 编辑
摘要: 因历史遗留原因,接手的项目没有代码提醒/格式化,包括 eslint、pretttier,也没有 commit 提交校验,如 husky、commitlint、stylelint,与其期待自己或者同事的代码写得完美无缺,不如通过一些工具来进行规范和约束。 ### eslint eslint 是一个代码 阅读全文
posted @ 2023-08-06 20:18 一颗冰淇淋 阅读(515) 评论(1) 推荐(1) 编辑
摘要: GIT 中提交对象非常的重要,我们通过它记录代码提交过程、进行文件保存、回退等操作,那么它是怎样帮助我们记录这些信息的呢?其实就是都保存在项目根目录的 .git 文件夹中。 新建空项目 ```gitDemo``` 使用 ```git init``` 初始化,在文件夹根目录下会生成 ```.git`` 阅读全文
posted @ 2023-06-24 20:53 一颗冰淇淋 阅读(53) 评论(0) 推荐(0) 编辑
摘要: 随着用户需求的增加,应用于页面的 css 代码越来越复杂越发臃肿难以维护,但是又没有 css 的替代品,css 预处理器作为 css 的扩展,出现在前端技术中。 sass 是 css 预处理器中常用的一种,它是一种动态样式语言,比 css 多些功能,如变量、嵌套、运算、混入、继承、指令、颜色处理、函 阅读全文
posted @ 2023-05-14 21:27 一颗冰淇淋 阅读(329) 评论(0) 推荐(0) 编辑
摘要: Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。 不过浏览器只能识别 CSS 语言,所以 Less 语言直接运行在浏览器端是不被识别的,需要我们通过一些方式将其先转成 CSS,再将 CSS 资源加 阅读全文
posted @ 2023-04-02 20:59 一颗冰淇淋 阅读(63) 评论(0) 推荐(0) 编辑
摘要: 在大型应用中, 我们可能会对其进行拆分,分成容器、主应用和多个子应用,使拆分后的应用独立开发与部署,更加容易维护。但无论是微应用、公共模块应用,都需要放到容器中才能使用。 如果多个应用之间希望资源共享,除了使用 npm 包的形式,基于Webpack 5 Module Federation(模块联邦) 阅读全文
posted @ 2023-03-26 20:16 一颗冰淇淋 阅读(418) 评论(0) 推荐(0) 编辑
摘要: 如果希望自己的代码更优雅、可维护性更高以及更简洁,往往离不开设计模式这一解决方案。 在JS设计模式中,最核心的思想:封装变化(将变与不变分离,确保变化的部分灵活,不变的部分稳定)。 单例模式 那么来说说第一个常见的设计模式:单例模式。 单例模式保证一个类仅有一个实例,并提供一个访问它的全局访问方式, 阅读全文
posted @ 2023-02-28 20:49 一颗冰淇淋 阅读(179) 评论(0) 推荐(0) 编辑