Рефакторинг Ace Редакторы

Question

Я пытаюсь упростить следующий код, показанный в нижней части вопроса. Здесь вы найдете следующие вопросы:

• Как сделать так, чтобы редактор Ace создавался один раз, а не один раз для каждого редактора.
• Для setValue Ace Editor каждый редактор извлекает свою конкретную информацию из объекта, который был возвращен из бэкэнд (у меня нет доступа к серверу). Вы можете увидеть объект в коде как 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]; 
}