Можно ли как-то вынести создание разметки для кнопок пагинации в отдельный метод?

Question

Можно ли как-то вынести создание разметки для кнопок пагинации в отдельный метод?

Рейтинг: 0Ответов: 2Опубликовано: 14.03.2023

 _generateMarkup() {
    const curPage = this._data.page;
    const numPages = Math.ceil(
      this._data.results.length / this._data.resultsPerPage
    );

    console.log(curPage, numPages);
    //1.first page, there are other pages
    if (curPage === 1 && numPages > 1) {
      return `
        <button data-goto='${
          curPage + 1
        }' class="btn--inline pagination__btn--next">
          <svg class="search__icon">
            <use href="${icons}#icon-arrow-right"></use>
          </svg>
          <span>Page ${curPage + 1}</span>
        </button>
       `;
    }
    //2.last page,theres are other pages
    if (curPage === numPages && numPages > 1) {
      return `
        <button data-goto='${
          curPage - 1
        }' class="btn--inline pagination__btn--prev">
          <svg class="search__icon">
            <use   href="${icons}#icon-arrow-left"></use>
          </svg>
          <span>Page ${curPage - 1}</span>
        </button>
        `;
    }
    //3.other pages between first page and last page
    if (curPage < numPages) {
      return `
        <button data-goto='${
          curPage - 1
        }' class="btn--inline pagination__btn--prev">
          <svg class="search__icon">
            <use href="${icons}#icon-arrow-left"></use>
          </svg>
          <span>Page ${curPage - 1}</span>
        </button>
        <button data-goto='${
          curPage + 1
        }' class="btn--inline pagination__btn--next">
          <svg class="search__icon">
            <use href="${icons}#icon-arrow-right"></use>
          </svg>
          <span>Page ${curPage + 1}</span>

        </button>
      `;
    }
    //4.only one page and there are no other pages
    return '';
  }

javascript html5 разметка рефакторинг

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

С учетом, что все button блоки однотипные их можно в целом в одну функцию вынести.

function _generateMarkup() {
  const curPage = this._data.page;
  const numPages = Math.ceil(
    this._data.results.length / this._data.resultsPerPage
  );

  const firstPage = curPage === 1 && numPages > 1;
  const lastPage = curPage === numPages && numPages > 1;
  const middlePage = curPage < numPages;

  if (firstPage || lastPage) {
    return returnButtonBlock(firstPage, curPage);
  }

  if (middlePage) {
    return `
      ${returnButtonBlock(false, curPage)}
      ${returnButtonBlock(true, curPage)}
    `;
  }

  return '';
}

function returnButtonBlock(isPlus, curPage) {
  const page = isPlus ? curPage + 1 : curPage - 1;
  return `
      <button data-goto='${page}' class="btn--inline pagination__btn--${isPlus ? "next" : "prev"}">
        <svg class="search__icon">
          <use href="${icons}#icon-arrow-${isPlus ? "right" : "left"}"></use>
        </svg>
        <span>Page ${page}</span>
      </button>
     `;
}

Answer 2

▲ 2

Ну хотя бы вот так:

function _generateMarkup() {
  const curPage = this._data.page;
  const numPages = Math.ceil(
    this._data.results.length / this._data.resultsPerPage
  );

  const firstPage = curPage === 1 && numPages > 1;
  const lastPage = curPage === numPages && numPages > 1;
  const middlePage = curPage < numPages;

  if (firstPage || lastPage) {
    return `
      <button data-goto='${
        firstPage ? curPage + 1 : curPage - 1
      }' class="btn--inline pagination__btn--${firstPage ? "next" : "prev"}">
        <svg class="search__icon">
          <use href="${icons}#icon-arrow-${firstPage ? "right" : "left"}"></use>
        </svg>
        <span>Page ${firstPage ? curPage + 1 : curPage - 1}</span>
      </button>
     `;
  }

  if (middlePage) {
    return `
      <button data-goto='${
        curPage - 1
      }' class="btn--inline pagination__btn--prev">
        <svg class="search__icon">
          <use href="${icons}#icon-arrow-left"></use>
        </svg>
        <span>Page ${curPage - 1}</span>
      </button>
      <button data-goto='${
        curPage + 1
      }' class="btn--inline pagination__btn--next">
        <svg class="search__icon">
          <use href="${icons}#icon-arrow-right"></use>
        </svg>
        <span>Page ${curPage + 1}</span>

      </button>
    `;
  }

  return "";
}

Что касается "вынести создание разметки в отдельный метод", так у вас функция по названию именно этим и занимается, не вижу в этом смысла

Можно ли как-то вынести создание разметки для кнопок пагинации в отдельный метод?

Ответы