• Как грамотно реализовать архитектуру событийного пользовательского интерфейса на чистом JS?

    @iljaGolubev
    Грамотно - взять готовое решение.
    Но можно и такой велосипед, например.
    const point = { x: 0, y: 0 };
    
    function alertPointSubscriber(point){
    	alert(point.x * point.y);
    }
    const subscribers = [];
    
    
    const handlePointChange = {
      set(obj, prop, value) {
        subscribers.forEach(susb => susb(obj));
        if ((prop === 'x') || (prop === 'y') ) {
          console.log('set ' + prop + '=' + value);
        } else {
          console.log('unhandled');
        }
        return Reflect.set(...arguments);
      }
    };
    
    const points =[];
    points.push(new Proxy(point, handlePointChange));
    
    points[0].x=10;
    points[0].y=20;
    subscribers.push(alertPointSubscriber);
    points[0].z=3;
    
    console.log(point);
    Ответ написан
    1 комментарий
  • Фильтры товаров интернет-магазина, как грамотно реализовать обмен данными с сервером?

    @foterio
    Если это не GraphQL api, у которого любой запрос это POST, то общепринято для получения информации использовать GET запрос. Так же это сделано для того, чтобы вы могли поделиться этой ссылкой с другим человеком и еще чтобы правильно работало SEO.

    Выглядеть это должно примерно вот так.
    1. Для начала разберемся с pagination, тут есть два пути:
    А. Передавать два параметра, limit - кол-во записей, offset - отступ
    Первая страница /producst?limit=20&offset=0
    Вторая страница /producst?limit=20&offset=20

    B. Передавать только page, и уже на backend'е высчитывать limit и offset для обращения в БД
    Первая страница /producst
    Вторая страница /producst?page=2
    // Тут мы для первой страницы можем забить и не передавать никакие значения,
    // так как на backend'е предусматриваем page = 1 по дефолту.

    2. Значения фильтров так же передаем параметрами
    /producst?page=2&categoryIds=15,7,23
    3. И затем на backend'е уже парсим наши фильтры, незабывая предусмотреть дефолтные значения для фильтров. Есть разные подходы, первое что пришло в голову, это следующее решение
    let filter = {
      // тут можно предусмотреть некоторые значения фильтра по дефолту
      isAvailableOnStock: true,
    }
    // И затем парсим каждое значение
    if (query.categoryIds) {
      // В зависимости от базы данных, а так же драйвера и ORM,
      // которые мы используем, будет отличаться
      // делайте это в соответсвии с документацией
      filter.category_id = In(query.categoryIds.split(','))
    }
    // Делаем запрос в нашу базу
    // Для примера используется TypeORM
    const products = await getRepository(Products).find({
      // Используем наш объект filter
      where: {
        ...filter,
      },
      // Сортируем результат по названию
      order: {
        title: 'ASC',
      }
    })

    P. S. Еще помните, что существует сортировка, по цене, по имени, и прочее, которую так же необходимо передавать через параметр и затем сортировать результат из базы данных через "ORDER BY"
    Ответ написан
    Комментировать
  • Как сделать табы с выводом из бд?

    @alexalexes
    Выводить также как из любого другого источника данных.
    1. Подготовьте источник данных.
    - Разверните службу СУБД в операционной системе сервера.
    - Выберите менеджер, чем вам будет удобно просматривать объекты СУБД.
    - Установите менеджер СУБД.
    - При помощи менеджера СУБД заведите пользователя базы данных, схему базы данных, структуру таблиц и связей, вставьте необходимые данные.
    2. Изучите способы подключения к источнику данных и взаимодействия из PHP (как делать коннект к СУБД, как подготавливать запросы и параметры к ним, как фетчить результат выборки запроса).
    3. Подключитесь к базе, выполните запрос, встройте выборку результата в ваш шаблон HTML (табы).
    Ответ написан
    3 комментария
  • Как передать объект с данными в node.js express совместно с html страницей?

    @ragnvaldr9
    В шаблоне в теге script положить данные в глобальный объект.
    Можно привязать к window (что-нибудь вроде window.appData).
    Ответ написан
    1 комментарий
  • Как убрать смещение страницы влево при появлении полосы прокрутки?

    Pongo
    @Pongo
    При помощи calc(100vw - 100%) можно вычислить ширину скроллбара (а если он не отображается, то будет 0). Идея: при помощи отрицательного margin-right увеличить ширину <html> на эту ширину. При этом появляется горизонтальная полоса прокрутки — ее скрываем.

    html {
      overflow-x: hidden;
      margin-right: calc(-1 * (100vw - 100%));
    }

    Пример. Нажатие кнопки "change min-height" скрывает\отображает скроллбар.
    Ответ написан
    12 комментариев