分離嵌套功能

我正在自己的插件上工作。它生成表格divs和椅子divs並將椅子分組到表格divs。創建椅子是在表函數內的一個函數中完成的，但這不是一個好習慣，因爲插件通常包含單獨的函數。分離嵌套功能

雖然我想讓椅子可選，這意味着代碼將正常工作，並報告沒有錯誤。但是我不能將桌椅功能放在桌子外面，並且不會出錯。我可能會以錯誤的方式去思考？我需要改變什麼？

function createTables() { 
    var availableTables = [], 
     newTable, tableProp; 
    for (var i = 0; i < defaultSettings.numberofTables; i++) { 
     newTable = $('<div id="table' + i + '"></div').css({ 'width': defaultSettings.tableSize.tableW + '%', 'height': defaultSettings.tableSize.tableH + '%', 'background-color': 'black' }); 

     tableProp = { 'left': defaultSettings.tablePos.posX + '%', 'top': defaultSettings.tablePos.posY + '%', 'position': 'absolute', 'display': 'none' }; 
     var availableSeats = [], 
      newSeat, seatProp; 
     var horPosArr = new Array(0, 5, 10); 
     var seatPosX, seatPosY; 

     function createSeats() { 
      for (var j = 0; j < 6; j++) { 
       if (j < 3) { 
        seatPosX = defaultSettings.tablePos.posX + horPosArr[j]; 
        seatPosY = defaultSettings.tablePos.posY + 14; 
       } else { 
        seatPosX = defaultSettings.tablePos.posX + horPosArr[j - 3]; 
        seatPosY = defaultSettings.tablePos.posY - 4.5; 
       } 

       newSeat = $('<div class="seat' + i + '"></div').css({ 'width': defaultSettings.seatSize.seatW, 'height': defaultSettings.seatSize.seatH, 'background-color': 'white', 'border': 'solid black 2px' }); 
       seatProp = { 'left': seatPosX + 0.5 + '%', 'top': seatPosY + '%', 'position': 'absolute', 'display': 'none' }; 
       newSeat.css(seatProp).appendTo('body').fadeIn(defaultSettings.speed); 
       availableSeats.push(newSeat); 
      } 
      return availableSeats; 
     } 
     availableSeats = createSeats();

另外，還有什麼我應該做的模塊化方法？這是一個fiddle。

來源

2017-06-17 Zhyohzhy

我不認爲有嵌套函數相關的情況。您可以創建另一個函數，它將使用參數 – Vivick

內部函數使用來自外部函數的變量。將這些（如'horPosArr'）作爲參數傳遞給您可以放在createTables之外的新函數。 – PeterMader

我還在學習這些東西，但是有一種方法可以考慮這個問題：https://jsfiddle.net/sheriffderek/hjeu6n9o/ - 這也可能是https://codereview.stackexchange.com/的一個很好的候選者。 //否則 - 你應該把問題進一步分解成更簡單的例子。 – sheriffderek

如果您希望座位爲可選座位，請將seats屬性添加到您的設置中。我可能會這樣拉出createSeats函數。

function createSeats(tablePos) { 
    var availableSeats = [] 
    var seatPosX, seatPosY; 
    var horPosArr = new Array(0, 5, 10); 
    for (var j = 0; j < 6; j++) { 
    if (j < 3) { 
     seatPosX = defaultSettings.tablePos.posX + horPosArr[j]; 
     seatPosY = defaultSettings.tablePos.posY + 14; 
    } else { 
     seatPosX = defaultSettings.tablePos.posX + horPosArr[j - 3]; 
     seatPosY = defaultSettings.tablePos.posY - 4.5; 
    } 

    var newSeat = $('<div class="seat' + tablePos + '"></div').css({ 'width': defaultSettings.seatSize.seatW, 'height': defaultSettings.seatSize.seatH, 'background-color': 'white', 'border': 'solid black 2px' }); 
    var seatProp = { 'left': seatPosX + 0.5 + '%', 'top': seatPosY + '%', 'position': 'absolute', 'display': 'none' }; 
    newSeat.css(seatProp).appendTo('body').fadeIn(defaultSettings.speed); 
    availableSeats.push(newSeat); 
    } 
    return availableSeats; 
}

並修改createTables是

function createTables() { 
    var availableTables = [], 
     newTable, tableProp; 
    for (var i = 0; i < defaultSettings.numberofTables; i++) { 
    newTable = $('<div id="table' + i + '"></div').css({ 'width': defaultSettings.tableSize.tableW + '%', 'height': defaultSettings.tableSize.tableH + '%', 'background-color': 'black' }); 

    tableProp = { 'left': defaultSettings.tablePos.posX + '%', 'top': defaultSettings.tablePos.posY + '%', 'position': 'absolute', 'display': 'none' }; 

    if (defaultSettings.seats) 
     createSeats(i); 

    if (defaultSettings.tablePos.posX >= 60) { 
     defaultSettings.tablePos.posX = 17, defaultSettings.tablePos.posY += 30; 
    } else { defaultSettings.tablePos.posX += 18; } 
    newTable.css(tableProp).appendTo('body').fadeIn(defaultSettings.speed); 
    availableTables.push(newTable); 
    } 
    return availableTables; 
}

更新fiddle。

我同意你的一位評論者的意見，如果你想問這應該如何組織，這可能是一個更好的問題Code Review。

來源

2017-06-17 17:47:28 Bert

答案後，我更改了每個座位的班級，以便他們都擁有自己的座位，而不僅僅是與陣列中其他座位div相同的班級。我想給他們每個自己的班級，就像這樣：'

'因此我可以針對屬於特定班級的每個座位，如下所示：'

'我需要'i'整數用於在表格函數中循環。我如何將它傳遞給座位功能？ – Zhyohzhy

@Zhyohzhy tablePos *是*我從createTables方法。它已經過去了。 – Bert

分離嵌套功能

回答

相關問題