重构 Ace 编辑器

Question

我正在尝试简化问题底部显示的以下代码。这里的问题如下：

如何使 Ace 编辑器只创建一次，而不是每个编辑器一次。
对于Ace Editor的setValue，每个编辑器都从后端返回的对象中提取他们的特定信息（我无法访问后端）。可以看到代码中的对象为widgetEditor和featureEditor。
代码现在可以正常工作，但我相信它可以简化很多。
Ace 编辑器之间的唯一变量是 setValue、getSession 和 ace.edit 选项。
我检查了以下 link，它对 ace.edit 选项有帮助，但对其他 2 个值没有帮助 Can Ace Editor support multiple code editors in one page?

因此，可以采取哪些措施来减少此处的代码量，同时仍能使 ace 编辑器正常工作。基本上，在同一页面上它显示了 10 个 ace 编辑器，3 个用于 widgetEditor 对象，7 个用于 featureEditor（如代码所示）。

    $.post(engineUrl, {
        systemDevCall: true,
        engineApiEnabled: engineApiEnabled,
        engineDataSplitter: engineDataSplitter,
        systemDevType: 'widgetCall', 
        systemDevValue: [widgetIdSelected,widgetSelected]
    }, 
    function(data) {
        tabSelected = 'widget';
        if (engineApiEnabled != 1) {
            var dataSplit = data.split(engineDataSplitter);
            var data = dataSplit[1];
        }

        // Parse Data
        var widgetEditor = JSON.parse(data);


        // PHP Editor
        phpeditor = ace.edit("phpcode");
        phpeditor.$blockScrolling = Infinity;
        phpeditor.setValue(widgetEditor.php);
        phpeditor.setShowPrintMargin(false);
        phpeditor.setTheme("ace/theme/monokai");
        phpeditor.getSession().setMode("ace/mode/php");
        phpeditor.setFadeFoldWidgets();
        phpeditor.session.getScrollTop();
        phpeditor.session.setScrollTop(1);
        phpeditor.session.getScrollLeft();
        phpeditor.session.setScrollLeft(1);
        phpeditor.focus();
        phpeditor.navigateFileStart();

        // CSS Editor
        csseditor = ace.edit("csscode");
        csseditor.$blockScrolling = Infinity;
        csseditor.setValue(widgetEditor.css);
        csseditor.setShowPrintMargin(false);
        csseditor.setTheme("ace/theme/monokai");
        csseditor.getSession().setMode("ace/mode/css");
        csseditor.setFadeFoldWidgets();
        csseditor.session.getScrollTop();
        csseditor.session.setScrollTop(1);
        csseditor.session.getScrollLeft();
        csseditor.session.setScrollLeft(1);
        csseditor.focus();
        csseditor.navigateFileStart();

        // JAVASCRIPT Editor
        jseditor = ace.edit("jscode");
        jseditor.$blockScrolling = Infinity;
        jseditor.setValue(widgetEditor.js);
        jseditor.setShowPrintMargin(false);
        jseditor.setTheme("ace/theme/monokai");
        jseditor.getSession().setMode("ace/mode/javascript");
        jseditor.setFadeFoldWidgets();
        jseditor.session.getScrollTop();
        jseditor.session.setScrollTop(1);
        jseditor.session.getScrollLeft();
        jseditor.session.setScrollLeft(1);
        jseditor.focus();
        jseditor.navigateFileStart();                
      });
    });

    $('#featureSelection').on('change',function() {
    $('#featureSelection').addClass('selectOption');
    $('#widgetSelection').removeClass('selectOption');
    $('.featureListOptions').show();
    if ( !$('.featureListOptions li').hasClass('active') ) {
        $('li.memberProfileHeader').addClass('active');  
    }
    var featureSelected = $(this).val();
    var featureIdSelected = $('option:selected', this).data('id');

    selectedOption = featureIdSelected;
    selectSelected = '#featureSelection';

    $('li.memberProfileHeader').on('click',function() {
        memberProfileHeaderCodeEditor.focus();
        memberProfileHeaderCodeEditor.navigateFileStart();
    });

    $('li.memberProfilePage').on('click',function() {
        memberProfilePageCodeEditor.focus();
        memberProfilePageCodeEditor.navigateFileStart();
    });

    $('li.memberProfileFooter').on('click',function() {
        memberProfileFooterCodeEditor.focus();
        memberProfileFooterCodeEditor.navigateFileStart();
    });

    $('li.searchResultHeader').on('click',function() {
        searchResultHeaderCodeEditor.focus();
        searchResultHeaderCodeEditor.navigateFileStart();
    });

    $('li.searchResultPage').on('click',function() {
        searchResultPageCodeEditor.focus();
        searchResultPageCodeEditor.navigateFileStart();
    });

    $('li.searchResultFooter').on('click',function() {
        searchResultFooterCodeEditor.focus();
        searchResultFooterCodeEditor.navigateFileStart();
    });

    $('li.detailPage').on('click',function() {
        detailPageCodeEditor.focus();
        detailPageCodeEditor.navigateFileStart();
    });       

    $.post(engineUrl, {
        systemDevCall: true,
        engineApiEnabled: engineApiEnabled,
        engineDataSplitter: engineDataSplitter,
        systemDevType: 'featureCall', 
        systemDevValue: [featureIdSelected,featureSelected]
    }, 
    function(data) {
        tabSelected = 'feature';
        if (engineApiEnabled != 1) {
            var dataSplit = data.split(engineDataSplitter);
            var data = dataSplit[1];
        }
        // Parse Data
        var featureEditor = JSON.parse(data);

        // Member Profile Header Editor
        memberProfileHeaderCodeEditor = ace.edit("memberProfileHeaderCode");
        memberProfileHeaderCodeEditor.$blockScrolling = Infinity;
        memberProfileHeaderCodeEditor.setValue(featureEditor.memberProfileHeader);
        memberProfileHeaderCodeEditor.setShowPrintMargin(false);
        memberProfileHeaderCodeEditor.setTheme("ace/theme/monokai");
        memberProfileHeaderCodeEditor.getSession().setMode("ace/mode/php");
        memberProfileHeaderCodeEditor.setFadeFoldWidgets();
        memberProfileHeaderCodeEditor.session.getScrollTop();
        memberProfileHeaderCodeEditor.session.setScrollTop(1);
        memberProfileHeaderCodeEditor.session.getScrollLeft();
        memberProfileHeaderCodeEditor.session.setScrollLeft(1);
        memberProfileHeaderCodeEditor.focus();
        memberProfileHeaderCodeEditor.navigateFileStart();
        focusedEditor = memberProfileHeaderCodeEditor;

        // Member Profile Page Editor
        memberProfilePageCodeEditor = ace.edit("memberProfilePageCode");
        memberProfilePageCodeEditor.$blockScrolling = Infinity;
        memberProfilePageCodeEditor.setValue(featureEditor.memberProfilePage);
        memberProfilePageCodeEditor.setShowPrintMargin(false);
        memberProfilePageCodeEditor.setTheme("ace/theme/monokai");
        memberProfilePageCodeEditor.getSession().setMode("ace/mode/php");
        memberProfilePageCodeEditor.setFadeFoldWidgets();
        memberProfilePageCodeEditor.session.getScrollTop();
        memberProfilePageCodeEditor.session.setScrollTop(1);
        memberProfilePageCodeEditor.session.getScrollLeft();
        memberProfilePageCodeEditor.session.setScrollLeft(1);
        memberProfilePageCodeEditor.focus();
        memberProfilePageCodeEditor.navigateFileStart();
        focusedEditor = memberProfilePageCodeEditor;

        // Member Profile Footer Editor
        memberProfileFooterCodeEditor = ace.edit("memberProfileFooterCode");
        memberProfileFooterCodeEditor.$blockScrolling = Infinity;
        memberProfileFooterCodeEditor.setValue(featureEditor.memberProfileFooter);
        memberProfileFooterCodeEditor.setShowPrintMargin(false);
        memberProfileFooterCodeEditor.setTheme("ace/theme/monokai");
        memberProfileFooterCodeEditor.getSession().setMode("ace/mode/php");
        memberProfileFooterCodeEditor.setFadeFoldWidgets();
        memberProfileFooterCodeEditor.session.getScrollTop();
        memberProfileFooterCodeEditor.session.setScrollTop(1);
        memberProfileFooterCodeEditor.session.getScrollLeft();
        memberProfileFooterCodeEditor.session.setScrollLeft(1);
        memberProfileFooterCodeEditor.focus();
        memberProfileFooterCodeEditor.navigateFileStart();
        focusedEditor = memberProfileFooterCodeEditor;

        // Search Result Header Editor
        searchResultHeaderCodeEditor = ace.edit("searchResultHeaderCode");
        searchResultHeaderCodeEditor.$blockScrolling = Infinity;
        searchResultHeaderCodeEditor.setValue(featureEditor.searchResultHeader);
        searchResultHeaderCodeEditor.setShowPrintMargin(false);
        searchResultHeaderCodeEditor.setTheme("ace/theme/monokai");
        searchResultHeaderCodeEditor.getSession().setMode("ace/mode/php");
        searchResultHeaderCodeEditor.setFadeFoldWidgets();
        searchResultHeaderCodeEditor.session.getScrollTop();
        searchResultHeaderCodeEditor.session.setScrollTop(1);
        searchResultHeaderCodeEditor.session.getScrollLeft();
        searchResultHeaderCodeEditor.session.setScrollLeft(1);
        searchResultHeaderCodeEditor.focus();
        searchResultHeaderCodeEditor.navigateFileStart();
        focusedEditor = searchResultHeaderCodeEditor;

        // Search Result Page Editor
        searchResultPageCodeEditor = ace.edit("searchResultPageCode");
        searchResultPageCodeEditor.$blockScrolling = Infinity;
        searchResultPageCodeEditor.setValue(featureEditor.searchResultPage);
        searchResultPageCodeEditor.setShowPrintMargin(false);
        searchResultPageCodeEditor.setTheme("ace/theme/monokai");
        searchResultPageCodeEditor.getSession().setMode("ace/mode/php");
        searchResultPageCodeEditor.setFadeFoldWidgets();
        searchResultPageCodeEditor.session.getScrollTop();
        searchResultPageCodeEditor.session.setScrollTop(1);
        searchResultPageCodeEditor.session.getScrollLeft();
        searchResultPageCodeEditor.session.setScrollLeft(1);
        searchResultPageCodeEditor.focus();
        searchResultPageCodeEditor.navigateFileStart();
        focusedEditor = searchResultPageCodeEditor;

        // Search Result Footer Editor
        searchResultFooterCodeEditor = ace.edit("searchResultFooterCode");
        searchResultFooterCodeEditor.$blockScrolling = Infinity;
        searchResultFooterCodeEditor.setValue(featureEditor.searchResultFooter);
        searchResultFooterCodeEditor.setShowPrintMargin(false);
        searchResultFooterCodeEditor.setTheme("ace/theme/monokai");
        searchResultFooterCodeEditor.getSession().setMode("ace/mode/php");
        searchResultHeaderCodeEditor.setFadeFoldWidgets();
        searchResultFooterCodeEditor.session.getScrollTop();
        searchResultFooterCodeEditor.session.setScrollTop(1);
        searchResultFooterCodeEditor.session.getScrollLeft();
        searchResultFooterCodeEditor.session.setScrollLeft(1);
        searchResultFooterCodeEditor.focus();
        searchResultFooterCodeEditor.navigateFileStart();
        focusedEditor = searchResultFooterCodeEditor;

        // Detail Page Editor
        detailPageCodeEditor = ace.edit("detailPageCode");
        detailPageCodeEditor.$blockScrolling = Infinity;
        detailPageCodeEditor.setValue(featureEditor.detailPage);
        detailPageCodeEditor.setShowPrintMargin(false);
        detailPageCodeEditor.setTheme("ace/theme/monokai");
        detailPageCodeEditor.getSession().setMode("ace/mode/php");
        detailPageCodeEditor.setFadeFoldWidgets();
        detailPageCodeEditor.session.getScrollTop();
        detailPageCodeEditor.session.setScrollTop(1);
        detailPageCodeEditor.session.getScrollLeft();
        detailPageCodeEditor.session.setScrollLeft(1);
        detailPageCodeEditor.focus();
        detailPageCodeEditor.navigateFileStart();
        focusedEditor = detailPageCodeEditor;
      });
    });

