Question

我正在开发自己的插件。它生成表格div和主席div并将椅子分组到表格div。创建主席是在table函数内部的函数中完成的，但这并不是一个好习惯，因为插件通常包含单独的函数。

我想让椅子可选，这意味着代码可以正常运行并且不会报错。但是我无法将chair函数放在table函数之外并且没有错误。我可能会以错误的方式解决这个问题？我需要改变什么？

    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。

Answer 1

如果您希望座位是可选的，请在您的设置中添加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来说可能是一个更好的问题。

分离嵌套函数

1 个答案: