我的理解是 Monaco 针对编辑和一次显示一个文件进行了优化，具有固定大小的编辑器，它有自己的滚动条。

相反，我试图构建一个页面，其中多个文件的差异在彼此下方

• 允许显示/隐藏每个文件，最多 ~100 个文件
• 隐藏文件中未更改的部分(如果需要，允许将它们显示为上下文)
• 不是每个文件一个滚动条，而是整个页面一个
• 文件通常只能查看，但应该支持一次编辑一个文件

我意识到这与 Monaco 的初衷大相径庭，但最终似乎会应用相同的视口(viewport)和虚拟渲染技巧，所以也许这在某种程度上是可能的？

我尝试为每个文件创建一个 Monaco 实例，但在大约 30 个实例时开始变得非常缓慢。

一个非常丑陋的解决方法可能是拥有一个 Monaco 实例，连接所有文件，然后使用 ViewZones、自定义行号提供程序和代码折叠提供程序来实现多个文件的效果。这听起来是不是很疯狂，或者真的可行吗？

还有其他建议吗？为什么 IStandaloneDiffEditor 的名称中有 standalone？这是否意味着还有另一种方法可以更高效地创建许多差异编辑器？

最佳答案

Citate from your question: I tried creating one Monaco instance per file, but that starts getting really sluggish around 30 instances.

你的问题的解决方案

正如您所提到的，性能低下。这是因为您的服务器或可能是您的客户端没有足够的内存。您必须向服务器添加更多内存，或者可能向客户端添加更多内存以获得更多性能。因为我没有足够的信息我不能说它是服务器还是客户端。但这种方法效率不高。

Citate from your question: Why does IStandaloneDiffEditor have standalone in the name? Does that mean there is another way to create many diff editors that is more efficient?

什么也没有。 In Wikipedia我找到了独立意味着什么的答案:

Standalone software may refer to:

• Computer software that can work offline, i.e. does not necessarily require network connection to function.
• Software that is not a part of some bundled software.
• A program that run as a separate computer process, not an add-on of an existing process.
• Standalone program, a program that does not require operating system's services to run.
• A portable application, which can be run without the need for installation procedure.

这意味着独立与单个实例无关，您可以拥有该编辑器的多个实例。但是您的计算机上必须有更多内存才能从此编辑器创建 100 个实例。这并不高效，因为你的内存中还有 100 个大的 JavaScript 对象。

在其他用于显示已更改文件之间差异的服务上，它们使用 DOM 进行显示仅对象或带有 DOM对象 + 来自创建此对象的大 JavaScript 对象的一个​​大实例，但不是来自大 JavaScript 对象的额外 100 个大实例。

根据此原则，在这种情况下，您可以使用我在下面推荐的解决方案中的代码，并在后台仅从该差异编辑器中清除一个实例。然后你必须把你所有的 100 个文件一个接一个地放到这个实例中，并在每种情况下从一个文件中复制 DOM 对象:

• <div class="editor original showUnused" ...
• <div class="editor modified showUnused" ...

例如，您可以使用以下代码来做到这一点:

var diffPartContainars = document.querySelector('#container').querySelectorAll('.showUnused'),
    editorOriginalPartHTML,
    editorModifiedPartHTML;

for(var i = diffPartContainars.length; i--;)
{
    var obj = diffPartContainars[i],
        cln = obj.className;

    if(cln.indexOf('editor original') > -1)
    {
        obj.removeAttribute('style');
        editorOriginalPartHTML = obj.outerHTML;
    }
    if(cln.indexOf('editor modified') > -1)
    {
        obj.removeAttribute('style');
        editorModifiedPartHTML = obj.outerHTML;
    }
}

然后您必须从 DOM 之后的每个 editorOriginalPartHTML 和 editorModifiedPartHTML 中删除对象:

• <div class="invisible scrollbar horizontal" ...
• <canvas class="decorationsOverviewRuler" ...
• <div class="visible scrollbar vertical" ...

以及您不能使用的所有其他对象。您可以在添加 editorOriginalPartHTML 时执行此操作和 editorModifiedPartHTML给你的DOM .然后你可以从它周围添加一个 div合适的对象width , height和 style="overflow:auto" .还有一件事你可以做更多:对于这个 div 中的每一个您可以添加一个对象 onclick或 onmouseover监听器，然后替换此 div带有差异编辑器实例的对象 View 。

在我看来，这只是提高效率的一种方式。祝你好运!

推荐的高效解决方案

只有该编辑器的一个实例并通过单击文件名加载新源的一种快速、舒适且高效的方式，如下所示。

var diffEditor = null;
var filesContent =
{
    'SomeJavaScriptFile.js':
    {
        originalContent: 'alert("heLLo world!")',
        modifiedContent: 'alert("hello everyone!")',
        type: 'text/javascript'
    },
    'AnotherJavaScriptFile.js':
    {
        originalContent: 'function open(str)\n{\n\talert(str)\n}',
        modifiedContent: 'function output(value)\n{\n\tconsole.log(value)\n}',
        type: 'text/javascript'
    }
};

document.querySelector('#files').addEventListener('change', function(e)
{
    var fileName = this.options[this.selectedIndex].text,
        file = filesContent[fileName];

    openInDiffEditor(file);
});

function openInDiffEditor(file)
{
    if(!diffEditor)
        diffEditor = monaco.editor.createDiffEditor(document.querySelector('#container'));

    diffEditor.setModel({
        original: monaco.editor.createModel(file.originalContent, file.type),
        modified: monaco.editor.createModel(file.modifiedContent, file.type)
    });
}

//open the first file in select list:
var firstFileName = document.querySelector('#files').options[0].text;
openInDiffEditor(filesContent[firstFileName]);

<p>Please select one file on the left list to see the file differences after changes.</p>
<select id="files" size="3">
    <option selected>SomeJavaScriptFile.js</option>
    <option>AnotherJavaScriptFile.js</option>
</select>

<div id="container" style="height:100%;"></div>

您必须通过 AJAX 加载文件内容。但如果您不明白如何加载它，请问我，我会写出来。

此推荐方案截图

关于javascript - 如何在一页上有效地拥有多个只读的摩纳哥差异 View ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51566332/