- 博客(47)
- 收藏
- 关注
RSS订阅原创 动态布局方案，组件接口和插槽思想
本文介绍了一种基于插槽编程思想的动态布局方案。该方案通过组件注册表和布局配置表实现布局与组件的解耦，支持快速切换不同布局配置。核心优势包括：组件可替换性强、布局与业务逻辑分离、扩展性好、配置化程度高。方案采用Grid布局引擎实现，通过TypeScript接口定义组件规范，确保插槽组件适配性。虽然Grid布局存在某些场景的局限性，但通过抽象接口设计，未来可切换其他渲染引擎。文章提供了完整的代码示例，包括布局配置、引擎实现和视图层集成，为前端开发提供了一种灵活可扩展的动态布局思路。
2025-12-29 23:22:40
208
原创 报错问题Error: Unable to launch browser, error message: Could not find Chrome
摘要：部署puppeteer项目时遇到"Could not find Chrome"错误，原因是构建环境和部署环境分离导致chrome未正确安装。解决方案是：1) 添加puppeteer配置文件指定缓存目录到项目内；2) 代码中通过executablePath指定chrome路径；3) 确保配置文件随项目打包部署。后续还可能出现缺少系统依赖库的问题（如libatk），需使用包含chrome运行时依赖的node镜像。该问题反映了容器化部署中环境隔离带来的依赖管理挑战。
2025-11-27 00:00:17
282
原创 web前端用MVP模式搭建项目
MVP模式实现计数器应用 MVP架构模式将应用分为三层：Model负责数据管理（计数逻辑），View处理UI显示和交互，Presenter协调两者交互。在计数器实现中，Model通过事件通知数据变更，View订阅用户点击事件并渲染界面，Presenter作为中间人处理业务逻辑。这种分层设计实现了关注点分离，使各组件职责明确、易于维护和扩展。代码示例展示了如何通过TypeScript严格定义接口，确保类型安全的同时实现模块间的松耦合。
2025-07-16 23:46:41
1005
原创 学习react-router-v6 : useSearchParams、Outlet、Navigate
学习react-router-v6 : useSearchParams、Outlet、useOutletContext、Navigate、useNavigate。
2023-05-31 18:50:29
1257
原创 单页面应用访问服务，在本地也可以正确访问路由
这个express服务可以让我们访问路由的时候还是会返回html文件。你可以直接将你打包生成的项目放到根路径下，比如你打包后的文件夹是dist,那么可以放到这个项目的根路径进行访问。
2023-05-25 11:19:42
356
原创 react类组件的事件为什么需要绑定this？
这个问题其实在一年多以前吧，我就搞清楚了，结果已经很久没用react的类组件了，结果现在用了，发现自己忘了为什么要绑定，所以写一下这篇文章做笔记。在进行props传值的时候，你相当于就是把值赋给了那个props，上面的代码与下面的代码一样。每天进步一点点，过了一段时间，你就会发现你比之前提高了很多。也就说react执行函数的时候，就是执行函数。那么官方就提供了以下几种写法。每次组件重渲染时都会重新调用。，非严格模式指向全局对象。
2023-04-28 17:45:57
312
原创 前端从零开始写一个简单的响应式
写一个简单的响应式。不是vue的源码更多的是一个理解。首先需要遍历对象，为对象的每个属性设置setter和getter。function observer(obj) { const vm = {}; for (const prop in obj) { if (Object.hasOwnProperty.call(obj, prop)) { const dep = new Dep(); Object.defineProper
2023-04-04 15:32:56
540
原创 【JavaScript闭包】JavaScript何为闭包，浅谈闭包的形成和意义
红宝石书：闭包指的是那些引用了另一个函数作用域中变量的函数。mdn : 闭包（closure）是一个函数以及其捆绑的周边环境状态的引用的组合。闭包就是指有权访问另一个函数作用域中的变量的函数
2022-11-30 19:54:55
1150
原创 Vue3中router-view，keepAlive，transition嵌套使用
Vue3中router-view，keepAlive，transition嵌套使用
2022-09-22 08:59:25
1471
原创 【前端必会手写】call和apply方法
call和apply都是Function原型prototype上的方法。用于改变this指向。两者不同点在于传参。call需要传递散参，而apply需要传递一个参数数组。这两个方法相比bind有一个区别，在于这两个方法是直接调用的，而bind方法是返回一个函数，而这个函数的this指向是明确的。...
2022-08-24 12:26:45
581
原创 【Promise.allSettled】手写Promise.allSettled方法
Promise.allSettled是Promise对象的一个静态方法参数是一个可迭代对象，一般是一个Promise数组该Promise.allSettled()方法返回一个Promise对象，当所有给定的 promise对象都已经fulfilled或rejected后，返回的Promise对象能拿到一个对象数组，每个对象表示对应的 promise 结果数据以及状态。...
2022-08-04 21:55:13
1371
原创 【react ahooks 源码】useSetState、useMount、useUnmount
ahooks是一个封装了大量实用性高的自定义hook的库。学习这个库的一些源码，相信我们对react hook的使用会更加熟悉。
2022-07-24 19:12:24
5880
1
原创 Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
2022-07-07 19:19:45
8052
原创 手写Promise的finally方法
Promise的原型链上有一个finally方法了解一下这个方法Promise.resolve(1).finally(function () { console.log("无论已决状态如何，必定执行")}).then(data => { console.log(data); // 2})Promise.reject(2).finally(function () { console.log("无论已决状态如何，必定执行")}).catch(reason => {
2022-03-17 21:43:40
1588
原创 两栏布局，左侧固定，右侧自适应的几种方法
两栏布局，左侧固定，右侧自适应我总结了以下几种方法左侧固定 + 右侧margin左侧固定 + 父级padding左侧浮动 + 右侧BFC左侧浮动 + 右侧margin先两个在一行 + 右侧calc弹性布局DOM结构<div class="container"> <div class="left"></div> <div class="right"></div></div>初始样式<st
2022-03-17 21:23:36
1691
原创 手写instanceof
现在有一些面试题会让你手写这个instanceof首先要了解一下instanceof是什么它是一个运算符a instanceof B : a对象的原型链上有没有B构造函数的原型原型链又是一个什么样的情况呢？有这样一段代码，它的原型链情况是这样的function A() { }const a = new A();// a.__proto__ === A.prototype// A.prototype.__proto__ === Object.prototype// Object.prot
2022-03-17 18:04:02
1581
原创 JS中数组去重的几种方法
这道题面试题是经常考到的使用set进行去重function unique(arr) { // return [...new Set(arr)]; return Array.from(new Set(arr))}因为有几种方式道理都一样的 一样的情况我就在打在注释上了利用对象或Map进行去重function unique(arr) { // 利用对象或Map去重 const obj = {}; const result = []; arr.
2022-03-09 16:59:35
813
原创 数组排序之归并排序
将给定的数组一份为二对两部分数组再使用归并排序使其有序最后再将两部分数组合并// 归并排序的思想// 分而治之，直到两个数组有序，接着对两个有序数组进行合并function merge(arr, start, mid, end) { // 问题就变成对两个有序数组进行合并 let curIndex = start, // 当前归并项的索引 i = start, j = mid + 1; const tmpArr = arr.slic.
2022-03-07 17:41:38
794
原创 304状态码与浏览器缓存(强缓存与协商缓存)
浏览器缓存可以有效释放服务器的压力，还可以提高用户体验，提高Web应用的性能。浏览器缓存分为强制缓存和协商缓存。一般这两种都是一起使用的。
2022-03-05 09:53:43
4788
1
原创 浏览器存储(cookie、localStorage、sessionStorage)
浏览器存储(cookie、localStorage、sessionStorage)
2022-03-04 22:49:30
2062
原创 关于vue内置transition组件的动画类添加失效
今天在用vue的内置组件transition时出现了一丢丢的小BUG，出现动画类没有加上的问题。不过我看了控制台的DOM结构后就发现，加了appear时其实一开始是有动画类加到DOM上的。但为什么后来没有呢？先不着急，我们先来看一下。这个结构应该可以看的很明白。就是一个按钮和一个transition组件。我们都知道transition动画类的加上移除是通过监听根节点DOM的出现和消失实现的。那么清楚这一点就可以很明显地找到问题的解答方向一开始DOM不存在而是直接创建，又因为有appear所以动画
2022-01-27 10:29:04
2617
原创 vue2中单文件组件引入外部css，scoped失效导致样式全局污染
如果你在学习vue，相信一定对style标签的scoped属性很熟悉。使用scoped属性可以防止单文件组件的样式全局化造成样式污染。但有一个坑，外部引入的css,less,scss文件可能会出现scoped失效。我去看了一下，最终生成的样式文件并没有生成data-v-xxxxx来预防全局样式污染。解决方法通过style的src引入外部样式文件...
2022-01-22 10:45:15
1885
原创 理解JS高阶函数，动手写一个高阶函数
如果你正在学习 JavaScript，那么你应该见过高阶函数这个术语。 它虽然听起来很复杂，但其实并不难。使 JavaScript 适合函数式编程的原因是它接受高阶函数。高阶函数在 JavaScript 中广泛使用。 如果你已经用 JavaScript 编程了一段时间，你可能已经在不知不觉中用过它们了。高阶函数误区：高阶函数不是指参数有函数参数，然后返回值是函数的函数。我的理解：高阶函数指形参带有函数参数，并且这个高阶函数使用到了函数参数做一些事情，包括处理一些逻辑或者将其封装成另外一个函数返回。
2022-01-17 23:03:06
570
原创 [element ui 小坑]this.$refs.formDom.validate 的回调不执行
【时间宝贵可以看最后一句话】其实也不算小坑，今天就是用到了饿了么ui里form，然后进行表单校验validate 的时候就是回调不执行，我也试过promise，然后看了看文档，发现，艹。相信很多小伙伴都很多时候都会改饿了么ui的样式，然后呢，我就很不喜欢他那个表单的红色提示，于是我改了，但是表单验证还是用了但是呢，也仅仅是用来触发校验而已。所以validator第三个回调参数参数我压根没写，当然因为这个组件是我之前写的，所以改的时候总是忽略一些小问题。可能啊，我是说可能啊，有没有可能是你的valida
2022-01-11 11:20:46
1055
1
原创 Critical dependency: require function is used in a way in which dependencies
这个错误呢？去看一下我写的webpack的require.context 【详解，快乐前端攻城狮】
2021-11-06 11:51:27
2307
原创 webpack的require.context 【详解，快乐前端攻城狮】
webpack的require.context清楚了这点之后，我们来看一下，这个方法到底有什么用？其实这个方法就是用来实现自动化导入导出的。先看它的调用参数require.context(directory, useSubdirectories, regExp) 1. directory: 要查找的文件路径 2. useSubdirectories: 是否查找子目录 3. regExp: 要匹配文件的正则先来看一段代码const requireApi = require.con
2021-11-06 11:49:57
2508
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人