开发工具【免费下载链接】isomorphic-gitA pure JavaScript implementation of git for node and browsers!项目地址https://gitcode.com/gh_mirrors/is/isomorphic-git点击查看免费下载导读isomorphic-git纯 JavaScript 实现的 Git可在 Node.js 与浏览器中运行允许你通过注册一个emitter插件来接收 Git 操作过程中的两类事件来自远端服务器的message文本消息以及可用于驱动进度条动画的progress数值事件。本文以website/versioned_docs/version-0.70.7/plugin_emitter.md文档为主线完整讲解这两类事件的数据形态、Node.js 控制台与浏览器 DOM 两种接入方式并结合仓库源码说明emitter插件的最小实现契约以及它与onProgress/onMessage回调、GitProgressEvent类型之间的关系。emitter 插件解决什么问题在默认情况下clone、fetch、push、pull这些网络型命令是静默的它们执行完返回结果中途发生了什么、远端服务器反馈了什么调用方无从感知。emitter插件正是为此设计的事件出口——你初始化isomorphic-git时传入一个事件发射器EventEmitter之后上述命令执行期间会持续向它发出两类事件事件名数据类型含义messagestring远端服务器在fetch/push请求过程中生成并回传的文本消息。典型场景是远端仓库配置了自定义 git-hooks如pre-receive、post-receive钩子向控制台打印内容这些输出会通过该事件转发给调用方progress进度事件对象数值型进度事件loaded/total可用于驱动进度条式动画重要约束同一时刻只能注册一个emitter插件。需要特别说明的是progress事件的数值特性事件不保证按顺序到达也不保证数值单调递增。原因在于许多 Git 命令如clone内部其实是多个子命令的组合fetchindexPackcheckout要对这类复合任务计算出一个统一的百分比本身就非常困难。原文档也明确指出这一局限未来会通过提供更细粒度、能精确表达复杂任务不同阶段phase的进度事件来解决——事实上仓库当前的进度事件数据里已经内置了phase字段详见下文源码印证小节可以用来弥补单一百分比的不足。场景一Node.js 控制台应用——把服务器消息打到标准输出如果你正在编写一个控制台CLI应用希望在clone/push等操作时把远端服务器打印的任何消息原样输出到标准输出只需三步创建EventEmitter、注册为emitter插件、监听message事件。// 本示例适用于 Node.js const EventEmitter require(events) const git require(isomorphic-git) const emitter new EventEmitter() git.plugins.set(emitter, emitter) emitter.on(message, message { console.log(message) })这里使用 Node 内置的events模块提供的EventEmitter即可无需引入任何额外依赖。git.plugins.set(emitter, emitter)完成插件注册之后的git.clone(...)、git.push(...)等调用便会在执行期间把服务器消息路由到这个 emitter 上。场景二浏览器 Web 应用——同时展示最新消息与进度条如果你在编写 Web 应用想既显示最新的服务器消息、又展示一个可视化进度条可以在 DOM 层直接响应这两类事件。下面是原文档给出的框架示例其中省略了fs插件的配置与clone的完整参数聚焦于 emitter 相关的核心逻辑html div idcloning-message/div div span idcloning-percent/span progress idcloning-progress-bar value0 max100/ /div script typemodule // 注意Webpack 会自动用 npm 的 events 包为 Node 内置的 events 模块做 polyfill import EventEmitter from events import { plugins, clone } from isomorphic-git plugins.set(emitter, emitter) // 在可运行示例中还需要配置 fs 插件 const doClone async () { const onMessage message { let el document.getElementById(cloning-message) el.innerText message } const onProgress progress { let el document.getElementById(cloning-progress-bar) el.setAttribute(max, progress.total) el.setAttribute(value, progress.loaded) let span document.getElementById(cloning-percent) span.innerText Math.floor(100 * progress.loaded / progress.total) % } emitter.on(message, onMessage) emitter.on(progress, onProgress) // 在可运行示例中请填入 clone 命令的完整参数 await clone({...}) emitter.off(message, onMessage) emitter.off(progress, onProgress) } /script /html这段示例有几处值得展开的实战细节进度条的换算方式progress事件携带loaded已加载字节数与total总字节数两个数值字段示例用Math.floor(100 * loaded / total) %计算百分比。原文档特别提醒progress事件不保证有序、不保证递增因此直接把它映射成单一百分比可能产生百分比回跳的视觉现象对于这种场景更稳妥的做法是如下文的onProgress文档所示按phase阶段分别展示或用不确定进度条indeterminate形态显示loaded。监听器的生命周期管理示例在操作开始前emitter.on(...)注册监听器操作完成后emitter.off(...)移除避免监听器泄漏导致后续操作重复触发回调。浏览器端 polyfillNode 的events模块在浏览器中需要 polyfillWebpack 会自动完成这一替换示例代码也以注释形式标注了这一点。实现你自己的 emitter 插件原文档给出了一个重要提示isomorphic-git 并不监听事件它只负责发出emit事件。因此你的emitter对象技术上只需实现emit方法即可完整的类型契约如下interface GitEmitterPlugin { emit (event: string, data: any): void; }也就是说你完全可以不引入完整的 EventEmitter 对象用一个普通的、只实现了emit的普通对象来顶替。原文档给出了等价的简化写法const git require(isomorphic-git) // 这里无需使用完整的 EventEmitter 对象 const emitter { emit (event, message) { if (event message) { console.log(message) } } } git.plugins.set(emitter, emitter)这从侧面印证了插件系统的设计取向emitter只是 isomorphic-git 对外单向输出的通道事件流的消费方式完全由你自定义——可以是 Node 的EventEmitter、可以是某个轻量事件库、甚至可以是直接处理事件的普通函数对象。源码印证emitter 在命令调用链中的位置要理解emitter插件的运行机制可以沿着仓库源码追踪它在命令调用链中的传递方式进度事件的数据结构定义。在 src/typedefs-http.js 中GitProgressEvent被定义为一个包含三个字段的对象/** * typedef {Object} GitProgressEvent * property {string} phase * property {number} loaded * property {number} total */也就是说progress事件携带的数据不仅仅是loaded/total两个数值还包含一个描述当前所处阶段如Receiving objects、Resolving deltas等的phase字符串。这与原文档未来提供更细粒度、能表达不同阶段的进度事件的展望相呼应——phase字段事实上已经存在可以在 UI 中作为进度条旁的阶段标签或为每个 phase 单独维护一个进度条。emitter 向下层透传。在 src/storage/readPackIndex.js 中可以看到readPackIndex及其内部loadPackIndex都接收emitter与emitterPrefix两个参数说明 emitter 会沿着命令实现层层传递到存储层用于在读取/索引 packfile 等耗时环节中发出进度事件。命令层同时支持 emitter 与回调两种方式。以 src/commands/fetch.js 为例_fetch的签名里同时声明了onProgress类型为ProgressCallback即接收GitProgressEvent的回调与onMessageMessageCallback两个可选参数。这意味着该版本仓库实际提供了两种消费进度的途径全局的emitter插件事件流以及每次调用命令时传入的onProgress/onMessage回调。仓库文档 docs/onProgress.md 与 docs/onMessage.md 对后一种方式有更详细的示例例如onProgress回调中根据event.total是否存在在精确百分比进度条与不确定进度条之间切换。插件系统的统一注册入口。与fs、credentialManager等插件一样emitter通过git.plugins.set(emitter, emitter)CommonJS或plugins.set(emitter, emitter)ES Module注册参见仓库中 plugin_fs 文档 与 plugin_credentialManager 文档 中一致的注册模式。实用建议用 phase 代替单一百分比结合原文档的注意事项与仓库中GitProgressEvent的实际结构这里给出几点实战建议不要假设进度单调递增progress事件的数值既可能回退也可能在多个子命令fetch、indexPack、checkout之间重置。若必须展示全局百分比建议自己维护一个分段权重算法或干脆按phase分段展示。优先使用phase作为展示维度原文档建议可以把phase作为进度条旁的标签或为每个阶段维护独立进度条仓库文档 docs/onProgress.md 的示例也展示了有total时显示精确百分比、无total时显示不确定进度的兜底策略这与progress事件数值不可预测的特性是配套的。message 事件是远程钩子输出的窗口如果远端服务器配置了打印型 git-hooksmessage事件是拿到这些输出的唯一途径在 CLI 工具中直接console.log转发即可。小结emitter插件是 isomorphic-git 面向过程可视化场景的一等公民接口message事件打通了远端 git-hooks 的输出通道progress事件数据结构为{ phase, loaded, total }为进度条类 UI 提供了原始数值。通过git.plugins.set(emitter, emitter)一行注册你便能在clone、fetch、push、pull全流程中获得事件流而只需实现emit方法的极简契约也让这个插件可以适配 Node、浏览器乃至任意自定义事件分发器的运行环境。理解事件不保证有序递增、命令是多子命令复合这两个内在约束是写出不闪烁、不误导用户的进度 UI 的关键。赞分享开发工具【免费下载链接】isomorphic-gitA pure JavaScript implementation of git for node and browsers!项目地址https://gitcode.com/gh_mirrors/is/isomorphic-git点击查看免费下载相关推荐isomorphic-git onProgress 回调详解为 clone/fetch/checkout 实现细粒度进度显示isomorphic git onProgress 回调详解为 clone/fetch/checkout 实现细粒度进度显示 本文基于 isomorphic开发工具Anime.js时间轴历史事件与进度展示动画Anime.js时间轴历史事件与进度展示动画 引言为什么需要专业的时间轴动画 在现代Web应用中历史时间线、项目进度展示、产品发展历程等场景都需要清晰的前端如何选择最佳OCR框架PP-OCRv6_small_rec_onnx与Tesseract、EasyOCR深度对比指南如何选择最佳OCR框架PP OCRv6_small_rec_onnx与Tesseract、EasyOCR深度对比指南 在当今数字化时代光学字符识别OCR上一篇3分钟掌握PowerShell自动化部署Microsoft Office完整指南下一篇Path of Building PoE2从萌新到大佬的完整构建指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考