Skip to content

Commit 1b5f5d3

Browse files
CC11001100CC11001100
authored
Merge pull request #51 from JSREI/feature/typescript-conversion
重构为使用TypeScript
2 parents ec6fab6 + bd115c6 commit 1b5f5d3

File tree

132 files changed

+10726
-2385
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

132 files changed

+10726
-2385
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"codeQL.githubDatabase.download": "never"
3+
}

‎IMPLEMENTATION_PLAN.md‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
# 语言切换实时更新实现计划
2+
3+
## 1. 当前状态分析
4+
5+
### 1.1 现有语言切换流程
6+
1. 语言配置存储在 `Config` 类中的 `language` 字段
7+
2. 语言切换通过 `GlobalOptionsComponent` 中的下拉框实现
8+
3. 切换后调用 `oldConfig.persist()` 保存配置
9+
4. 当前实现会重新加载整个配置界面 (`configComponent.show()`)
10+
11+
### 1.2 配置管理相关组件
12+
- `Config` 类：管理全局配置
13+
- `ConfigurationComponent`：主配置界面
14+
- `GlobalOptionsComponent`：全局选项组件
15+
- `DebuggerManagerComponent`：调试器管理组件
16+
- `AboutComponent`：关于页面组件
17+
18+
### 1.3 语言资源管理
19+
- 语言定义在 `language.ts` 中
20+
- 包含 `chinese` 和 `english` 两个语言对象
21+
- 通过 `getLanguage()` 和 `getLanguageByGlobalConfig()` 获取语言配置
22+
23+
## 2. 问题分析
24+
25+
### 2.1 当前实现的问题
26+
1. 语言切换后需要重新加载整个配置界面
27+
2. 用户体验不够流畅，会有明显的闪烁
28+
3. 可能丢失用户在其他选项上的未保存更改
29+
30+
### 2.2 技术限制
31+
1. 需要保持现有的配置持久化机制
32+
2. 需要确保所有组件的语言一致性
33+
3. 需要处理动态创建的组件
34+
35+
## 3. 解决方案
36+
37+
### 3.1 核心思路
38+
1. 实现一个语言更新事件机制
39+
2. 所有需要显示文本的组件订阅语言更新事件
40+
3. 语言切换时触发更新事件，各组件响应式更新文本
41+
42+
### 3.2 具体实现步骤
43+
44+
#### 3.2.1 创建语言更新事件管理器
45+
```typescript
46+
// 创建 LanguageEventManager 类
47+
- 实现观察者模式
48+
- 提供订阅和取消订阅方法
49+
- 提供触发更新的方法
50+
```
51+
52+
#### 3.2.2 修改基础组件
53+
1. 为所有基础组件添加语言更新支持：
54+
- `TabComponent`
55+
- `TipsComponent`
56+
- `SelectComponent`
57+
- `CheckboxComponent`
58+
- `InputComponent`
59+
- `TextareaComponent`
60+
61+
2. 实现组件的更新方法：
62+
```typescript
63+
interface LanguageUpdateable {
64+
updateLanguage(language: Language): void;
65+
}
66+
```
67+
68+
#### 3.2.3 修改主要组件
69+
1. `ConfigurationComponent`:
70+
- 订阅语言更新事件
71+
- 实现 `updateLanguage` 方法
72+
- 更新标题、按钮等文本
73+
74+
2. `GlobalOptionsComponent`:
75+
- 订阅语言更新事件
76+
- 实现 `updateLanguage` 方法
77+
- 更新所有选项的标签和提示文本
78+
79+
3. `DebuggerManagerComponent`:
80+
- 订阅语言更新事件
81+
- 实现 `updateLanguage` 方法
82+
- 更新调试器列表的文本
83+
84+
4. `AboutComponent`:
85+
- 订阅语言更新事件
86+
- 实现 `updateLanguage` 方法
87+
- 更新关于页面的所有文本
88+
89+
#### 3.2.4 修改语言切换逻辑
90+
1. 在 `GlobalOptionsComponent` 中：
91+
```typescript
92+
// 语言选择回调中
93+
- 保存新的语言设置
94+
- 获取新的语言配置
95+
- 触发语言更新事件
96+
```
97+
98+
### 3.3 优化方案
99+
1. 缓存语言资源，避免重复加载
100+
2. 使用防抖处理频繁的语言切换
101+
3. 添加语言切换动画效果
102+
103+
## 4. 测试计划
104+
105+
### 4.1 单元测试
106+
1. 测试语言更新事件机制
107+
2. 测试各组件的语言更新方法
108+
3. 测试配置保存和加载
109+
110+
### 4.2 集成测试
111+
1. 测试完整的语言切换流程
112+
2. 测试多组件协同工作
113+
3. 测试边界情况处理
114+
115+
### 4.3 性能测试
116+
1. 测试语言切换的响应时间
117+
2. 测试内存占用情况
118+
3. 测试大量组件同时更新的性能
119+
120+
## 5. 实施步骤
121+
122+
### 5.1 第一阶段：基础架构
123+
1. 实现 LanguageEventManager
124+
2. 修改基础组件
125+
3. 添加语言更新接口
126+
127+
### 5.2 第二阶段：组件适配
128+
1. 改造 ConfigurationComponent
129+
2. 改造 GlobalOptionsComponent
130+
3. 改造 DebuggerManagerComponent
131+
4. 改造 AboutComponent
132+
133+
### 5.3 第三阶段：优化和测试
134+
1. 实现性能优化
135+
2. 执行测试计划
136+
3. 修复问题和优化
137+
138+
## 6. 注意事项
139+
140+
### 6.1 兼容性考虑
141+
1. 确保旧版本配置的兼容性
142+
2. 处理语言资源加载失败的情况
143+
3. 考虑浏览器兼容性
144+
145+
### 6.2 性能考虑
146+
1. 最小化DOM操作
147+
2. 优化事件触发频率
148+
3. 合理使用缓存
149+
150+
### 6.3 用户体验
151+
1. 添加适当的过渡动画
152+
2. 提供清晰的反馈
153+
3. 确保操作的可回退性
154+
155+
## 7. 后续优化
156+
157+
### 7.1 可能的扩展
158+
1. 支持更多语言
159+
2. 添加语言包动态加载
160+
3. 支持自定义翻译
161+
162+
### 7.2 监控和维护
163+
1. 添加语言切换的日志记录
164+
2. 监控性能指标
165+
3. 收集用户反馈

