# 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