- 博客(64)
- 收藏
- 关注
RSS订阅原创 rust + bevy 实现小游戏 打包成wasm放在浏览器环境运行
【代码】rust + bevy 实现小游戏 打包成wasm放在浏览器环境运行。
2024-09-14 10:14:02
543
原创 vue-cli 中 配置 productionSourceMap 为 false 失效？
最近 发现 vuecli 构建的 项目中配置的 productionSourceMap 为 false 后 ，生产代码 还是能够看到 sourceMap 文件。生效前提条件 得设置 NODE_ENV 为 production 才会生效！
2024-08-13 17:41:15
473
原创 基于fabric封装一个简单的图片编辑器(包含 vue 和 react 两个版本demo)
对 fabric.js 进行二次封装，实现图片编辑器的核心功能。核心代码 不依赖 ui响应式框架vue ,react 都适用。只写了核心编辑相关代码便于大家后续白嫖二次开发核心代码我就没有打包发布 会 和 业务代码一起放到项目中。
2024-06-07 12:01:39
553
原创 TypeScript实战系列之ts高手必备技能（最终篇）
ts 中 有一组关键字 （keyof typeof infer extends in as ） 用于利用已有的类型生成新的类型。ts中知识比较多， 这里只介绍个人觉得日常开发需要用到的部分。先来个开胃菜 下面这个类型的作用} & {[P in K]?: T[P];// 示例用法作用就是 将类型指定的键的属性变为可选属性学完这一篇，你就能随性所欲的来封装属于你的类型工具！以上基本涵盖了90% ts 的使用。配合类型体操练习题 多练练 ts就算ok了。下面附上 刷题地址。
2024-02-20 17:59:59
1072
原创 vue3学习源码笔记（小白入门系列）------provide和 inject 跨层级数据传递原理
需要从父组件向子组件传递数据时，会使用 props。对于层级不深的父子组件可以通过 props 透传数据，但是当父子层级过深时，数据透传将会变得非常麻烦和难以维护。而依赖注入则是为了解决 prop 逐级透传 的问题而诞生的，父组件 provide 需要共享给子组件的数据，子组件 inject 使用需要的父组件状态数据，而且可以保持响应式。使用例子// 父组件provide(/* 注入名 */ 'message', /* 值 */ msg)//子组件使用。
2023-10-12 16:45:59
349
原创 vue3学习源码笔记（小白入门系列）------computed是如何工作的
带着问题看源码：1.computed 是如何实现响应式的？2.computed 是如何实现计算结果缓存的？计算属性 也是内置 实现了 一个 reactiveEffect 来实现响应式计算属性可以从状态数据中计算出新数据，computed 和 methods 的最大差异是它具备缓存性，如果依赖项不变时不会重新计算，而是直接返回缓存的值，是否重新计算 取决于私有属性 _dirty。
2023-10-07 17:43:39
300
原创 vue3学习源码笔记（小白入门系列）------watch watchEffect是如何工作的
effectwatch 和 watchEffect 本质都是创建了一个新的 ReactiveEffect 来管理响应式等操作，根据 flush 的状态触发 job 的不同阶段更新。
2023-09-28 20:50:47
468
原创 vue3学习源码笔记（小白入门系列）------ 重点！响应式原理 代码逐行分析
这时候进行app 组件 processElement 由于存在子组件child 执行 mountChild ----> patch —> child 组件的processComponent child组件 也会和 app 组件 一样 去 初始化 instance 创建 ReactiveEffect 触发update 执行属于 child 的 componentUpdateFn 再 执行 child组件的 render 函数 child组件发生依赖收集。就是 数据 驱动 视图 更新的 桥梁。
2023-09-14 15:23:55
497
原创 vue3学习源码笔记（小白入门系列）------ 组件是如何渲染成dom挂载到指定位置的？
以上就完成了 组件初始化工作。下面画了 几个流程图来辅助理解。最好阅读的时候自己 也可以画下安利一个好用的vscode流程图插件下一篇：准备写 数据代理这块。
2023-08-25 16:37:03
1309
原创 搭建一个 vite +vue3+ ts 多入口项目
分享一下 最近给公司搭建的一个 vite 多入口 项目 (保密问题 只有一个空架子)github 链接 ： https://github.com/duKD/vue-vite-multiple-entry。
2023-04-03 15:44:44
555
原创 5分钟彻底搞懂this指向问题 （附练习题）
当函数被调用时 ，会创建一个会话记录。记录方法 传入参数等信息，this 就是其中一个属性而已，会在函数执行时用到。
2022-11-02 14:54:56
123
原创 读懂css属性值
在查阅css 文档的时候 总是会出现 类似被包裹的语法提示，这些其实就是 css 的基本数据类型 就和编程语言中的基本数据类型至于编程语言一样重要，所以要想更顺畅的查阅css 文档 ，了解并熟悉css 基本数据类型是必要的。常见的数据类型再加上符号和关键字 就组成了css 的属性值语法下面献上我常用的css 查阅链接。...
2022-08-17 19:54:53
429
原创 h5模拟文件拖拽上传
<!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, initial-scale=1.0"> <title>Doc
2022-05-21 16:29:24
93
原创 利用IntersectionObserver提升首屏性能
场景首页展现内容很多，有时候一些元素开始不会出现在视口内，但是这些元素组件可能内部会执行一些消耗性能的动画。这时候 我们可以使用IntersectionObserver 去实例出一个监听器 去监听一组元素，可以判定他是否出现在视口内，这时我们再去实现某些操作。也可以配合实现图片懒加载上代码：<template> <section class="contain" ref="myScroll"> <div class="contain-item" v-for="
2022-05-17 19:32:59
370
原创 requestAnimationFrame实现全屏滚动评论
前言结合具体场景实战requestAnimationFrame业务场景：h5 技术： vue2 vant2评论可以自动的向上滚动 并且可以手动拖拉滚动条 查看上面的评论你可以把requestAnimationFrame认为是浏览器内部提供的一个钩子函数，执行时间是在 每一帧渲染开始前执行 是不会阻塞js 主线程执行 ，也不会触发多余的重绘操作下面是简单的demo代码代码比较简单就直接贴出来//commentView.vue<template> <section
2022-05-17 14:44:46
439
原创 html css js实现图片懒加载
原理img 标签 有个 src 属性 当src 不为空的时候 随着img 元素渲染到页面上的时候 会异步的去加载资源 。我们只需要 将 未出现在可视区 的 img 元素 src 设置为空即可 等它出现在屏幕 我们 再设置其src<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>懒加载</title> <style
2022-05-02 20:29:02
495
原创 常用的正则使用内容
this指向问题前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结学习内容：学习时间：学习产出：三级目录前言先来段常见的this的八股文：一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsi
2021-11-17 17:27:04
74
原创 利用 egg-socket.io 内置的 socket.io-redis 集群部署socket服务
socket.ioSocket.IO 是一个基于 Node.js 的实时应用程序框架，在即时通讯、通知与消息推送，实时分析等场景中有较为广泛的应用。文章目录socket.io前言一、介绍配置二、使用步骤1.准备2.测试前言但一台单机的socket服务无法支撑其业务时 我们需要集群部署实现请结合egg-socket.io 来阅读链接一、介绍配置先看下配置文件 config文件夹下// {app_root}/config/config.${env}.jsexports.io = {
2021-06-10 18:18:21
1548
3
原创 mongo中关于普通的query查询和管道聚合查询最优使用场景
目录前言普通的查询获取总数vs聚合查询获取总数普通的查询分页数据vs聚合查询获取分页数据（排序）总结前言最近在项目中使用聚合查询做普通的分页查询性能并没有普通的query查询效果好，下面详细说明一下普通的查询获取总数vs聚合查询获取总数实验数据 13000条左右；但是由于数据库设计不规范单条数据大小可达到100多k!!!//耗时27ms左右db.template_editors.find({ "handle_status": {
2021-04-15 20:20:55
530
原创 nginx 入门使用总结 ——（3）http proxy module 模块配置
目录介绍 反向代理二级目录三级目录介绍 反向代理 反向代理（reverse proxy）方式是指用代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络中的上游服务器，并将从上游服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外的表现就是一个Web服务器。充当反向代理服务器也是Nginx的一种常见用法； &
2021-04-02 17:51:55
227
1
原创 nginx 入门使用总结 ——（2）http核心模块配置
文章目录介绍虚拟主机与请求的分发总结介绍一个典型的静态Web服务器 会包含多个server块和location块；如下：http { gzip on; upstream { … } … server { listen localhost:80; … location /webstatic { if … { … } roo
2021-03-31 09:31:27
376
原创 nginx 入门使用总结 ——（1）基本配置
nginx 入门使用总结 ——（1）基本配置文章目录nginx 入门使用总结 ——（1）基本配置安装基本配置块配置项结束最近抽空整理一下 工作中用到的nginx 相关知识。安装先去官网下载指定版本压缩包https://nginx.org/download/https://blog.csdn.net/qq_42815754/article/details/82980326相关命令常用操作 启动 重启进入 sbin 目录下./nginx 启动nginx./nginx -s re
2021-03-30 15:43:36
134
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人