- 博客(143)
- 资源 (8)
- 收藏
- 关注
RSS订阅原创 为什么javascript设计为单线程？它又是如何解决单线程带来的问题的？
为什么javascript设计为单线程？我觉得这和它的应用场景有关。这门语言最初的设计目的就是运行在浏览器上，用于处理DOM等工作，那么为了避免多个线程同时操作一个DOM之类的问题发生，单线程不失为一个良策。我觉得这也是设计者将javascript设计为单线程语言的一个很重要的原因。虽然可以通过锁来解决上面的问题。但是这会因为引入了锁而为语言带来更大的复杂性。单线程为javascript保证了执行顺序，也为javascript带来了一些问题，如阻塞问题，效率问题等。阻塞问题javascript设计者的应对方
2022-12-07 15:01:25
644
1
原创 Object.assign()解决vue2中对象新增属性不是响应式问题的原理
将源对象和要加入属性的对象合并为一个新的对象赋值给要响应式的对象（源对象），vue会将源对象重新触发一遍Object.defineProperty依赖收集。
2022-12-07 10:11:43
1869
原创 js实现将多个svg转为一个canvas，并将该canvas转为图片
需求：如下图表，小提琴图和右侧的图例是两个svg实现的，现在需要将这个图表转为图片，并可下载。获得一张图片，包含上图所有内容。
2022-10-27 14:34:10
1743
1
原创 数据可视化中图表的意义及其与数据的关系
对数据可视化时常用的图表进行简要概述，让读者明白每个图表适用于展示什么数据，什么类型的数据适合使用哪些图表进行数据展示。
2022-07-22 16:55:12
3045
原创 Element-plus中el-image组件图片预览功能顺序校正
我想实现点击哪个图片就预览哪个图片，而不是官方示例中通过指定哪一张图片为第一张。通常我们的图片数据是一个数组，然后通过来循环渲染，那么我们就可以利用来为每一项的属性动态赋值。这样就可以实现每个的属性值刚好是它的“位置”值。...
2022-07-12 16:13:02
2989
2
原创 星地协同生态环境走航系统——项目总结
需求一定要了解清楚的不能再清楚之后再去思考如何做这个项目写代码永远是最后一件事，要先把需求分析、方案设计、原型编写、项目框架搭建等做完善之后，再去分配任务进行开发站在项目经理的角度上来看，技术的广度大于技术的深度在任务安排时一定要分优先级，有主有次要会写文档，掌握常见文档的模板，如：项目方案、会议纪要、测试文档项目组的每一个成员都要清楚：项目的最终实现成果是什么样的到目前为止还有哪些功能模块没有做没做的功能模块有哪些是由自己负责的项目的整体数据流向，数据接口文档..
2022-05-16 10:53:07
542
3
原创 Vue性能优化方案——个人经验总结
Vue性能优化方案——个人经验总结谨慎使用深度监听善于使用\props与emit验证减小项目体积provide和inject善用异步加载“慎用”Vuex功能重用仅传递必要的数据设计模块分类SSR/SSGv-for优化善用v-once列表虚拟化非反应性减少组件谨慎使用深度监听这在用于大型数据结构时性能消耗较大，仅在必要时使用。export default { watch: { someObject: { handler(newValue, oldValue) { },
2022-05-08 17:08:18
2577
原创 cmd中操作文件与文件夹的相关命令
功能命令查看当前目录下的所有文件夹和文件dir进入文件夹cd 文件夹名创建文件夹md 文件夹名创建文件创建空文件：type nul>文件名创建非空文件：echo 文件内容>文件名删除文件夹rd /s /q 文件夹名（/s表示能够删除非空文件夹；/q表示无需确认）删除文件del 文件名修改文件夹名/文件名ren 原文件夹名/文件名 新文件夹名/文件名...
2022-05-07 09:49:11
688
原创 频谱大数据——项目总结
做项目和做产品是不一样的：做项目只有一个硬性要求：让项目保证《技术要求》全部达标；做产品在产品设计时就要在用户的角度上考虑，用户需要的是一个什么样的产品，都要有什么功能，想要什么样的体验，要让用户感觉到我们是切切实实的在替他考虑。自研产品是要拿来卖的，要让用户觉得物超所值，所以在产品设计上就要考虑展示更多的功能，显示更多的数据。有时候增加一个“包装”就可以达到1+1>2的效果，比如平安果。记事本也可以写程序，但为什么开发人员都用vscode，就是因为vscode站在开发人员的角度上去做这个产..
2022-05-07 09:45:53
492
1
原创 Vue3的性能提升主要是通过哪几方面体现的？
javascript -> typescriptVue3相较于Vue2，其使用TypeScript完全重写了vue源码，ts的优势不用多说，它带来的类型检查的能力不论是对于vue内部还是项目本身，都很大程度上的减少了代码错误出现频率，进而提升了整体的项目质量与性能。Object.defineProperty -> ProxyVue2采用Object.defineProperty实现的响应式，虽然实现了响应式，但其有一定的限制，比如无法检测到新的属性添加，且处理大型数据结构时性能并不理想。
2022-04-26 15:43:43
640
原创 Vue3在css中使用js变量及其原理解读
Vue3在css中使用js变量及其原理解读实现原理首先css中是有变量的，可以像js变量一样在style中使用，然后Vue3支持将js中的变量传入style中，相当于在css中创建了同名的变量，值绑定到js变量上，后续会跟着js中的变量一同响应式变化。CSS变量介绍CSS变量的声明方式：--color: red;CSS变量的使用方式：h1 { color: var(--color); }作用域：body { --color: red; } h1 { color:
2022-04-26 14:53:09
10928
5
原创 Vue3是如何升级虚拟DOM模块的？
Vue3是如何升级虚拟DOM模块的？静态标记（PatchFlag）在Vue2中，元素的更新比较是采用的全量对比的方式，虽然借鉴了react的diff算法中同级对比的方式进行了优化，但依然会对比部分静态节点，这明显还有优化空间。所以在Vue3中采用了静态标记（PatchFlag）的方式对这部分进行优化。在render函数中就将每个节点进行分析，为动态节点进行标记，标明该节点是未来有可能变化的节点（即动态节点）；并且PatchFlag枚举定义了十几种类型，更精确的定位需要对比节点的类型。现有如下DOM结
2022-04-26 14:14:06
1558
原创 Vue3响应式原理实现（包括ref、reactive、computed实现原理）
Vue3响应式原理实现（包括ref、reactive、computed实现原理）Vue3摒弃了Vue2的Object.defineProperty的方式来实现响应式，而是拥抱未来，采用了ES6的Proxy。这也解决了Vue2中的一些响应式问题，包括响应式对象新增的属性不是响应式的问题。代码较长，但注释完全，相信看完会有很多收获，共勉！code：// targetMap用于存放所有响应式对象；// weakMap相较于Map的优势：1. key必须是对象；2. 对其键是弱引用，不影响作为key的对
2022-04-20 17:38:13
1476
原创 node读取大型文件的方式：文件流
需求：node读取6G的二进制文件。解决方式：使用文件流读取实现：let reader = fs.createReadStream(fileUrl, { // 将文件读取为文件流 highWaterMark: POINTBUFFERLENGTH, // 一次读取的字节数});// 每次读取都会触发data事件reader.on("data", (data: Buffer) => { // do something ... ...});// 全部读取完之后数据流关闭触发cl
2022-04-20 09:54:36
1838
原创 用node搭建Cesium本地地图服务
Cesium代码：const mapServerUrl = "http://localhost:5500/mapTile/";const layerOptions = new Cesium.TileMapServiceImageryProvider({ url: Cesium.buildModuleUrl(url), // maximumLevel: 11, // 地图切片的最大层级 // minimumLevel: 7, // 地图切片的最小层级 // rectang
2022-03-30 12:48:34
1050
1
原创 关于前端无法播放RTSP视频流的实现方案
工具与详细步骤请看：https://download.csdn.net/download/qq_41176306/83943855
2022-03-08 16:54:37
497
原创 electron实现让文件出现在软件安装目录中并使用其中的文件
效果：软件安装目录：resources文件（resource文件即所需文件）：实现第一步：在项目最外层创建resource文件夹（名称自定义），并放入软件安装后所需的文件。第二步：修改vue.config.js文件内容。第三步：使用resource文件中的内容，即获取文件的路径。background.ts:let resourceUrl = path.join(process.cwd(), '/resources/resource'); // process.cwd()即为路径
2022-02-17 15:49:57
2490
1
原创 js实现获取本机的摄像头和麦克风的视频流和音频流并显示
很简单，几行代码，直接cv后Chrome浏览器打开即可查看效果，不过多赘述。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini
2022-02-17 15:30:44
4143
1
原创 elctron + vue3修改打包后软件的默认安装路径
elctron + vue3修改打包后软件的默认安装路径，解决默认安装到C:\Program Files\软件名 后导致的软件操作其安装目录下的文件权限不足问题（亲测有效）实现效果：设置的默认安装路径为：C:\spectrumBigData实现步骤：第一步：在项目目录下创建build文件夹，在文件夹内创建installer.nsh文件（windows软件安装文件）。第二步：编辑installer.nsh!macro preInit SetRegView 64 WriteRegEx
2022-02-16 14:53:56
1544
原创 cmd处理文件夹和文件的命令
cmd处理文件夹和文件的命令功能命令查看当前目录下的所有文件夹和文件dir进入文件夹cd 文件夹名创建文件夹md 文件夹名创建文件创建空文件：type nul>文件名创建非空文件：echo 文件内容>文件名删除文件夹rd /s /q 文件夹名（/s表示能够删除非空文件夹；/q表示无需确认）删除文件del 文件夹名修改文件夹名/文件名ren 原文件夹名/文件名 新文件夹名/文件名...
2022-02-11 15:47:42
1498
原创 electron + vue编写日志文件输出功能
需求将软件各个模块中需要输出日志的位置进行统一的日志输出，提高软件可维护性，且日志文件按照时间进行区分（一天一个日志文件）。效果：文件夹：文件：实现：主进程中：background.ts:import { ipcMain } from "electron";app.on("ready", async () => { // ... // 日志文件处理 logFile();});// 监听渲染进程中发过来的信息，并存入log日志文件中ipcMain.on('ou
2022-02-11 14:54:05
2232
1
原创 node判断文件是否存在
/** * 判断文件是否存在 * @param fileUrl 文件路径 * @returns 文件是否存在 */async function judgeFileExist(fileUrl: string): Promise<boolean> { let result = false; await new Promise((resolve, reject) => { getConfigJsonData().then(res => { let fi
2022-02-11 10:28:11
2544
原创 node判断某一端口是否被占用
/** * 判断端口是否被占用 * @param port 端口号 * @returns 该端口是否被占用 */async function judgeServerOpen(port: number): Promise<boolean> { let result = false; let order = `netstat -ano|findstr "${port}"`; await new Promise((resolve, reject) => { cPro
2022-02-10 18:17:05
1143
原创 node判断.net 5的环境是否存在
结果（电脑中存在.net 5的环境）：/** * 判断.net 5的环境是否存在 * @return {boolean} .net 5的环境是否存在 */async function judgeNETEnviroment(): Promise<boolean> { let result = false; var process = require('child_process'); var cmd = 'dotnet --info'; await new Promi
2022-02-10 10:01:41
400
原创 nodejs获取电脑磁盘信息
效果图：我的磁盘情况：程序执行结果：nodejs实现：const d = require('diskinfo'); // 需安装diskinfo依赖d.getDrives(function (err: any, aDrives: any) { for (var i = 0; i < aDrives.length; i++) { console.log('Drive ' + aDrives[i].filesystem); console.log('blocks ' +
2022-01-26 13:37:10
5728
原创 nodejs获取电脑中所盘符及其名称
达到的效果：我电脑的盘符情况：程序输出的效果：nodejs实现getAllDrive.ts：/** * @Description 获取电脑中所盘符及其名称 * @Author WJW * @Date 2022-01-25 */ const process = require('child_process');// cmd命令const cmdOrder = { getAllDrive: () => ("wmic logicaldisk where drivetype=
2022-01-26 13:17:03
4550
6
原创 nodejs实现VSCode中的open with five server功能
nodejs实现VSCode中的open with five server功能VSCode的效果：第一步：第二步：nodejs实现第一步（创建文件夹）：创建一个文件夹mapServer，在文件夹中创建一个server.js，然后将服务要用的文件夹放到mapServer中。第二步（初始化环境）：打开cmd，进入该文件夹，按顺序执行以下命令（不要关）：npm initnpm i five-server第三步（编辑server.js）：const FiveServer = requ
2022-01-26 12:58:46
1573
原创 程序测试——黑白灰盒测试
黑盒测试把测试对象看做一个封闭的盒子，不考虑程序内部逻辑，只依照程序的《需求规格说明书》检查程序的功能是否符合要求。因此黑盒测试又称为功能测试或数据驱动测试。黑盒测试的主要目的：检验功能是否有遗漏检验接口使用正确的输入是否可以得到正确的输出检验程序是否有bug检验性能是否满足要求检验是否有初始化或终止性错误具体的黑盒测试方法包括等价类划分、因果图、正交实验涉及法、边界分析、判定表驱动法、功能测试等。白盒测试把测试对象看做一个打开的盒子，它允许测试人员利用程序内部的逻辑结构及有关信息
2022-01-07 12:57:34
1821
原创 在打工人的角度学《劳动法》
本文内容均来自《中华人民共和国劳动法》加班费用人单位应当严格执行劳动定额标准，不得强迫或者变相强迫劳动者加班。用人单位安排加班的，应当按照国家有关规定向劳动者支付加班费。关于加班费，《劳动法》第44条规定，有下列情形之一的，用人单位应当按照下列标准支付高于劳动者正常工作时间工资的工资报酬：安排劳动者延长工作时间的，支付不低于工资的**150%**的工资报酬；休息日安排劳动者工作又不能安排补休的，支付不低于工资的**200%**的工资报酬；法定休假日安排劳动者工作的，支付不低于工资的300%.
2021-12-21 20:29:54
746
3
原创 项目经理是怎样炼成的？
PS：内容来自高屹老师的“项目经理是怎样炼成的？”课程笔记目录项目经理是怎样炼成的？项目经理面临的压力与技能挑战项目经理的正式任命书——项目章程项目经理应具备的权利，如何去争取获取客户需求的重要工具——头脑风暴如何通过WBS（工作分解结构）将一个项目化繁为简、化整为零？项目拆解的两种方式和工作包判别WBS分解过程中要警惕的常见问题“按时完成”为何是项目管理的一大难题？做进度计划必须要考虑的两个重点问题项目活动时间的最精准算法——三点估算法区分项目活动轻重缓急的方法——关键路径法如何精准找到项目活动的关.
2021-12-01 19:53:10
1045
原创 node启动、关闭windows服务
需求：electron软件启动与关闭要同时开启与关闭一个本地数据转发服务解决：工具包：handleWindowsService.tsconst exec = require('child_process').exec;const windowServiceStart = function (path: string) { // path必须为绝对路径 exec(`start ${path}`, function (err: any, stdout: any, stderr: any) {
2021-11-29 18:53:56
1980
原创 Do not use “@ts-ignore“ because it alters compilation errors的解决办法（不关闭ts的严格模式）
Do not use “@ts-ignore” because it alters compilation errors的解决办法（不关闭ts的严格模式）问题：解决：第一种办法：关闭ts 的严格模式（对项目其他地方有影响，所以不推荐）（网上大都是这种解决办法）第二种办法：在// @ts-ignore上面加一行// eslint-disable-next-line @typescript-eslint/ban-ts-comment（对项目其他地方没有影响，推荐推荐）// eslint-disab
2021-10-09 16:16:59
2995
原创 Vue中vm.$watch的实现原理
文章目录API用法实现思路内部原理API用法/*** watch* @params expOrFn {Strng | Function} 监听项* @params callback {Function | Object} 回调函数* @params options ? { 配置项* {boolean} deep 深度监听* {boolean} immediate 立即执行* @returns {Function} unwatch 此函数调用后会取消该监听*/vm
2021-09-22 17:47:43
451
原创 Axure 9 选择组的使用
文章目录Axure 9 选择组的使用任务情景：实现效果：操作步骤：Axure 9 选择组的使用任务情景：在所有路线中选择一个路线显示高亮。实现效果：
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人