‎migrate-jquery.sh‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
#!/bin/bash
2+
3+
# 查找所有引用jquery-adapter的文件
4+
FILES=$(find /Users/cc11001100/github/JSREI/js-script-hook/src -type f -name "*.ts" | xargs grep -l "jquery-adapter")
5+
6+
# 替换所有文件中的jQuery引用为原生DOM API
7+
for FILE in $FILES; do
8+
echo "处理文件: $FILE"
9+
10+
# 替换引入语句
11+
sed -i '' 's/import { jQuery as \$, JQuery } from .*.\/utils\/jquery-adapter.*/import { dom } from "..\/..\/..\/..\/utils\/dom-utils";/g' "$FILE"
12+
sed -i '' 's/import { jQuery as \$ } from .*.\/utils\/jquery-adapter.*/import { dom } from "..\/..\/..\/..\/utils\/dom-utils";/g' "$FILE"
13+
14+
# 替换JQuery类型为HTMLElement
15+
sed -i '' 's/JQuery<HTMLElement>/HTMLElement/g' "$FILE"
16+
sed -i '' 's/: JQuery</: HTMLElement/g' "$FILE"
17+
18+
# 替换$()选择器为document.querySelector()或document.createElement()
19+
sed -i '' 's/\$(\(.*\))/dom(\1)/g' "$FILE"
20+
21+
# 替换常见的jQuery方法为原生DOM方法
22+
sed -i '' 's/\.on(/\.addEventListener(/g' "$FILE"
23+
sed -i '' 's/\.off(/\.removeEventListener(/g' "$FILE"
24+
sed -i '' 's/\.append(/\.appendChild(/g' "$FILE"
25+
sed -i '' 's/\.html(/\.innerHTML = /g' "$FILE"
26+
sed -i '' 's/\.addClass(/\.classList.add(/g' "$FILE"
27+
sed -i '' 's/\.removeClass(/\.classList.remove(/g' "$FILE"
28+
sed -i '' 's/\.toggleClass(/\.classList.toggle(/g' "$FILE"
29+
sed -i '' 's/\.attr(\([^,]*\))/\.getAttribute(\1)/g' "$FILE"
30+
sed -i '' 's/\.attr(\([^,]*\), \(.*\))/\.setAttribute(\1, \2)/g' "$FILE"
31+
sed -i '' 's/\.css(\([^,]*\), \(.*\))/\.style.setProperty(\1, \2)/g' "$FILE"
32+
33+
echo "完成处理: $FILE"
34+
done
35+
36+
echo "所有文件处理完毕"

0 commit comments

Comments
 (0)