- 博客(898)
- 收藏
- 关注
RSS订阅原创 Webpack一键打包多个环境
安装如下插件，以便可以在打包命令中设置环境变量区分不同的环境。在package.json中配置正式环境和测试环境打包命令，同时添加一个命令同打包两个环境。在vue.config.js中添加打包输出配置，其中正式环境打包输出到dist_prod文件夹，测试环境打包输出到dist_test文件夹。在package.json中配置正式环境和测试环境打包命令，同时添加一个命令同打包两个环境。安装如下插件，以便可以在打包命令中设置环境变量区分不同的环境。
2024-10-16 21:13:21
479
原创 React-router 6.0常用功能
NavLink相比于Link，主要用于导航，在传入的样式中可以用回调函数获取当前的导航是否被激活，从而可以添加对应的状态。加了基础路由后，路由地址就会多一个根路由，所有的路由地址都会基于这个地址进行跳转，这个在一些微服务的场景还是很有用的。
2024-08-20 00:57:41
532
原创 TypeScript学习第十五篇 － tsconfig.json配置
TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript 项目的根目录。基础字段 files - 设置要编译的文件的名称；['./src/main.tsx']；include - 设置需要进行编译的文件，支持路径模式匹配；['src']；exclude - 设置无需进行编译的文件，支持路径模式匹配；['node_modules']；compilerOptions - 编译配置选项
2024-08-15 23:48:52
398
原创 TypeScript学习第十四篇 － 类型的常见操作
1. 获取Key的类型，JS当中获取key的语法：Object.keys()，TS当中获取key的类型：keyof2.获取对象类型3.遍历枚举类型
2024-08-15 00:32:52
334
原创 TypeScript学习第十三篇 － 泛型
在编译期间不确定变量的类型，在调用时，由开发者指定具体的类型。定义的时候，无法确定类型，只有在调用的时候，才能确定参数类型。Pick 就是挑选的意思，可以从已有的类型中，挑选一些类型进行使用。
2024-08-14 12:24:46
187
原创 TypeScript学习第十二篇 － 各种数据类型的定义
1. 接口通过interface定义，type是用来定义类型别名；2. 接口可以重复定义，type不可以；3. 接口可以继承，type不可以继承，但是可以使用联合类型和交叉类型来模拟继承；
2024-08-12 00:34:20
308
原创 React 中的useRef 和 useTransition
由于 React 会自动处理更新 DOM 以匹配你的渲染输出，因此你在组件中通常不需要操作 DOM。但是，有时你可能需要访问由 React 管理的 DOM 元素 。例如，让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情，所以你需要一个指向 DOM 节点的 ref 来实现。useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值。
2024-08-09 22:49:36
416
原创 React 中的 useContext 和 useReducer
useReducer 实际上是 useState 的升级版，都是用来存储和更新 state，只是应用的场景不一样。一般情况下，我们使用 useState 就足够项目需要了，不多当遇到以下场景时，使用useReducer 会更好些 。1. 状态逻辑复杂：当状态的更新逻辑比较复杂时，使用 useReducer 可以将这个逻辑封装在 reducer 函数中，使代码更加清晰易懂；2. 多组件共享状态：当多组件需要共享一个状态时，可以将这个状态放在父组件，然后通过 useReducer 将状态......
2024-08-08 01:09:09
347
原创 React 中的 useMemo 和 useCallback
useCallback优化示例：定义一个子组件在父组件中调用，当父组件更新重新渲染时，子组件也会重新渲染。然后我们对子组件加了memo对传入的参数进行检测，同时对传入子组件的方法使用useCallback进行缓存，这样当父组件在更新时，缓存的方法没有发生变化，子组件通过memo发现传入的方法没有发生改变，也就不会重新渲染，以此提高了性能。
2024-08-07 00:20:35
454
原创 React 中 useEffect 语法详解
useEffect Hook 相当于 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。可以模拟渲染后、更新后、销毁三个动作。
2024-08-06 22:53:01
351
原创 浏览器的渲染原理
当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画页面。每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。这样，整个渲染流程就形成了一套组织严密的生产流水线。
2024-08-04 23:57:17
1031
原创 浏览器事件循环详解
JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。而渲染主线程承担着诸多的工作，渲染页面、执行JS都在其中运行。如果使用同步的方式，有极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死的现象。所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行……
2024-08-04 16:49:51
1093
原创 React 中 useState 语法详解
React 中 useState 语法详解：state：定义的数据源，可视作一个函数组件内部的变量，但只在首次渲染被创造。dispatch：改变state的函数，推动函数渲染的渲染函数，有非函数和函数两种情况。initData：state的初始值，有非函数和函数两种情况。
2024-07-25 01:05:21
477
原创 React搭建Vite项目及各种项目配置
创建Vite项目，在操作系统的命令终端，输入以下命令：yarn create vite，输入完成以后输入项目名称、选择开发框架，选择开发语言，如下图所示，即可完成项目创建。注意事项：1. Node版本必须符合要求，否则安装过程中会提示版本不对；2. 由于上面是使用的yarn来安装的，所以需要首先通过npm来全局安装yarn......
2024-07-23 23:16:34
2439
原创 微信小程序性能与体验优化
1. 合理的设置可点击元素的响应区域大小；比较常见的是页面的点击按钮太小，用户点击不到按钮，这样用户体验很不好。2. 避免渲染页面耗时过长；当页面渲染时间过长的话，会让用户感觉非常卡顿，当出现这种情况时，我们应该检查一下当前渲染的页面是不过大。3. 避免执行脚本耗时过长；执行脚本耗时过长，用户也会感觉到非常卡顿，体验非常不好，如果出现这种问题，我们应该检查一下脚本的执行逻辑是否有问题，需要对脚本的执行逻辑进行相关的优化。
2024-07-02 23:50:44
626
原创 微信小程序的运行机制与更新机制
小程序运行在微信里面，小程序中有视图层、逻辑层还有Native系统层，当开发者用小程序开发工具开发完小程序以后，会把小程序编译发布到对应的微信服务器上，当小程序首次加载时，会把小程序的包从微信服务器上下载到微信里，这个时候就可以第一次的看到微信小程序了。当用过一次微信小程序以后，如果当前启动小程序为冷启动，这个时候会去读取缓存以及检查小程序是否有新版本更新，如果开发者在小程序后台发布了新版本之后，因为小程序的更新是异步的， 如果当前小程序在本地存在历史版本的话，那么打开的版本可能还是旧的……
2024-07-01 18:09:31
717
原创 微信小程序渲染层与逻辑层交互原理
在渲染层中触发相关事件时，事件并不是直接传递给逻辑层，而是从渲染层把事件传给系统层，系统层把事件转发给对应的逻辑层，逻辑层进行相对应的业务操作，将处理完成的数据返回给系统层，系统层把数据传递给渲染层，渲染层用于展示，这就是渲染层与逻辑层的交互关系。所以在小程序中有一个很忌讳的操作，不能频繁的去进行setData，否则小程序会卡死。另外如果一个变量不会影响页面渲染，就不应该放在data里，这样在更新数据时会过多的消耗系统资源。
2024-07-01 16:16:47
369
原创 Element 页面滚动表头置顶
在开发后台管理系统时，表格是最常用的一个组件，为了看数据方便，时常需要固定表头。如果页面基本只有一个表格区域，我们可以根据屏幕的高度动态的计算出一个值，给表格设定一个固定高度，这样表头就可以固定了。但是如果表格上面还有其它区域，这样动态计算出表格的高度时还要减去其它区域的高度，因此计算出的表格的高度就会非常小，看数据特别不方便，此时就不能给表格设置一个固定高度了，但是这样一页数据很多时，滚动页面到底部，表头就被滚动隐藏了，为了用户体验好一点......
2024-06-26 17:55:02
890
原创 微信小程序传统开发登录和云开发登录的区别
传统开发登录流程：用户端调用wx.login从微信服务器获取code；用户端用wx.request将获取的code传递给后端服务器；后端服务器将拿到的code传给微信服务器，换取openid和session_key；后端服务器将获取到的信息返回给用户端……
2024-06-26 00:44:22
349
原创 Element 进度条样式优化
在开发后台管理系统时，经常会用到进度条这样一个控件，Element UI中提供了progress这样一个组件，该组件默认的颜色会比较单一，为此时常需要对该组件的样式进行一些优化，以满足实际项目的需求，上图是对该组件经过样式优化后的效果，下面提供代码供大家参考。
2024-06-21 10:52:39
463
原创 npm install 的原理
安装某个二级模块时，若发现第一层级有相同名称，相同版本的模块，便直接复用那个模块。因为A模块下的C模块被安装到了第一级，这使得B模块能够复用处在同一级下相同的C模块。扁平化只是理想状态，非理想状态如下图所示：因为B和A所要求的依赖模块版本不同，所以B不能复用A下的C 1.0模块，所以如果这种情况还是会出现模块冗余的情况，他就会给B继续加一层node_modules，就是非扁平化了。
2024-06-10 22:56:14
1786
原创 Vue 2.0使用Vue-count-to给数字添加增长动画
在开发后台管理系统时，时常会遇到数据汇总，为了页面展示更生动，用户体验更好，通常会对汇总的数字加一个逐步递增动画。实现这个效果一般是用的 Vue-count-to这个插件，这是一款简单好用的一个数字滚动插件，并且是一个无依赖，轻量级的组件。
2024-05-30 11:46:01
672
3
原创 微信小程序图片懒加载如何实现？
微信小程序开发时，对于有图片的列表在加载时，为了用户体验更好，必需要对图片做懒加载。如下图所示，页面在打开时，图片会按需加载，这样用户体验没有那么生硬。以下将介绍图片懒加载的步骤：1.构建NPM：在小程序目录下初始化npm；2.安装插件：在项目根目录下执行以下命令，安装插件；3.使用插件：在要使用懒加载的页面引入组件......
2024-05-27 20:30:35
1088
原创 Scrcpy常用命令
Scrcpy 是一个开源的命令行工具软件，被设计用于使计算机用户能通过Android ADB或通过USB数据线控制其Android设备，支持通过鼠标和键盘对Android设备操作，更重要的是无需Root权限。
2024-04-20 22:34:43
2320
1
原创 ADB的基本语法及常用命令
ADB命令的基本语法如下：adb [-d|-e|-s ] 如果有多个设备/模拟器连接，则需要为命令指定目标设备。1. 启动ADB服务 ; 2. 停止ADB服务；3. 指定ADB服务的网络端口；4. 查询已连接设备/模拟器；5. 无线连接（需要借助USB 线）；6. 无线连接（无需借助USB 线）；7. 应用管理；
2024-04-13 18:01:00
1576
原创 基于ADB的Scrcpy实现电脑控制手机
Scrcpy是一个开源的，基于ADB（Android 调试桥）的手机到电脑上的投屏+操控的实现，本文将介绍如何搭建开发环境，使得在Windows系统中去控制投屏的安卓手机。
2024-04-13 10:59:50
763
原创 易语言数据库常用操作
易语言是一门中文编程语言，由国人开发，虽然比较冷门，但是在有些场合却非常流行，比如自动化脚本，还有开发外挂。本文将介绍在易语言数据库的一些常规操作。本文将介绍在易语言数据库的一些常规操作。
2024-04-12 16:50:58
796
原创 易语言控件绑定数据库
易语言是一门中文编程语言，由国人开发，虽然比较冷门，但是在有些场合却非常流行，比如自动化脚本，还有开发外挂。在易语言中，只要控件的属性里有数据源的都可以与数据库的数据绑定，以下将演示易语言数据库与表格控件如何绑定。1.在数据库提供者控件的属性“数据库文件名”中选择要绑定的数据库；2.在数据源控件的属性“数据提供者”中选择上一步中创建的数据库提供者；3.在表格控件的属性“数据源中”选择上一步创建的数据源；
2024-04-01 18:22:57
383
原创 易语言设置数据库密码
易语言是一门中文编程语言，由国人开发，虽然比较冷门，但是在有些场合却非常流行，比如自动化脚本，还有开发外挂。易语言设置数据库密码有两种方式：1.通过菜单设置密码。在菜单“数据库”中选择“设置数据库密码”，打开对话框如下所示，通过以上设置后，后面再打开数据库，就需要输入密码了。
2024-04-01 17:11:45
379
原创 易语言创建数据库
易语言是一门中文编程语言，由国人开发，虽然比较冷门，但是在有些场合却非常流行，比如自动化脚本，还有开发外挂。以下将用一个简单的用户表，演示易语言创建数据库的几种方式：1.使用菜单创建数据库。在菜单“数据库”中选择“结构编辑器”。2.通过代码创建数据库。以上只是纯粹的创建数据库，但是为程序的健壮性，还得添加一些判断。上面代码中与数据库里的一些属性名称我们还可以用常量来表示，在“插入”菜单，选择“常量”。
2024-04-01 15:41:57
893
原创 Java基础-封装、继承、多态
Java是一门面向对象非常好的语言，拥有面向对象的三个基本特征：封装、继承、多态。什么是封装？封装就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。什么是继承？继承是面向对象的三大特性之一，可以使子类具有父类的属性和方法，还可以在子类中重新定义、追加属性和方法。
2024-03-10 22:18:31
1384
原创 C盘中的休眠文件hiberfil.sys如何删除？
电脑休眠指整机将完全停止供电，而将当前处于运行状态的数据保存在硬盘中，下次启动的时候可以根据保存的休眠文件快速启动，还原上一次的电脑状态。Win10的系统休眠文件叫作hiberfil.sys，它是系统休眠时临时保存的文件，其占用体积较大，当C盘空间不够时，用户可以对系统的休眠文件进行删除。
2024-03-07 14:32:25
1070
原创 第五篇：组件更新：完整的 DOM diff 流程是怎样的？（下）
新子节点数组相对于旧子节点数组的变化，无非是通过更新、删除、添加和移动节点来完成，而核心 diff 算法，就是在已知旧子节点的 DOM 结构、vnode 和新子节点的 vnode 情况下，以较低的成本完成子节点的更新为目的，求解生成新子节点 DOM 的系列操作。
2024-03-06 17:01:24
1005
原创 微信小程序实现吸顶、网格、瀑布流布局
微信小程序开发通常是在webview模式下编写，但是对小程序的渲染性能有一定的追求，就需要使用Skyline模式进行渲染，同时在这种模式下有也有一些特殊的组件，可以轻松的实现想要的效果，本文将介绍在Skyline模式下如何实现吸顶、网格、瀑布流布局。
2024-02-03 18:04:36
2702
原创 由于系统注册表文件丢失或损坏，因此Windows无法加载，如何解决？
问题描述：windows黑屏未能启动，提示由于系统注册表文件丢失或损坏，因此windows无法加载，错误代码：0xc000014c。出现这种问题的原因大多是因为电脑在使用过程中硬件松动，导致出现这种问题。解决办法：1. 如果有安装启动盘，可以按照故障提示步骤操作，修复电脑；2. 开机F8恢复最后一次配置，然后重启开机......
2024-01-30 19:02:29
11150
3
原创 Java基础-实现猜数字小游戏
实现控制台的猜数字游戏：游戏运行时产生一个1~100之间的随机数字， 要求用户从控制台输入数字，若输入的数字比随机数小，则提示太小了；若输入的数字比随机数大，则提示太大了，若输入的数字与随机数相同，则提示猜对了。
2024-01-27 20:40:29
618
原创 Windows无法访问共享文件夹，提示：你不能访问此共享文件夹，因为你组织的安全策略阻止未经身份验证的来宾访问。这些策略可帮助保护你的电脑免受网络上不安全设备或恶意设备的威胁。
问题描述：Windows系统里访问局域网共享文件夹时，提示：“你不能访问此共享文件夹，因为你组织的安全策略阻止未经身份验证的来宾访问。这些策略可帮助保护你的电脑免受网络上不安全设备或恶意设备的威胁。主要原因：未启动启用策略：不安全的来宾登录。解决方法：1. Windows+R键，打开运行，输入gpedit.msc，打开本地组策略编辑器；2. 打开本地组策略编辑器，计算机配置=>管理模板=>网络=>Lanman 工作站；3. 双击“启用不安全的来宾登录”；4. 选择“已启用”，点确定；
2023-12-19 18:12:27
2933
原创 Git 合并时出现 Please enter a commit message to explain why this merge is necessary 问题解决
Git 合并时出现 Please enter a commit message to explain why this merge is necessary 问题解决方法：1. 按键盘字母 i 进入insert 模式；2. 修改最上面那行黄色合并信息，也可以不修改；3. 按键盘左上角"Esc"键；4. 输入":wq"，注意是冒号+wq，按回车键即可；
2023-12-19 17:47:54
5189
原创 Vue 2.0源码分析-数据驱动
所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。数据驱动还有一部分是数据更新驱动视图变化，这一块内容我们也会在之后的章节分析，这一章我们的目标是弄清楚模板和数据如何渲染成最终的 DOM。
2023-12-09 11:31:59
533
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人