重构Ace编辑器

Question

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

• 如何使它成为Ace编辑器而不是每个编辑器一次。
• 对于Ace Editor的setValue，每个编辑器都会从后端返回的对象（我无法访问后端）中提取它们的特定信息。您可以在代码中将对象看作widgetEditor和featureEditor。
• 代码现在正常工作，但我相信它可以简化很多。
• Ace编辑器之间的唯一变量是setValue，getSession和ace.edit选项。
• 我检查了下面的链接，与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]; 
}