2

Коллеги, на сайте есть страницы.

введите сюда описание изображения

Не важно какая функция, но есть функция, которая считывает наличие страниц и возвращает массив (этих самых страниц), и в соответствии из данных которого я уже создаю объект с нужными мне данными.

let _getPages = [];

pages.forEach((s, i, arr) => {
    _getPages[i] = {
        href: s.split('/')[2].split('.')[0].capitalize(),
        link: s
    }
})

Получаю такое:

{href: "About_us", link: "frontend/pages/about_us/index.html"}
{href: "Contact", link: "frontend/pages/contact/index.html"}
{href: "Main", link: "frontend/pages/main/index.html"}
{href: "Slider", link: "frontend/pages/slider/index.html"}

Далее, имея все это я создаю Меню на странице

const li = document.createElement('li');
const menu = document.querySelector('menu');


_getPages.forEach((s, i, arr)=>{
    let listPage = li.cloneNode(true);
    listPage.classList.add('listPage');
    listPage.innerHTML = s.href
    menu.appendChild(listPage);
})

И в итоге, что у меня есть

введите сюда описание изображения

В итоге, не могу сообразить, как именно и на каком уровне с сортировать так, чтобы я получил меню С той последовательностью страниц которую хочу.

Допустим, чтобы Main, был на первом месте, About_us, на последнем....

P.S. Первое что пришло в голову, это добавить в название папок буквы a, b, c, d....., а потом их срезать, но не думаю, что это профессиональный подход

Вопрос немного глуповат, но не соображу ни как.

Не прошу готовы пример, мне нужна лишь подсказка.

Так как и на каком уровне отсортировать массив?

10
  • Мне кажется проблема в том, что мы изначально не знаем как сортировать.... То есть у нас есть некий список меню, который отсортирован по алфавиту.... Но откуда js знать, как расположить элементы? В текущим случаи я вижу, что нужна сортировка массива на основе другого массива. То есть где-то заранее объявить массив меню с нужным порядок..... Но мне кажется, что в вашем случаи может не подойти. Пример сортировка массива по другому массиву тут stackoverflow.com/questions/13304543/… 31 янв 2019 в 7:25
  • 1
    С той последовательностью страниц которую хочу. - а как ты определяешь с какой хочешь?
    – Grundy
    31 янв 2019 в 7:26
  • @AlexanderSemikashev, ты не знаешь отсортирован ли полученный список
    – Grundy
    31 янв 2019 в 7:26
  • @Grundy, в том то и дело что не знаю как определить.
    – Air
    31 янв 2019 в 7:27
  • @AlexanderSemikashev. естественно JS не может знать как расположить, пока я ему не опишу логику. А чтобы была логика, я не могу сообразить из каких исходных данных описать логику для js.
    – Air
    31 янв 2019 в 7:33

2 ответа 2

1

Для начала, следует признать, что порядок - не единственная информация которую вам не удалось получить. Ещё вам нужны нормальные заголовки ("About us" пишется без подчёркивания!), перевод их на другие языки, цвет...

Проще всего - не играться с автоматическим определением страниц сайта, а записать всё меню в отдельный файл.

Если же такой вариант не устраивает по каким-то причинам (например, из-за раздельного деплоя) - нужно добавить файл с описанием к каждой странице. Пусть у вас будут файлы pages/about_us/info.json, pages/contact/info.json и т.п. Дальше можно завести для каждой страницы атрибут order и сортировать по нему.

Как вариант, всю необходимую информацию можно попытаться добавить в мета-тэги. Но тут вам понадобится уже парсер html чтобы её прочитать.

4
  • Pavel, что касается заголовков, это пока не важно, я прекрасно знаю как пишется About us... Я не прав в том, что несколько не глубоко вопрос описал. Тот изначальный массив который я получаю, это работа webpack в ответе ru.stackoverflow.com/questions/936622/… есть пример того, как я получаю массив. Мне не хочется в ручную описывать все это. Я как только создаю некую папку с новой страницей, у меня динамический перезаписывается массив и я получаю список страниц
    – Air
    31 янв 2019 в 8:38
  • @Air я понял что это работа webpack. Но зачем вам использовать то решение для жалкой менюшки на 4 пункта? А если надо позарез - положите json рядом с каждой страницей. 31 янв 2019 в 8:40
  • Pavel, я согласен на все сто с этим высказыванием ...для жалкой менюшки на 4 пункта.... Но тут есть несколько глубокий смысл. Я пока еще учусь. Я умею многое, но это моя первая самостоятельная сборка всего frontend backend, webpack... Так что, это может быть не обязательно меню, данный пример я могу использовать в чем то другом. По этому каждый ответ мне интересен и важен. Есть о чем подумать... В любом случае благодарю за ответ
    – Air
    31 янв 2019 в 8:52
  • отдельный order в каждом файле надо как-то синхронизировать будет
    – Grundy
    31 янв 2019 в 9:06
0

const menuIWant = ["Main","Contact","Slider", "About_us" ];
let _getPages = [
  {href: "About_us", link: "frontend/pages/about_us/index.html"},
  {href: "Contact", link: "frontend/pages/contact/index.html"},
  {href: "Main", link: "frontend/pages/main/index.html"},
  {href: "Slider", link: "frontend/pages/slider/index.html"},
];

const result = [];

menuIWant.forEach(item => {
  for (let i=0; i<_getPages.length; i++){
    if (_getPages[i].href === item) {
       result.push(_getPages[i]);
       break;
      }
    }
})
console.log(result)

6
  • Минус не мой. Я и не собирался ставить, но это не то. У меня этот массив создается динамический. Когда я создаю новую папку, то webpack мне все перебирает, с данным примером, мне придется лазать в код и добавлять в список const menuIWant = ["Main","Contact","Slider", "About_us" ]; новое значение в ручную
    – Air
    31 янв 2019 в 7:52
  • Что бы получить, что хочешь - нужно знать, что хочешь). В любом случае, эту информацию нужно будет где-то хранить. Если Вы добавите какой-нибудь индекс к названию файлов, то потом, если захотите изменить меню, прийдется переименовывать все файлы. С массивом будет проще
    – Dmytro
    31 янв 2019 в 7:55
  • Дмытрык, по моему ты щас меня сравнил с беременной блондинкой, которая не знает чего хочет... То ли арбуз с цементом, то ли мармелад с опилками...))))
    – Air
    31 янв 2019 в 8:00
  • 1
    Зачем делать forEach и push когда существует map? 31 янв 2019 в 8:20
  • 1
    @PavelMayorov, все зависит от опыта. Для меня, такая реализация более очевидна. Спасибо, за codereview)
    – Dmytro
    31 янв 2019 в 8:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.