>允许显示/隐藏每个文件,最多约100个文件
>隐藏未更改的文件部分(如果需要,允许将其显示为上下文)
>每个文件没有一个滚动条,但整个页面只有一个滚动条
>这些文件通常只能查看,但一次只能支持一个文件的编辑
我意识到这与摩纳哥的构建完全不同,但最终看起来好像相同的视口和虚拟渲染技巧都适用,所以也许它可能在某种程度上可行？
我尝试为每个文件创建一个Monaco实例,但是在30个实例中开始变得非常缓慢.
一个非常丑陋的解决方法可能是拥有一个Monaco实例,连接所有文件,然后使用ViewZones,自定义行号提供程序和代码折叠提供程序来实现多个文件的印象.这听起来有点疯狂,还是真的有效？
还有其他建议吗？为什么IStandaloneDiffEditor在名称中是独立的？这是否意味着还有另一种方法来创建更高效的差异编辑器？
解决方法
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.
这意味着standalone与单个实例无关,您可以拥有此编辑器的多个实例.但是,您必须在计算机上拥有更多内存才能从此编辑器创建100个实例.而这效率并不高,因为你的内存中有100个大的JavaScript对象.
在其他服务上显示已更改文件之间的区别,它们仅使用DOM对象或使用DOM对象创建此对象的大型JavaScript对象中的一个大实例,而不是来自大型JavaScript对象的其他100个大实例.
在这种情况下,根据此原则,您可以使用我在下面推荐的解决方案中的代码,并在后台清除此差异编辑器中的一个实例.然后你必须将所有100个文件一个接一个地放到这个实例中,然后从DOM对象后面的一个文件中复制：
>< div class =“编辑原创showUnused”......
>< div class =“编辑器修改了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 =“隐形滚动条水平”...
>< canvas class =“decorationsOverviewRuler”......
>< div class =“可见滚动条垂直”...
和你不能使用的所有其他对象.将editorOriginalPartHTML和editorModifiedPartHTML添加到DOM时,可以执行此操作.然后你可以从中添加一个具有合适宽度,高度和样式= div =“overflow：auto”的div对象.还有一件事你可以做得更多：对于每个div对象,你可以添加一个onclick或onmouSEOver监听器,然后用差异编辑器实例替换这个div对象视图.
在我看来,这只是提高效率的一种方式.祝好运！
推荐的有效解决方案
快速,舒适,高效的方式只有一个这个编辑器的实例,并在点击文件名时加载新的源代码,如下所示.
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加载文件内容.但如果您不明白如何加载它,请问我,我会写它.
此推荐解决方案的屏幕截图