- 博客(60)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 【electron】打包报错webpack/electron/sqlite3/node-pre-pyg代码被打包进主线程js文件
【代码】【electron】打包报错webpack/electron/sqlite3/node-pre-pyg代码被打包进主线程js文件。
2024-04-18 18:56:02
86
原创 js Class的概念及其应用场景
含义：类是用来创建对象的模板。JS和其他语言不同，它是没有Class的，它本质就是JS的构造函数封装的语法糖。ES6提供一种更为清晰的方式来遵循面向对象的编程方式。
2024-03-31 16:00:49
888
原创 从输入url到页面展示的过程
唠唠叨：我不想误人子弟，我这篇算是搬运工，加上自己的理解做点总结，所以还请大家科学上网去看这篇：https://aws.amazon.com/cn/blogs/mobile/what-happens-when-you-type-a-url-into-your-browser/
2024-03-30 21:54:17
1114
原创 ts的interface和type区别
interface：多个 同名的 interface 却是可以通过这种形式合并，但是定义的属性名冲突也会报错。type 可以定义任何类型，不仅仅是对象类型，也可以定义基本类型、联合类型、交叉类型等。type 可以定义类型别名，它们可以使用 & 运算符合并多个类型，生成一个新的类型。骚操作将 type 和 interface 混合使用，竟然真的可以😂。用 type 定义一个心的类型别名，然后用这个别名来定义一个对象。type： 定义多个相同的type名就会直接爆红，页面也会报错。
2024-03-16 20:15:41
360
原创 react和vue对比
但是还算是最了解react吧，当初从react class 向 react hooks转型的时候，就是因为我看到来react官网上的一个将class编程和hooks编程的相同功能代码做了对比，而hooks的代码量显然少了将近一半儿，可读性强，维护友好，重用性高。我认为 vue3 更准确的来说，不是严格意义上的hook形式，而是Composition API，除一些生态圈的变化外，vue3与react hooks相比来说，react hooks几乎所有的方法都是基于钩子进行开发的。
2024-03-12 16:57:59
381
原创 react批量引入svg图标
PS：也不只在react中用，其他框架也可，生态圈不一样配置会不同，但是能提供整体的思路，可以参考。注：我之所以能直接使用@去默认引入src下的所有文件，是因为我在typescript中配置path。在批量引入之前，我们需要安装一个包并配置到typescri.json文件中。在src文件下新建一个icon文件，然后新建一个.tsx文件。注：这块代码可直接copy走。批量引入处理并导出封装组件。
2024-03-11 20:37:49
611
原创 js实现复制文本图片等功能
实现右击复制页面渲染好的html标签内容，网上看了很多文章都不适用，感觉有些乱七八糟的看不懂，有些文章已经过时了，我本来也是想去用这种方法的：document.execCommand()，但已经废弃了，我还要兼容客户端的，不过这个复制文本不管是剪贴还是复制都差不多类似，所以就灵活运用场景了。（就是文本类型，别被名词劝退了）
2023-05-29 20:46:53
764
原创 使用for…in遍历数组的坑
in的遍历顺序是枚举顺序，对于数组而言，规范并没有约束各浏览器的实现。因此即便在一定范围内是按顺序遍历的，也应该尽量不依赖for…此外，因为有稀疏数组的存在，其实JS里的数组不一定是顺序结构存储的。in是用来循环Object的，但是Array也是继承于Object，所以也能使用for…in遍历出属性，但是会出现几个坑。in适合来遍历对象，而遍历数组还是去用forEach，for…细节三：遍历顺序是对象属性的枚举顺序，并不一定按数组的下标顺序遍历。遍历出来的是枚举属性，包括自身属性以及原型链上的属性。
2023-04-16 15:56:06
337
原创 for…of的注意点
避免了for in的所有缺点，可以使用break,continue和return，不仅支持数组的遍历，还可以遍历类似数组的对象。of的遍历可以是Array、Map、Set、Arguments。关键_chatList是一个数组，必须的配合entries方法使用。of遍历对象就会报错，所以for…
2023-04-16 15:53:07
105
原创 js原型和原型链到底是什么
它出现的目的就是为了实现构造函数中的数据共享，防止资源浪费，所以才会为构造函数设置一个Prototype属性，把所有实例的对象共享为一个prototype对象，prototype好像是实例的原型，而实例对象好像继承了prototype。总结：由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样。一说原型有太多的总结，把我都给劝退了，太多所谓的名词：constructor |
2023-03-09 14:20:51
371
原创 mac 使用Tabby工具配置打包环境
Tabby是一个跨平台的终端(Terminal)，支持Local，SSH，Telnet，Serial连接。平时用到最多的就是SSH，如果没有或很少有SS远程连接的需求，或者可以通过ssh命令行直连远程主机，日常完全可以用Windows Terminal。公司跳板机地址：http://xxx.xx.xxx.xxx:8080/ui/#/command。这个样子就完成了，剩下的命令就和在window上的xshell一样的命令使用了。然后我本来是基于官网上这样子的连接成功重新去配置了一个ssh。
2023-02-22 19:51:19
614
原创 error in ./node_modules/swagger-ui-react/swagger-ui.js
后端提示： ERROR Failed to compile with 1 errors 12:29:51 PM error in ./node_modules/swagger-ui-react/swagger-ui.jsModule not found: Error: Can't resolve 'btoa' in '/home/ubuntu/adp/myapp/node_modul
2022-05-31 09:28:56
1093
原创 react使用leaflet的项目总结和优化
注意：我这里是当下不超过600个标记点，所以我这里是一次性渲染出来进行优化的，如果数据大于2000条甚至更大的时候，需要用其他的优化方法，而不是这样一次性全部渲染出来这些所有标记点的数据。需求： 在首页的地图内，增加一个一个的marker来进行展示echarts，效果如下图，地图用的是leaflet，图表用的是echarts在开发中，我遇到两个比较大的问题第一个：图表一直加载的问题，因为当我点击不同的图表时会显示不同的图表详情，那我地图上的所有图表都再次进行循环渲染，然后实现页面完整的展示，可
2022-04-25 10:32:03
939
原创 好奇：useEffect和useLayoutEffect的区别
useLayoutEffect 和 useEffect 是一样的，只是两个 hook 执行的时机不同。上面说了 useLayoutEffect 是在 DOM 变更之后同步调用 effect（就是传入到useLayoutEffect中的函数）,所以 useLayoutEffect 会比 useEffect 执行得早一些。注意：1、会在react渲染完之前执行 所以会比useEffect钩子执行会晚（此时dom也已经被渲染出来了）2、会阻塞渲染，除非要操作dom 否则不推荐使用这个钩子DOM 变更之后
2022-04-25 10:26:04
1750
原创 useCallback和useMemo的区别
useCallback的使用方式在这里就不重复描述了，（注：可以看这篇文章：https://blog.csdn.net/rock_23/article/details/121410694）useMemo的使用import { useState, useMemo } from 'react'import { Button } from 'antd'const Home: React.FC = () => { const [ count, setCount ] = useState<.
2022-04-25 10:24:56
368
原创 useCallback的使用
useCallback是用来帮忙缓存函数的，当依赖项没有发生变化时，返回缓存的指针，而props涉及到复杂对象类型都是通过指针来传递到。多用于回调函数，在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染的子组件是非常有用的。代码示例：父组件:import { useEffect, useState, useCallback } from 'react'import { Space, Table, Tag, Button } from 'antd'impor
2022-04-25 10:22:09
1909
原创 useReducer的使用总结
useReducer：第一个参数reducer和redux的reducer是一样的。第二个参数的initialArg是初始值的意思。第三个参数int是重置的意思自我理解：我感觉这个钩子是和context差不多的效果，但是它比context传递的组件更深。也是为了解决我们在组件中一层一层去传参办法。使用示例：const initialState = {count: 0};function reducer(state, action) { switch (action.type) {.
2021-11-18 21:29:59
525
原创 useimprerativeHandle的使用
这个钩子让我想起来了vue中的有一个自定义指令的钩子方法，有点类似，只是不同的是，react中是在单个组件内，在一些使用场景上会受限，但是也刚好满足所需，而在vue中它既有全局的，也有内部的。使用示例：父组件：import ImperativeHandle from "./component/ImperativeHandle"import React from 'react'import { Button } from 'antd'const Home: React.FC = (props,.
2021-11-18 21:28:32
1349
原创 useDebugValue和自定义hook的使用
useDebugValue的定义：useDebugValue用于自定义hook标签组件内的。自定义hook的定义：本质上就是一种函数代码逻辑的抽取，它本身并不算react的特性。自定义hook是一个函数，其名称以“use”开头，函数内部可以调用其他的hook。（实际上就是相当于一个函数，只是叫法不同，意义的理解也就有所不同）知识延伸：自定义hook和高阶组件的区别：自定义hook相当于把公共方法共享，而高阶相当于传入一个组件当作参数传入，再返回一个新的组件。自定义Hook示例：import
2021-11-18 21:26:16
1066
1
原创 leaflet的使用总结
各位博友，这篇是针对自己的项目中的产品需求所做的总结，你们可以根据自己项目进行其他的资料查询，只能说有些部分的用法是差不多的，可根据这篇博客来寻找一些leaflet的使用使用灵感。需求说明：安装：npm install react react-dom leafletnpm install react-leafletnpm install @supermap/iclient-leafletnpm install leaflet-heatmapnpm install proj4npm insta
2021-09-20 11:38:49
527
原创 Form.List使用总结
使用Form.List是因为我的项目中涉及到一个两个单选按钮，当点击来自定义单选按钮就显示input框的问题，我当时最初没有选择用Form.List遇到了各种各样的坑，造成了很大时间上的浪费，初次用Form.List虽然会有点抵抗，但是却解决我的代码洁癖，写完感觉我的代码是非常整洁的。使用：注：一下是省略写法，主要是用来总结Form.List的使用，具体操作还是要看项目的需求const users = [ { name:'min', label: '小刚', }, { name:
2021-08-29 13:37:08
4587
原创 umi+antdpro如何修改左上角的图标
这个有两处要修改：第一处：项目文件中的config/defaultSettings.ts文件删除logo第二处：项目文件中的src/app.tsx注：因项目的不同所以文件的后缀会有些不同。
2021-08-21 15:31:28
2296
2
原创 antd设置select支持输入和选择功能
这是我封装的一个select代码，直接拿过去就可以用了import React from 'react'import { Select } from 'antd';import { UserOutlined } from '@ant-design/icons';const { Option } = Select;export interface SelectProps { value: string; setSearchOpt: any[]; onChangeHandl: (val
2021-08-21 15:21:55
4754
2
原创 vue实现pdf预览功能总结
总结：最初我是用了vue-pdf这个直接进行安装并进行使用的，可是并不适用我的项目，而且用户体验不好，最主要的是出现空白页，这只能完成简单的静态预览打印功能，让我觉得内心总觉得那里不满足。所以我干脆换了一种iframe的使用预览方式，这个方法简直太爽了，可以预览，在预览中生成目录，跳页翻页还有预览小框点击跳转页面，下载，打印，放大缩小并且还清晰展示，这些都可以满足！！！简单的预览功能请使用vue-pdfnpm install --save vue-pdf这里就不细描述了，具体看官网http
2021-05-29 11:34:51
1455
1
原创 docx插件的使用
简介： docx是用于前端自己去渲染word的使用，这是根据项目无法固定word内容，如果有用到这个插件，我的笔记无法达到所需还请去参考官网，再次补充下：我所做的笔记可能会有问题或者不够深入，也希望用此插件的用户进行补充和指导。在此非常感谢！new Document() // 创建一个文档，里面可以设置文档的样式，文档的作者、标题、描述等import { Document} from "docx"所有的样式都是在new Document中创建的import { AlignmentType,
2021-03-27 12:04:24
2991
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人