Li_Ning21-CSDN博客

原创【发布订阅】从WeakMap和Map来看前端发布订阅者模式

【代码】【发布订阅】从WeakMap和Map来看前端发布订阅者模式。

2025-04-11 10:30:38 341

原创【js面试题】new操作做了什么？

prototype是函数都会有的一个属性（对象），它包含了通过这个构造函数创建的实例可以拥有的属性和方法，new对象时，新对象的__proto__（原型）会指向Animal（构造函数）的prototype

2025-04-10 19:18:40 436

原创记一次flex布局的问题，抬升底部浏览器，flex布局不跟随上升

后来查询代码，发现是flex：1；的外层div高度设置有误，应该设置的矮一些。浏览器底部抬升，滚动条没有及时展示，导致部分信息被隐藏。最后改为如下，就可以了。

2025-04-10 11:33:55 190

原创【qiankun】简易前端微应用搭建

一般场景是对已有应用进行改造，比如接入两个新的工程，但是工程不适合整体嵌入现有应用，那就以当前应用为基座，增加微应用路由，通过router-view，将子应用接入，且这种方式可以共用登录信息。

2025-04-07 16:57:18 354

原创【接口重复请求】axios通过AbortController解决页面切换过快，接口重复请求问题

AbortController是一个Web API，它提供了一个信号对象（AbortSignal），该对象可以用来取消与Fetch API相关的操作。在接口封装层按照如上进行，可以满足接口重复请求时，取消重复的操作。需要注意一点，config.data，从request层获取的是Object，但是从response层获取的是一个JSON化的String。处理网络请求时，我们经常会遇到需要中途取消请求的情况，比如用户在两个tab之间反复横跳的场景，如果每个接口都从头请求到结束，那必然会造成很大的服务压力。

2025-04-02 17:22:59 321

原创【indexedDB】以web端多语言存储为例

假设web项目中需要存储大量的缓存数据，通过sessionStorage和localStorage可能存在溢出，那么indexedDB就可以用用了，比如我们项目中存在多语言翻译，但是大量的翻译数据放到资源包内又不合适，需要后端接口请求的话又怕接口某次异常，导致系统bug。

2025-03-28 10:29:55 257

原创【js面试题】防抖、节流、节流（立马执行版）

系统讲解了关于防抖节流的简单实现，以及背后应用的闭包、this指向、apply方法等原理

2025-03-21 17:17:48 192

原创【vue3】实现pdf在线预览的几种方式

今天一天对当前可用的pdf预览插件做了测试，主要需求是只能预览不能下载，但对于前端来说，没有绝对的禁止，这里只罗列实现方式。目前采用vue3版本为：3.2.37。

2025-02-13 19:00:08 1384

原创【Docker】让前端也能用Docker部署，以ruoyi（若依）为例，极简部署流程

打包中，如果报错可以查看镜像源设置是否有误，大概率是类似failed to resolve source metadata for docker.io/library/node:16.19.1这种报错，其实就是国内镜像源失效，从docker hub拉取，但是受限网络导致失败。按照开文所述，我们其实是把ruoyi的静态资源跟nodejs，打包成一个完整的镜像(Image)，然后在容器(Container)中运行，保证所以拉取镜像的个体，都能顺利运行。，如果看到下图，就说明成功了。

2025-02-11 16:40:45 1523

原创【虚拟滚动】vue2 element el-table组件虚拟滚动效果

首先，虚拟滚动的场景是什么？项目中可能会遇到一些通用情况，它要求列表不能分页处理，也不能懒加载，必须一次性展示“所有数据”，且不能有过分的卡顿等问题。这次就以第二种情况来说明如何处理，接上一篇博客一文搞懂web端国际化方案（以vue2+elementUI为例，包含远程获取国际化）为了给多语言提供一个可供展示和修改的页面，前端自己实现了一个虚拟滚动且能修改多语言的页面。直接上代码：

2025-02-11 16:31:40 1027