Answer 1

您可以将它们放在数组中，用不同的东西编写配置并遍历它。这是最后 7 个块的示例，您可以在代码开头对 3 个块使用相同的逻辑，或者您可以将所有 10 个块放在相同的配置中：

var configs = {
    1: {name: 'memberProfileHeaderCode', value: featureEditor.memberProfileHeader},
    2: {name: 'memberProfilePageCode', value: featureEditor.memberProfilePage},
    3: {name: 'memberProfileFooterCode', value: featureEditor.memberProfileFooter},
    4: {name: 'searchResultHeaderCode', value: featureEditor.searchResultHeader},
    5: {name: 'searchResultPageCode', value: featureEditor.searchResultPage},
    6: {name: 'searchResultFooterCode', value: featureEditor.searchResultFooter},
    7: {name: 'detailPageCode', value: featureEditor.detailPage}
};
var editor = [];
for (a in configs) {
    var tmp = configs[a],
            name = tmp.name;
    console.log(a, tmp);
    editor[name] = ace.edit(tmp.name);
    editor[name].$blockScrolling = Infinity;
    editor[name].setValue(tmp.value);
    editor[name].setShowPrintMargin(false);
    editor[name].setTheme("ace/theme/monokai");
    editor[name].getSession().setMode("ace/mode/php");
    editor[name].setFadeFoldWidgets();
    editor[name].session.getScrollTop();
    editor[name].session.setScrollTop(1);
    editor[name].session.getScrollLeft();
    editor[name].session.setScrollLeft(1);
    editor[name].focus();
    editor[name].navigateFileStart();
    focusedEditor = editor[name];
}

重构 Ace 编辑器

Refactoring Ace Editors

javascript

performance

ace-editor