- 博客(42)
- 收藏
- 关注
RSS订阅原创 vue3 懒加载组件 + 自定义hooks
vue3 自定义hooks，组件封装。对未出现在屏幕内的模块元素，先不加载，等轮动进屏幕以后再，进行加载。**并不是针对文字或者图片，是针对整个组件，且支持用户自定义未进入视口组件的渲染内容和样式**
2025-01-12 16:31:49
965
原创 React + nestjs + Graphql 学习记录
最近学习了一下graphql，想结合之前的技术栈，React和nestjs来做了全栈的小demo，总觉得学习东西不做笔记或者记录，很容易就忘记，虽然做了笔记也很容易忘记，但至少到时候回头看的时候，方便复习吗？至于为啥是选择React，因为公司的技术栈是React，我个人也很喜欢jsx这种风格，hooks出来之后，写起来更爽了，纯纯的个人感情。而选nestjs的原因是相比其他的框架 （express和koa）来说，我觉得他的架构更完整一些，自带支持typescript和es6语法，如果要用express或者。
2023-02-07 14:59:12
1066
原创 封装 Antd Table 组件，提高开发效率，拒绝“搬砖”
通过我们的封装以后，我们使用这个组件的方式就变得简单很多啦，就如果出现一个页面有连续的多个表格的情况，我们也可以通过 配置一个对象来实现循环遍历，我自己的感觉就是代码量减少了特别多，以前一个组件一个文件的，一个页面有 5、6 个表格的时候，要创建 5、6 个文件，然后每个都写一遍，这不就是“搬砖”吗？复制来复制去，然后改改参数，如果你发现你的工作就像 “搬砖” 的话，你就要打开自己的思路，一定要想办法结束这种 “搬砖”的状态。工程师就是解决问题的，不要让自己成为问题。
2023-01-18 13:09:03
1840
原创 nestjs控制反转与依赖注入学习与思考
这是一种编程的思维方式，如果经历过一些比较复杂的项目，你可能就能体会到这种方式的好处，我们可以通过一些目录结构，归档分类的方式，让你很容易就找到需要修改的类，只关注修改对象本身。这还只是最简单的一层而已，假设项目大了，依赖多了，你也不清楚会有多少层嵌套，可能梳理这个嵌套逻辑都需要很长时间，这样的代码会比较难维护，不熟悉代码的人，很容易就漏改一些地方。所以，怎么管理我们组件的依赖，让依赖耦合性降低，也是我们作为开发者需要关心的问题，也不在于前端还是后端了对吧。两个类的耦合性就太高了，如果我的。
2023-01-06 01:35:52
731
原创 vite + vue3.x eslint 报错 `Parsing error: ‘＞‘ expected.`
选项之后，就莫名的出现这个问题。最后找到了终极解决方法，在。于是就搜索引擎转起来嘛，看到的答案基本就是。果然，又出现了另一个问题。创建完项目之后，就想添加个。真的是血压高呀，我之前很少用。身上，但是我也是选择了。的呀，怎么就不行了呢。
2022-12-16 14:59:40
5107
原创 nodeJS 写日志用writeFile还是appendFile
NodeJS还在强化中，感觉以前学的都很乱，直接上来就是Koa、Express这些框架，对NodeJs本身的了解还是很少的，只是一味的觉得不就是Javascript嘛，老子写了好几年了，是有点像，但是也不要被前端的思维框住了，不要带着前端的思维学习后端的知识。
2022-12-15 09:47:16
1023
1
原创 前端项目工程化流程（简陋版）
我们就规范了代码风格和git commit风格，像我们传统的react或者vue项目，不管是用脚手架创建的项目还是自己从 0 搭建的都是可以用这个流程去配置的。其实还有一个是项目的打包工具的选择和配置。对于怎么选择打包工具，这里有一个权威的网站，里面有介绍主流打包工具的优劣，可以帮助我们做选择。
2022-12-09 17:16:41
918
原创 Typescript 中根据某个字段判断其他字段是否必传
其实这个问题我也是问别人的，他们都说我搞那么麻烦干嘛，直接默认值不就搞定了吗？但是我总觉得多总结总结方法，可以在以后开发的时候，思路多一些，不会只握着手中仅有的知识，止步不前。多探索探索嘛，不然总觉得自己在搬砖，多回头看看以前写的代码，有机会的话，可以总结或者优化一些，这样就不会觉得自己整天都在干相同的事情啦。
2022-11-23 21:38:30
1630
1
原创 rollup 3.3 出现 import 错误 Cannot use import statement outside a module
我之前也有尝试用过 `rollup`，但是我没太注意版本号，就是记得之前在 `rollup.config.js` 的文件中是可以写 `es6` 的语法的，但是最近【2022年11月左右】我使用 `rollup` 的时候遇到一个问题，不能使用 `import` 语法了就是这个 `SyntaxError: Cannot use import statement outside a module`， 一个很常见的问题，一开始我以为是我写错，后来发现配置文件也没啥问题呀
2022-11-14 10:25:29
4184
3
原创 qiankunjs微前端父子应用间的通信
我也在网上找了很多资料，qiankunjs的文档总觉得有点简陋就这样！！！好像说了怎么做，又好像没说，有一些细节还是得自己实践过才知道。如果有想入手的小伙伴，可以自己动手尝试一下，如果你不是很熟悉的话，不要用vite，很打击信心，很会干扰你学习的进度。
2022-11-10 10:36:44
1613
原创 JS 中类型和奇葩操作总结
中一个数除以 0 不会报错，他肯定会”瞳孔地震“，不止不会报错，还有一个奇怪的现象，我觉得这个在开发中可能会遇到，我们总是拿后端提供的数据进行操作嘛，然而。做数据的运算真的是处处充满惊喜，我之前做财务系统的时候，都是数据操作，后端总觉得提供了数据，我前端自己操作一下就行了，然后我就踩了各种坑，兄弟们如果要用。类型判断的问题，就突然发现好像自己也没有自己去总结过这些知识点，都是零零散散的，看到一个记一个，忘记了就搜索引擎搜索一下。非他莫属，绝对最“奇葩”的一个类型，唯一一个“我不等于我自己”的类型。
2022-11-08 15:05:33
395
原创 nestjs更新数据库数据没法触发@BeforeUpdate和@AfterUpdate钩子
的时候，希望能触发统一的钩子去处理。最简单的场景就是在创建用户、登录和修改密码等操作的时候，希望能通过钩子统一给密码进行加盐处理。我前阵子开发的时候，就遇到这么一个问题，我明明更新了数据，数据库的数据也改变了，但就是不会触发。虽然这个问题很简单，但是开始的时候还是让我懵了一小阵子的，遇到了问题还是要多多总结，多分析，不能解决了问题也不知道为啥解决的就让他过去了，这样会浪费很多成长的机会的。的时候，有这么一种场景，我们在更新一个。的时候，它的原型上面才挂有这个方法。里头的方法，密码还是明文的。
2022-11-04 11:47:38
862
1
原创 实现create-react-app react-scripts中的 start 和 build 命令
只要把webpack的配置信息配置好了，其他的就交给webpack的complier打包就行了，更多的可能就是要做交互的信息提示，以及异常处理而已
2022-08-19 10:30:51
2744
原创 react 组件懒加载
可能这样实现的方式有很多，也有虚拟列表什么之类的方式，经过我的一番研究，我发现一个还不错的方法，不需要借助第三方库就能实现。，其实很新闻的列表有点像，只不过我们这个没有分页处理。处理方案：未出现在屏幕内的模块元素，先不加载，等轮动进屏幕以后再，进行加载。......
2022-08-15 10:40:17
1624
4
原创 实现create-react-app packages 中的 create-react-app
从执行步骤上来看，基本就是这 5 步了init: 命令行参数解析createApp：做一些路径上的处理 和文件的写入，把参数给到run：给install和做参数处理install：安装相关依赖：执行node代码。
2022-08-12 10:57:29
350
原创 React 中闭包陷阱问题分析
useState返回的list是基于basestate计算出来的，并且由于闭包的存在，每个「数字按钮」add函数中的list都不同有个问题得说明一下，这并不是React框架的问题，这是JavaScript闭包的特点，而useState是基于basestate更新的，所以就会显示出一种和我们预期不太一样的结果。httpshttpshttpshttps。...
2022-07-22 10:41:47
1228
原创 TypeScript中的枚举和普通对象的区别
后来我思考了一阵子，我感觉是自己对TypeScript的理解还只是JavaScript的另一种写法，随便加个类型就行，不行就any，没有从JavaScript的思维中走出来。从枚举这个问题上来看，如果用对象的话，这就是一个潜在的问题，而且你可能永远都不会发现，但是用TypeScipt的话，你可以避免这种问题的发生，他避免得你甚至都毫无察觉。对日常中的代码还是要多一些思考，细心一点，我相信没有学不到东西的岗位，只有不够细心的“打工人”......
2022-07-15 11:13:51
2528
1
原创 设计模式：工厂模式
JQuery 的实现文件路径：思路： 通过不同的选择器类型，创建有不同属性的实例对象代码实现：工厂模式与策略模式的区别不知道大家在刚开始学习的时候，有没有这种感觉，如果是通过不同的参数创建有不同属性的对象，那和 是不是有点像。比如经典的计算年终奖代码：区别用途不一样关注点不一样解决不同的问题经过一段时间的学习以后，公司主要用的技术栈是 + ，我也遇到了觉得可以用上的场景，学以致用才能记住嘛，跟大家分享一下。通过不同的类型，创建具有不同属性的 组件。从不太严格的角度上来看，
2022-07-13 16:33:32
331
原创 自己实现 webpack-shebang-plugin 插件
webpack 调试方式webpack Compiler 和 Compilation 的区别webpack 自定义插件
2022-06-18 11:12:17
270
原创 Golang - 82. 删除排序链表中的重复元素 II
题目描述详情可以查看题目链接解题思路整体思路1.1. 创建虚拟头节点和两个一前(pre)一后(cur)的指针1.2. cur 每走一步都判断 pre 的值是否和 next 的值相同1.3. 如果相同，就一直往后走，知道不相同1.4: 执行删除操作图解然后循环执行上图流程，直至 cur 或者 cur.Next 为空，表示链表遍历完成代码实现/** * Definition for singly-linked list. * type ListNode struct {
2021-10-12 16:32:03
185
原创 Go - leetcode-61.旋转链表
问题描述具体问题描述请看 leetcode解题思路整体思路1.1. 把链表变成环状链表1.2. 然后旋转到指定位置1.3. 重新设置头指针1.4. 最后断开环图解2.1：第一步2.2 第二步2.3 第三步代码实现func rotateRight(head *ListNode, k int) *ListNode { // 如果是空链表直接返回 if head == nil { return head } // 复制头指针 cur
2021-10-11 16:38:35
180
原创 浅谈JavaScript垃圾回收
今天主要是想聊聊JavaScript 的内存是怎么管理的，以及 Chrome 浏览器又是如何进行垃圾回收的？JavaScript 的内存管理不管是什么样的计算机程序语言，运行在对应的代码引擎上，对应的使用内存过程大致逻辑是一样的，可以分为这三个步骤：分配你所需要的系统内存空间；使用分配到的内存进行读或者写等操作；不需要使用内存时，将其空间释放或者归还。与其他需要手动管理内存的语言不太一样的地方是，在 JavaScript 中，当我们创建变量（对象，字符串等）的时候，系统会自动给对象分配对应的
2021-05-04 00:10:54
216
原创 浅谈React-Hooks 工作机制
Hooks对于 React Hooks 相信很多小伙伴都是在熟悉不过了，不管你会不会用，你肯定都已经听过了,我后端的朋友的知道了。官方对 Hooks 的介绍也是非常的简洁Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.就是在 React 16.8 之后才有的，可以在不用class的情况下，使用 state 等其他 React
2021-05-02 01:45:47
446
原创 V8工作原理：V8是如何执行一段JavaScript代码的？
要理解 V8 的工作原理，你需要搞清楚一些概念和原理，比如接下来我们会从编译器（Compiler）、解释器（Interpreter）、抽象语法树（AST）、字节码（Bytecode）、即时编译器（JIT）概念来解释V8 是怎么工作的、如何执行JavaSCript的编译器（Compiler）和解释器（Interpreter）之所以存在编译器和解释器，是因为机器不能直接理解我们所写的代码，所以在执行程序之前，需要将我们所写的代码“翻译”成机器能读懂的机器语言。按语言的执行流程，可以把语言划分为编译型语言和解
2021-03-23 15:12:53
1277
2
原创 HTML、CSS、JavaScript是怎么变成页面的
我们编写好 HTML、CSS、JavaScript 等文件，经过浏览器就会显示出漂亮的页面，但是你知道它们是如何转化成页面的吗？这背后的原理你知道多少呢？我们都知道 HTML 的内容是由标签和文本组成（如：<p>hello world</p>， p 是标签，“hello world” 是文本）。每个标签都有它自己的语意，浏览器会根据标签的语意来正确展示 HTML 内容。而 CSS 则是让页面变得好看的关键；而 JavaScript 则是我们和网页进行交互的核心。由于渲染机制过于复杂
2021-03-22 22:17:29
324
原创 从源码中看 React 中 setState 是异步还是同步？
相信很多小伙伴面试的时候，都经历过这么一个很是 “无聊” 的问题？但是，也没办法，就是很多面试官在面试的时候喜欢问。为什么说这个问题很无聊呢？因为我们在实际的开发中，根本就可以不用依赖这个特性，不需要管他是异步执行还是同步执行的。因为在如果你需要获取更新后的值，React 本来就提供了方法给开发者去获取。 Class Component 中，我们可以在生命周期 ComponentDidUpdate 中获取到更新后的值，而对于 Functional Component，我们也可以在 useEffect 的回调
2021-03-14 02:20:04
275
2
原创 微信小程序运行机制解析
在微信小程序诞生之前，最流行的技术应该是Hybrid 混合开发。Hybrid 混合开发有两个优势，一是开平台，二是热更新。而微信小程序就更像是运行在微信这个特定环境下的 Hybrid 技术。接下来从四个方面聊一聊小程序的运行机制，看一看，小程序相比Hybrid又有哪些创新点。相信做过微信小程序开发的小伙伴都知道，微信有一个自己开发的语言 wxs。那我们也不妨思考一下这么一个问题，既然 JavaScript 是小程序的主要开发语言，为什么微信小程序还要自己在创造一个语言呢？一、小程序的启动机制小程序启
2021-03-09 23:44:53
3071
8
原创 React中函数组件与类组件
与React类组件相比，React函数式组件究竟有何不同呢？之前听到最典型的回答就是：类组件提供了更多特性（如：State）。当然随着 hooks 出现，事实早非如此举个例子相信很多人都看过一个非常经典的例子：这是 react 函数组件的实现function ProfilePage(props) { const showMessage = () => { alert('您已成功关注' + props.user); };// 用setTimeout 模拟网络请求 const
2020-12-16 16:43:20
1335
原创 浅谈JavaScript中的异步运行机制
问题描述不知道大家在看面试题的时候，是不是会经常看到一写问你打印顺序的题。类似下面这种setTimeout(() => { console.log('1')}, 0)console.log('2');new Promise((resolve) => { console.log('3'); resolve()}).then(() => { console.log('4');}).then(()=>{ console.log('5')
2020-12-16 11:53:54
230
原创 JS 数组组合
最近遇到一个需求, 需要把嵌套数组中弄成一个组合的一维数组, 搞得我脑壳疼顺便记录一下const arr = [['a', 'b'], ['d', 'e', 'f'], ['g', 'h'] ]const results = [];const result = [];doExchange(arr, 0);function doExchange(arr, index) { for (var i = 0; i < arr[index].length; i++) { result[
2020-05-18 10:20:17
375
原创 vux组件中Scroller ios13上出现的问题 滑动的时候总是会莫名其妙的弹回顶部
最近在项目上遇到了一个很恶心的问题，就是项目在ios 13的苹果手机上，滑动的时候总是会莫名其妙的弹回顶部。因为是维护之前的项目，这个项目之前也不是我写的，也不清楚当时那位老哥是为何非要使用已经停止维护的vux 的Scroller。刚开始面对这个问题我也是很茫然，因为在开发的时候用浏览器测试时是完全没有这个问题，加上我手机之前也没有升级到ios 13，所以也是没有发现到这个问题。发现了以后，我...
2019-11-02 16:19:52
1699
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人