重構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]; 
}