原创一文搞懂web端国际化方案（以vue2+elementUI为例，包含远程获取国际化）

开发项目不可避免的有国际化需求，本文将从本地国际化，到elementUI国际化，以及远程国际化三个方向切入，完整实现一套多国语言web国际化方案，另外，最好有一个国际化录入界面，界面上可以直接输入保存，也可以导入导出，我们目前还没时间搞，等实现了再来同步。至此，我们基本实现了web端国际化方案。

2025-01-23 11:18:53 496

原创 vue3+uniapp开发鸿蒙初体验

至此我们就有一个鸿蒙项目了，windows或者其他问题可以参考官网。

2025-01-21 16:24:22 778 5

原创【echarts多y轴】通过接口获取参数后渲染echarts多y轴图

【代码】【echarts多y轴】通过接口获取参数后渲染echarts多y轴图。

2025-01-17 11:37:32 212

原创 el-col和el-row结合el-form,位置错乱问题

问题：明明el-col 都给了span 12的余量，但是总有一项自己独占一行。对el-row,进行简单样式设置即可。

2025-01-02 17:06:23 292

原创 css 实现在一条线上流动小物体（offset-path）

直接贴代码，留几个参考网址给大家。

2024-12-10 14:31:58 752

原创【vue2自定义指令】v-disabled 实现el-switch，el-button等elementUI禁用（disabled）效果

如果你搜过类似的功能，肯定看到过千篇一律的但是这个方案明显对el-switch，不起作用，所以我这边直接把方案贴出来，不想了解具体原理的可以拿着走人了。

2024-12-06 09:33:18 753

原创 vue2老项目改动态路由router.addRoute使用（vue2.6.14）

依旧是话不多说，直接上干货（整体参考若依思路）依赖项先摆出来为什么摆出来呢，因为踩过坑，较早版本的vue2是支持router.addRoutes的，我这个版本不支持，所以贴出来警示大家。确认好vue和vue-router的版本。

2024-12-05 19:19:13 672

原创 autocomplete=“off“不起作用，终极解决方案

最终采用隐藏一个password 输入框的方式，欺骗一下浏览器，让他把不展示的输入框自动填充，从而保证本来的input框不受影响。

2024-10-23 11:28:29 547

原创【react】开发常用hooks统计

react常用hooks

2024-10-08 19:08:56 1183

原创【前端模式设计】js订阅发布模式之我见

当函数被调用时，会将函数推入栈内存中，生成一个栈帧（Stack frame），栈帧可以理解为由函数的返回地址、参数和局部变量组成的一个块；然后用到的地方该监听的（on），该触发的(emit)，其实本质都是一个实例在处理自己的方法，且这个单例在内存中不会消失，因为有引用存在。总体来说，对象是存储在堆内存中，并在栈内存里有一个引用，我们其实是一直拿这个引用。在多数情况下，原始类型的数据储存在栈内存，而引用类型的数据（对象）则储存在堆内存。回到单例模式，单例模式其实就是创建了一个对象，他一直在堆内存中。

2024-08-15 16:51:32 405

原创【qiankun微前端】基座主应用（vue2）+多个微应用(任意框架)

前段时间对我们已有的工程进行了微前端改造，后来思考一下微前端的本质，查询了不少资料，从qiankun微前端示例中学到了不少。

2024-08-03 10:34:23 1377

原创【qiankun微前端】已有工程改造微前端

之所以采用微前端，是因为我们的工程有太多冗余第三方代码，因此为第三方用户开辟一个单独的工程势在必行，所以说微前端也是为了我们主体仓库代码的干净。最初接触微前端有种高大上的感觉，细细研究了一下，其实也不难，本文就不介绍iframe，single-spa之类的东西了，直奔主题。当前系统有横向一级顶部路由和竖向二级侧面路由，点击一级路由会触发二级路由的切换，从而实现两级路由的切换。

2024-07-23 16:14:08 379