maboloshi
commented
3 months ago 参考资料
Turbo动态内容加载技术
项目: https://github.com/hotwired/turbo
Turbo 是由 Basecamp 开发的，用于加速网页导航，使页面在用户导航时不进行完整的页面刷新，而是仅更新页面的部分内容。
GitHub 使用了此技术
常用的 Turbo 事件
Turbo（前身为 Turbolinks）提供了一些事件供开发者监听，以便在页面导航或内容更新时执行特定操作。以下是一些常用的 Turbo 事件：
Turbo Events
-
turbo:click:- 在用户点击链接时触发。
- 可以用于在链接点击时执行一些操作，例如记录点击事件。
-
turbo:before-visit:- 在 Turbo 开始导航到新页面之前触发。
- 可以用于取消或重定向导航。
-
turbo:visit:- 在 Turbo 开始导航到新页面时触发。
-
turbo:before-fetch-request:- 在 Turbo 发起网络请求之前触发。
- 可以用于修改请求或添加自定义头。
-
turbo:before-fetch-response:- 在 Turbo 收到网络响应之前触发。
- 可以用于检查响应或处理错误。
-
turbo:before-render:- 在 Turbo 准备将新内容渲染到页面之前触发。
- 可以用于修改即将渲染的内容。
-
turbo:render:- 在 Turbo 将新内容渲染到页面时触发。
-
turbo:load:- 在 Turbo 完成导航并且新内容已经完全渲染到页面时触发。
- 类似于传统的
DOMContentLoaded事件，但在每次 Turbo 导航后都会触发。
-
turbo:frame-load:- 在一个 Turbo Frame 加载完成时触发。
-
turbo:frame-render:- 在一个 Turbo Frame 准备将新内容渲染到页面时触发。
-
turbo:submit-start:- 在表单提交开始时触发。
-
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']");
}
}解释
- 初始加载:
DOMContentLoaded事件确保代码在初始加载时执行。 - Turbo 导航完成:
turbo:load事件确保代码在每次 Turbo 导航完成后执行。 - 其他事件: 其他 Turbo 事件监听器用于在特定导航或请求过程中执行自定义操作。
通过监听这些事件，你可以在 GitHub 页面导航和内容动态加载时执行特定的功能，确保你的代码在合适的时机运行。
buiawpkgew1
document-start脚本载入机制, 导致存在一些 bug, 打算使用window.addEventListener('DOMContentLoaded', init);延迟init的载入 (灵感来自 buiawpkgew1/github-chinese#98)window.addEventListener('DOMContentLoaded', ...)document.addEventListener('turbo:load', ...)代替setTimeout更新page更新逻辑使用Turbo原生的before-fetch-request事件及detail.url对象 最快获取新页面的url. 目前,发现对于需要class筛选的效果不好监视document.body的class属性变化即可githubstatus.com与skills.github.com8cfcfb69getPage函数 c2dd05dtraverseNode和transElement函数 a9979fb8body变化，优化突变翻译处理mutations.filter过程中，提前过滤：字符数据的变更 95b0d8fc进一步探讨MutationObserver.takeRecords()(灵感来自 buiawpkgew1/github-chinese#98)ignoreMutationSelectorPage规则，仅对突变翻译有效使用lastFilteredMutations记录上一次处理的突变记录。上一次traverseNode引发的突变一定在这个lastFilteredMutations里且小于它。在下轮过滤突变时，将lastFilteredMutations作为被过滤的条件之一reIgnoreClass，reIgnoreItemprop，ignoreId，ignoreTag是否区分全局和特定页面page变化的忽略规则、正则规则数组等 e0e5fc547249cc8a0e703bb87fa09b3454a1018d