Разделение вложенной функции

Question

Разделение вложенной функции

1

Я работаю над своим собственным плагином. Он создает табличные divs и стулья divs и группирует стулья в таблицы div. Создание стульев выполняется в функции внутри функции таблицы, но это не очень хорошая практика, поскольку плагины обычно содержат отдельные функции.

Я хочу, чтобы стулья были необязательными, то есть код будет работать нормально и не сообщать об ошибках. Но я не могу разместить функции стула вне функции таблицы и не получить ошибок. Возможно, я ошибаюсь так, как я себя чувствую? Что мне нужно изменить?

    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();

Кроме того, есть ли что-то еще, что я должен делать с модульным подходом? Вот скрипка.

Zhyohzhy 17 июнь 2017, в 19:49

Источник

Теги:

javascript

1 ответ

Ещё вопросы

Bert · Accepted Answer · 2017-06-17T15-21-00.000Z

Если вы хотите, чтобы сиденья были дополнительными, добавьте свойство 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;
}

Обновлена скрипка.

Я согласен с одним из ваших комментаторов в том, что если вы хотите спросить, как это должно быть структурировано, это, вероятно, лучший вопрос для Code Review.

После вашего ответа я изменил классы каждого места, чтобы у каждого из них был свой класс, а не только тот же класс, что и у других мест в массиве. Я хотел дать им каждому свой класс следующим образом: <div class="table' + i + 'seat' + tablePos + '"></div> Таким образом, я мог бы <div class="table' + i + 'seat' + tablePos + '"></div> каждое место, принадлежащее определенному классу, следующим образом: <div class="table1seat1"></div> Мне нужно целое число i для того, что зацикливается в функции таблиц. Как передать это функции сидений?
@Zhyohzhy tablePos это я из метода createTables. Это уже прошло.