# daily_demo **Repository Path**: franky57/daily_demo ## Basic Information - **Project Name**: daily_demo - **Description**: 🕖 daily solution for html/css、javascript、typescript、vue、react 日常问题解决案例合集 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 8 - **Forks**: 1 - **Created**: 2019-12-17 - **Last Updated**: 2024-12-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: JavaScript, TypeScript, Vue, React ## README

日常工作中遇到的部分问题,html/css、js、typescript、vue2/vue3、react 解决案例合集


简体中文 | English


> [!NOTE] > 如果你觉得 `daily_demo` 对你有所帮助,或者你喜欢这个项目,就请给它一颗星 ⭐️, 这对我来说将是一个很大的鼓励,感谢支持! ## 介绍   旨在记录日常工作中,遇到的一些问题,在解决过程中写的案例,又或者是持续学习过程中,遇到有趣并想分享出来的代码,主要涉及前端语言、框架、构建辅助工具、第三方代码库、自己写的工具函数。 ## 清单
📝 纯文本清单(点击展开)

html/css js(18)

第三方库(4)

自定义工具函数(5)

Typescript(6)

vue2(2)

vue3(8)

react(3)

构建、提交工具配置(6)



> 👉🏻 点击下方按钮,查看源码
18
1.案例可视化 2.简易迷宫-数据相关(三维数组) 3.伪代码-CommonJS规范导入函数 require 4.移动端简易适配方案(缩放viewPort或rem方案) 5.canvas 画布demo-api 6.倒计时 7.拖拽原生API 8.后端响应头的 attachment 中通过正则截取文件后缀名 9.解决页面失活导致计时不准问题 10.浏览器存储-indexedDB,存储大量结构化数据 11.大文件,开启多线程分片 12.grid 布局 13.Vscode 插件-Chinese Lorem,生成指定长度随机汉字 14.拟态风格页签(tab-按压) 15.滚动公告 16.通过码元获取字符真实长度并计算所占字节数 17.解决文字阴影锯齿问题 18.模拟上传进度展示(进度条、速率、剩余传输预估时间)

4
1.bignumber.js-解决js运算精度丢失问题 2.dayjs-日期相关计算 3.less、less-loader,css工程化预处理器less 4.nprogress-模拟组件加载时,顶部展示加载进度条

5
1.文件处理相关 2.文件分片线程通信文件 3.string类型数据处理方法 4.其它工具函数 5.手写实现Promise

6
1.文件处理相关方法类型申明 2.文件分片线程通信类型申明 3.string类型数据处理方法类型申明 4.其它工具函数类型申明 5.自定义类型工具 6.实现 Record、Exclude、Extract、Pick、Omit、Partial、Required

2
1.页面表单类型由后端控制(动态表单) 2.选项卡切换附带水波纹loading

8
1.手写实现 vue3 响应式核心测试 2.实现watchEffect 核心,收集响应式数据和用到它们的函数的关联 3.响应式数据处理代理操作 get、set、deleteProperty、has、ownKeys 4.实现 reactive ,利用 Proxy 递归代理,将数据变为响应式 5.响应式数据操作类型 6.实现 computed 7.实现 ref 8.实现 watch

3
1.引入react18、react-dom、react-router-dom、antd、babel-standalone的cdn编译jsx实现预览 2.请求后端的数据,转换适配组件ag-grid-react表格所需 3.基于antd的Button封装自定义图标按钮

6
1.process.argv.slice(2) 获取脚本参数,ts-node 执行ts脚本 2.ts配置文件-tsconfig.json 3.commitlint、cz-git 配置文件(规范和校验提交信息) 4.eslint v19(约束代码规范) 5.prettier(文件内容格式化) 6.lint-staged(代码提交前自动执行指定的 linters 或格式化工具) ## 预览 & 提交 🚀 下载安装 _package.json_ 中的包 ```bash pnpm install ``` - 预览 - 方式 1   下载 _Vscode_ 插件 _Live Server_,点击右下角 _Go Live_ 开启实时预览服务器后,[跳转预览 (http://localhost:5500)](http://localhost:5500)


- 预览 - 方式 2   运行如下终端命令,使用 _serve_ 和 _open-cli_ 开启实时预览服务器并自动在默认浏览器链接[预览地址 (http://localhost:8888)](http://localhost:8888) ```bash # pnpm pnpm start # npm npm start ```


- 开源库 CDN > 特别感谢开源库 CDN [BootCDN](https://www.bootcdn.cn/) 和 [jsdelivr](https://www.jsdelivr.com/) > > ✨ 日常 demo 不用搭建整个工程, npm 对应包运行,直接创建 _html_ 文件引入 开源库 CDN,_script_ 脚本中直接使用即可 > > 🚀 若有页面解析加载,引入 CDN 的同时,使用资源提示符 _defer_ - 避免加载 JS 导致渲染主线程处于空闲状态 ```html ```


- 执行 typescript 文件和规范提交 > 🌐 浏览器不支持 _typescript_ 文件,只会将其视为文件触发下载行为,需要下载 _typecript_ 包,用其自带的 _tsc_ 命令行工具编译成 _js_ 文件才行 > > 💡 因 VSCode 本身对 typescript 语法的支持及高亮显示,因此可直接在 VSCode 中查看文件。 > > 💻 执行 ts 文件,可使用库 _ts-node_ 和 _typescript_,配置 _tsconfig.json_ 文件,执行即 `npx ts-node 文件路径`,若全局安装了 _ts-node_ 可省略 npx 🧩 该案例中,可运行如下终端命令,执行 ts 文件 ```bash # 'typescript/index.ts' 可替换为需要执行的ts文件路径 # pnpm pnpm ts typescript/index.ts # npm npm run ts typescript/index.ts ``` 📋 使用 _husky_、_commitlint_、_commitizen_、_cz-git_ 在终端中添加交互式信息提交导航,以规范 _git_ 提交信息 ```bash # pnpm pnpm commit # npm npm run commit ```

## 文件树概述 ```text daily_demo ├─ .husky # 定义在git提交的指定钩子中额外执行脚本 │ ├─ commit-msg # 提交信息 git commit 时触发的钩子 │ └─ _ │ └─ husky.sh ├─ assets # 资源文件 ├─ dependent_libraries # 第三方库demo ├─ javascript # demo for js ├─ main.ts # pnpm ts main.ts 测试ts文件执行 ├─ react # demo for react ├─ README.md # 文档(简体中文) ├─ README.en.md # 文档(English) ├─ typescript # demo for ts ├─ utils # 自定义公用方法相关 └─ vue # demo for vue ``` ## 参与贡献   🎉🎉🎉   如果你有兴趣,可以分享你在日常工作中遇到的问题和解决思路,或者单纯自己感兴趣的案例,谢谢 🤝🏻 - 分享感兴趣的库、github 地址、案例等 - 分享你在真实项目中遇到的问题(无论你解决与否)- 大家会一起帮你找到解决的思路 - 通过在 Issue 下留言帮助他人 - 分享可以以提 PR 的方式,或者 Issue 留言贴链接等 ## 使用的协议 MIT