问题表现

1. 打开 modal 后，点击输入框，软键盘弹出。
2. 关闭软键盘后：
   • modal 内容未能恢复到正确位置。
   • 元素“视觉上”在某一位置，但实际点击响应区域发生偏移（如按钮点击无效或响应错位）。

解决方法

经过多种尝试，发现仅通过 CSS 布局无法彻底解决该问题。

防抖（debounce）和节流（throttle）都是前端开发中用于优化频繁触发事件（如 scroll、resize、input、mousemove 等）的方法，但它们的应用场景和实现思路所有不同。

在 React 项目中，有时我们需要处理 JSX 字符串并将其转换为真正的 React 元素，比如从 CMS 获取模板或构建可视化编辑器时。本文介绍三种实用方案及其优缺点。

1. react-jsx-parser：安全简单型

react-jsx-parser 是一个简单安全的方案，

不是不想写 commit message，而是每次审阅代码+组织语言去准确描述比较难，耗费精力和时间。
让 Cursor AI 来辅助撰写，提高效率，也学习如何用 Commits 规范和英文去总结和表达。

可在 wrangler.toml 文件中直接配置开发环境变量。例如：

[env.development]
[env.development.vars]
ENVIRONMENT = "development"
GITHUB_CLIENT_ID = "your github client id" # 自定义环境变量示例

但密钥等敏感信息，建议放在独立的开发环境变量配置文件 .dev.vars 中，
并将其从 git 中排除（在.gitignore 文件中添加 .dev.vars 文件路径），
以防止密钥泄露。

如何将所有的 git commits 的描述导出到文本文件？

示例：git log --pretty=format:"%h %an %ad %s" --date=short > commits.txt

参数说明：

• --pretty=format: 指定输出格式，其中

  • %h 是提交的简短哈希
  • %s 是提交的摘要/标题（summary）
  • %b，提交的描述（body）
  • %n，换行符
  • %an 是提交的作者名字
  • %ad 提交日期

• --date=short 选项下会使用简短的日期格式
  默认的日期格式示例 Sun Oct 6 00:56:25 2024 +0800，简短的日期格式示例 2024-10-06

创建一个基本的 JavaScript 开发环境，以满足两个要求：

• 使用 ES6（或最新的 ECMAScript 版本）语法特性
• 支持单元测试

条件

1. 需要系统中已安装了 Node.js。以能够在本地运行 JavaScript 代码，以及可以使用 npm 安装和管理开发依赖项。
   可访问 https://nodejs.org/ 官网，参照指示安装 Node.js

创建和配置开发环境

创建项目目录

mkdir my-js-project

初始化项目配置文件

cd my-js-project
npm init -y

这会创建一个 package.json 文件，通过此跟踪项目的依赖、以及相关开发环境的配置。

假设有目录 dirA，之前该目录已经有过 commit 记录，当我们修改文件结构，不再需要跟踪和记录 dirA 路径下的文件变化时，

1. 首先是将路径添加 .gitignore 文件中。（但此时 git 仍然会 tracking 文件变化）

还需要执行以下步骤来处理：

<script> 标签支持的属性有 type, crossorigin, integrity, async, defer，
以下是各属性的作用和示例：

type (可选)

指定外部文件中使用的脚本语言的内容类型（也称为 MIME 类型）。
通常情况下，可以使用默认值 “text/javascript”。使用案例如下：

使用 flex 布局，两端元素默认内容宽度，中间元素自动扩充到最大宽度。
|left| <- center -> |right|

HTML

<div class="h">
 <div class="left">左/上</div>
 <div class="middle">中</div>
 <div class="right">右/下</div>
</div>

<br />

<div class="v">
 <div class="left">左/上</div>
 <div class="middle">中</div>
 <div class="right">右/下</div>
</div>

CSS

div {
  border: 1px solid #ccc;
}

.h {
  /* 水平/横向 */
  display: flex;
  flex-direction: row;
}

.v {
  /* 垂直/纵向 */
  display: flex;
  flex-direction: column;
  height: 300px; /* 需要设置固定高度 */
}

.middle {
  flex: 1 1 auto; /* flex-grow | flex-shrink | flex-basis */
  align-items: center; /* 元素水平居中 */
  text-align: center; /* 文本水平居中 */
  align-content: center; /* 元素垂直居中 */
}
.left,
.right {
  /* nothing */
}