ToDo：近期计划

[maboloshi]

• [x] 进一步优化中文环境设置
  • [x] 当前使用document-start脚本载入机制, 导致存在一些 bug, 打算使用window.addEventListener('DOMContentLoaded', init);延迟init的载入 (灵感来自 buiawpkgew1/github-chinese#98)
• [x] 使用 ~~window.addEventListener('DOMContentLoaded', ...)~~ document.addEventListener('turbo:load', ...)代替setTimeout
• [ ] ~~更新page更新逻辑~~
  • [ ] ~~使用Turbo原生的before-fetch-request事件及detail.url对象 最快获取新页面的url. 目前,发现对于需要class筛选的效果不好~~
  • [ ] ~~监视document.body的class属性变化即可~~
• [ ] 词库清理计划（#115）
• [x] 翻译 GitHub 一些附属网站，如 githubstatus.com 与 skills.github.com 8cfcfb69
• [x] 修复 https://github.com/maboloshi/github-chinese/discussions/146#discussioncomment-9855443 ，并优化getPage函数 c2dd05d
• [x] 优化traverseNode和transElement函数 a9979fb8
• [ ] 监听body变化，优化突变翻译处理
  • [x] 在mutations.filter过程中，提前过滤：
    • [x] 特定页面的特定元素，包括不限于修复代码新建和编辑页面触发逗号 bug 的问题；（ 95b0d8fc , 0ed0cf94 ）
    • [x] 仅对特定页面启用筛选字符数据的变更 95b0d8fc
  • [ ] 进一步探讨MutationObserver.takeRecords() (灵感来自 buiawpkgew1/github-chinese#98)

[maboloshi]

参考资料

Turbo动态内容加载技术

项目: https://github.com/hotwired/turbo

Turbo 是由 Basecamp 开发的，用于加速网页导航，使页面在用户导航时不进行完整的页面刷新，而是仅更新页面的部分内容。

GitHub 使用了此技术

常用的 Turbo 事件

Turbo（前身为 Turbolinks）提供了一些事件供开发者监听，以便在页面导航或内容更新时执行特定操作。以下是一些常用的 Turbo 事件：

Turbo Events

1. turbo:click:

   • 在用户点击链接时触发。
   • 可以用于在链接点击时执行一些操作，例如记录点击事件。

2. turbo:before-visit:

   • 在 Turbo 开始导航到新页面之前触发。
   • 可以用于取消或重定向导航。

3. turbo:visit:

   • 在 Turbo 开始导航到新页面时触发。

4. turbo:before-fetch-request:

   • 在 Turbo 发起网络请求之前触发。
   • 可以用于修改请求或添加自定义头。

5. turbo:before-fetch-response:

   • 在 Turbo 收到网络响应之前触发。
   • 可以用于检查响应或处理错误。

6. turbo:before-render:

   • 在 Turbo 准备将新内容渲染到页面之前触发。
   • 可以用于修改即将渲染的内容。

7. turbo:render:

   • 在 Turbo 将新内容渲染到页面时触发。

8. turbo:load:

   • 在 Turbo 完成导航并且新内容已经完全渲染到页面时触发。
   • 类似于传统的 DOMContentLoaded 事件，但在每次 Turbo 导航后都会触发。

9. turbo:frame-load:

   • 在一个 Turbo Frame 加载完成时触发。

10. turbo:frame-render:

    • 在一个 Turbo Frame 准备将新内容渲染到页面时触发。

11. turbo:submit-start:

    • 在表单提交开始时触发。

12. turbo:before-cache:

    • 在页面被缓存之前触发。
    • 可以用于在页面缓存之前执行一些清理操作。

示例代码

以下是如何使用这些事件的示例代码：

// 在页面初始加载完成时执行
window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOMContentLoaded');
    executeTranslation();
});

// 在每次 Turbo 导航完成并渲染新内容后执行
document.addEventListener('turbo:load', (event) => {
    console.log('Turbo load');
    executeTranslation();
});

// 监听其他 Turbo 事件
document.addEventListener('turbo:click', (event) => {
    console.log('Turbo click', event);
});

document.addEventListener('turbo:before-visit', (event) => {
    console.log('Turbo before visit', event);
});

document.addEventListener('turbo:visit', (event) => {
    console.log('Turbo visit', event);
});

document.addEventListener('turbo:before-fetch-request', (event) => {
    console.log('Turbo before fetch request', event);
});

document.addEventListener('turbo:before-fetch-response', (event) => {
    console.log('Turbo before fetch response', event);
});

document.addEventListener('turbo:before-render', (event) => {
    console.log('Turbo before render', event);
});

document.addEventListener('turbo:render', (event) => {
    console.log('Turbo render', event);
});

document.addEventListener('turbo:frame-load', (event) => {
    console.log('Turbo frame load', event);
});

document.addEventListener('turbo:frame-render', (event) => {
    console.log('Turbo frame render', event);
});

document.addEventListener('turbo:submit-start', (event) => {
    console.log('Turbo submit start', event);
});

document.addEventListener('turbo:before-cache', (event) => {
    console.log('Turbo before cache', event);
});

function executeTranslation() {
    // 使用 CSS 选择器找到页面上的元素，并将其文本内容替换为预定义的翻译
    transBySelector();
    if (page === "repository") { // 仓库简介翻译
        transDesc(".f4.my-3");
    } else if (page === "gist") { // Gist 简介翻译
        transDesc(".gist-content [itemprop='about']");
    }
}

解释

1. 初始加载: DOMContentLoaded 事件确保代码在初始加载时执行。
2. Turbo 导航完成: turbo:load 事件确保代码在每次 Turbo 导航完成后执行。
3. 其他事件: 其他 Turbo 事件监听器用于在特定导航或请求过程中执行自定义操作。

通过监听这些事件，你可以在 GitHub 页面导航和内容动态加载时执行特定的功能，确保你的代码在合适的时机运行。

[buiawpkgew1]

• 监听body变化，优化突变翻译处理

处理的一些建议？（来自通义灵码）

1. 优化MutationObserver配置

确保只监控必要的属性和类型的变更，这可以减少MutationObserver的开销。

2. 单一MutationObserver实例

尽可能使用单一的MutationObserver实例来监控所有需求，避免创建多个观察者，因为这可能会消耗更多资源。

3. 缓存翻译结果

代码中已经包含了translationCache的缓存机制。确保在翻译规则发生变化时更新或清除缓存。

4. 精炼翻译逻辑

优化翻译逻辑，采用更高效的字符串操作技巧，并尽量减少DOM查找次数。

5. 减少不必要的DOM变动

翻译元素时，尽量减少DOM的修改次数。批量更新可以提高效率。

6. 异步调用使用Async/Await

对于如translateDescText中的异步网络请求，考虑使用async/await来增强可读性和错误处理。

7. 错误处理

加强错误处理，确保代码的健壮性。

8. 性能考量

注意性能影响，特别是在处理大型文档或频繁的DOM变更时。

[maboloshi]

• 监听body变化，优化突变翻译处理 处理的一些建议？（来自通义灵码）

哈哈果然是AI, 不过可能还是chatGPT跟智能一点

[maboloshi]

• 监听body变化，优化突变翻译处理

处理的一些建议？（来自通义灵码）

目前，考虑

1. 使用lastFilteredMutations记录上一次处理的突变记录。上一次traverseNode引发的突变一定在这个lastFilteredMutations里且小于它
2. 在下轮过滤突变时，将lastFilteredMutations作为被过滤的条件之一
3. 优化过滤规则，尽量减少不必要的 DOM 操作和数组检查，提升整体性能。