Ответы пользователя по тегу JavaScript
  • Как правильно связывать react и redux?

    profesor08
    @profesor08 Куратор тега JavaScript
    const mapStateToProps = store => {
        return {
            user: store.user.user
        };
    };


    Либо
    const initialStateUser = {
        name: "Вася"
    };
    Ответ написан
  • Почему функция console.log зависит от функции return?

    profesor08
    @profesor08 Куратор тега JavaScript
    Учи области видимости в языке. Если книжка не может объяснить, то прочитай тут: https://habr.com/ru/company/ruvds/blog/337038/
    или тут: https://learn.javascript.ru/functions-closures
    или тут: https://getinstance.info/articles/javascript/varia...

    В твоем случае balance, amount в функции это локальные переменные, они не имею отношения к глобальным, имя не имеет значение, и то что оно одинаковое путает тебя.
    Ответ написан
    2 комментария
  • Почему не работает кеширование?

    profesor08
    @profesor08 Куратор тега JavaScript
    Все эти файлы находятся в самом расширении? Если да, то ты занимаешься бессмысленной фигней. И так и так файлы на диске, они сохранены локально, и загружаются с диска как и любой другой кеш.
    Ответ написан
  • Как на javascript найти и заменить в тексте параметр?

    profesor08
    @profesor08 Куратор тега JavaScript
    Тебе надо пробежать по документу и выбрать все текстовые ноды, таким образом ты не затронешь другие элементы и их поведение. Заменяя все ты создаешь новый документ и для него надо заново все инициализировать. Чтоб избежать всего этого надо работать с текстовыми нодами.

    function replaceText(text, textToReplace) {
    
    	function replace(nodes) {
      	nodes.forEach(node => {
          
          if (node instanceof HTMLScriptElement) {
          	return;
          }
          
          if (node instanceof HTMLStyleElement) {
          	return;
          }
          
        	if (node instanceof Text) {
          	if (node.nodeValue.match(text)) {
            	node.nodeValue = node.nodeValue.replace(text, textToReplace)
            }
          }
          else {
          	replace(Array.from(node.childNodes));
          }
        });
      }
      
      replace(Array.from(document.body.childNodes));
    }
    
    replaceText("{DATETIME}", "___WwW___");


    Ответ написан
    1 комментарий
  • Как сделать открытие страниц без перезагрузки на MODX?

    profesor08
    @profesor08 Куратор тега JavaScript
    На все ссылки, которые ведут к страницам сайта, добавляешь addEventListener, в нем блокируешь поведение e.preventDefault(), и делаешь ajax запрос к сайту по нужному url. После загрузки подменяешь содержимое страницы и так по кругу.

    А еще у MODX есть плагины, и если научиться гуглить, то в первом же результате буде нужный плагин: https://modx.com/extras/package/modajaxifyasimplea...
    Ответ написан
    Комментировать
  • Формат написания функций?

    profesor08
    @profesor08 Куратор тега JavaScript
    Разница только в синтаксическом сахаре. В втором варианте применяется удобная новомодная деструктуризация.

    Подробнее тут: https://learn.javascript.ru/destructuring
    Ответ написан
    Комментировать
  • Как убрать модальное окно по той же кнопке?

    profesor08
    @profesor08 Куратор тега JavaScript
    Задай где-то в стилях класс .is-active, который будет задавать свойства для активной модалки. Далее по нажатию кнопки проверяй, есть ли у модалки это класс, и добавляй/удаляй его. Так и будет модалка появляться/прятаться.

    const button = document.querySelector(".modal-button");
    ...
    const modal = document.querySelector(".modal");
    ...
    
    button.addEventListener("click", () => {
      if (modal.classList.contains("is-active")) {
        modal.classList.remove("is-active");
      }
      else {
        modal.classList.add("is-active");
      }
    });
    Ответ написан
    3 комментария
  • Почему не стоит использовать for...in, for...of, for(airbnb linter)?

    profesor08
    @profesor08 Куратор тега JavaScript
    Потому что кто-то так решил и его голос имеет сильный вес. Ты всегда может отключить данное правило.

    Связано это с тем, что в некоторых браузерах все плохо с итераторами, а for..in итеррирует в добавок и свойства прототипа, что как-бы четко поясняется в документации, а полагаться на hasOwnProperty нельзя в некоторых случаях (не поясняется почему), наверно потому, что его могут переопределить для объекта, но его могут переопределить и для Object, и тогда все плохо. Либо недостаточная поддержка браузерами.

    Резюмируя, нефиг итеррировать по свойствам объекта, для итеррации есть массивы. А свойства на то и свойства, чтоб к ним обращаться напрямую.
    Ответ написан
    4 комментария
  • Как сделать, чтобы часть текста скрывалась, если в строке более 40 символов?

    profesor08
    @profesor08 Куратор тега JavaScript
    Зачем тут городить кучу кода. Обрезал, добавил и все.

    const str = "Можете подсказать, как сделать, если в строке более 40 символов часть текста скрывалась?";
    
    function short(str, len = 40) {
    	if (str.trim().length <= len) return str.trim();
    	
    	return str.trim().substr(0, len - 3).trim() + "...";
    }
    
    short(str); // строка до 40 символов, включая точки
    short(str, 80); // строка до 80 символов, включая точки


    P.S. По хорошему бы еще отсечь возможные символы в конце строки, точки, запятые, тире и тд.
    Ответ написан
    Комментировать
  • Как изменить курсор при наведении в JavaScript?

    profesor08
    @profesor08 Куратор тега JavaScript
    Вешаешь на канвас addEventListener("mousemove ", e => {});, где e это объект события мыши, там есть координаты, по которым двигается курсор, проверяй попадают ли оно в площадь, занимаемую картинкой на канвасе или нет.
    Ответ написан
    Комментировать
  • Как создать зашифрованный хэш паролей для Drupal 7 на js?

    profesor08
    @profesor08 Куратор тега JavaScript
    Ну так раз пароль шифруется на клиенте в браузере, значит за это отвечает какой-то js код. Смотришь код страницы, находишь нужную форму и смотришь какие там id, классы и атрибуты у поля с паролем. Далее проводишь поиск по ним в js файлах, которые грузятся на странице. Если ты прошаренный пользователь, то в devtools посмотришь какие навешаны события на форму, на поле с паролем, на кнопку, по ним найдешь нужную область кода.

    А еще ты можешь забить на это и зашифровать пароль по своему, а на сайте его дешифровать.
    Ответ написан
  • Как разбить массив на части?

    profesor08
    @profesor08 Куратор тега JavaScript
    const data = [
      [1497052800, 100, 1597052800, 120, 1597052800, 120],
      [1497139200, 140, 1597052800, 80],
      [1497225600, 200, 1597052800, 222],
      [1497312000, 80, 1597052800, 100],
    ];
    
    function getItems(arr, from, to) {
      return arr.map(arr => arr.filter((e, id) => id >= from && id <= to));
    }
    
    // data - сам массив, 0,1 это диапазон индексов, с какого по какой делать выборку
    getItems(data, 0, 1); // первые два
    getItems(data, 2, 3); // вторые два


    Если у тебя там например [x1,y1,z1,x2,y2,z2], то
    getItems(data, 0, 2); 
    getItems(data, 3, 5);


    Если [x1,y1,x2,y2,x3,y3], то
    getItems(data, 0, 1); 
    getItems(data, 2, 3); 
    getItems(data, 4, 5);
    Ответ написан
    Комментировать
  • Как сохранить в переменную путь к содержимому ассоциируемого массива(объекта)?

    profesor08
    @profesor08 Куратор тега JavaScript
    Что-то мне подсказывает, что ты не с того конца подходить к организации данных. Ты их плохо сформировал и теперь ломаешь логову над тем, как это чудо обработать. Допустим это у тебя список покупок, так вот пусть это и будет списком (массивом), в котором каждое звено это некий список товаров из некой категории товаров. Тем самым ты получишь удобную конструкцию, по которой будет удобно итеррировать, будет удобно фильтровать, удалять, добавлять, изменять. При условии, что у тебя все завязано на категориях.

    const cart = [
      {
        category: "Машины",
        subCategory: "Автомобиль",
        items: [0, 1],
      },
      {
        category: "машины",
        subCategory: "Техника",
        items: [2, 3],
      },
      {
        category: "Органика",
        subCategory: "Цветы",
        items: [4, 5],
      },
      {
        category: "Грибы",
        subCategory: "Автомобиль",
        items: [6, 7],
      },
    ];


    Ну, а чтоб совсем все хорошо было и независимо, то вот:
    const cart = [
      {
      	id: 0,
        category: "Машины",
        subCategory: "Автомобиль",
      },
      {
      	id: 1,
        category: "Машины",
        subCategory: "Автомобиль",
      },
      {
      	id: 2,
        category: "Машины",
        subCategory: "Техника",
      },
      {
      	id: 3,
        category: "Машины",
        subCategory: "Техника",
      },
      {
      	id: 4,
        category: "Органика",
        subCategory: "Цветы",
      },
      {
      	id: 5,
        category: "Органика",
        subCategory: "Цветы",
      },
      {
      	id: 6,
        category: "Органика",
        subCategory: "Грибы",
      },
      {
      	id: 7,
        category: "Органика",
        subCategory: "Грибы",
      },
    ];
    Ответ написан
    Комментировать
  • Что можно сделать чтобы сократить код?

    profesor08
    @profesor08 Куратор тега JavaScript
    Задача кода чтоб он выполнялся, и чтоб ты его понимал. Если тебе для понимания надо написать несколько if else, пиши так. Лично я бы раскидал все по массивам, объектам и вызывал бы нужные вещи оперируя структурами данных.
    Ответ написан
    Комментировать
  • Почему for(;;); вешает процесс?

    profesor08
    @profesor08 Куратор тега JavaScript
    Потому что результатом будет бесконечный цикл. У тебя нет условия выхода из цикла. В цикле for есть три зоны разделенные точкой с запятой, они не обязаны содержать операции. Это аналог while(true).
    Ответ написан
    2 комментария
  • Как сделать анимацию бегущей строки?

    profesor08
    @profesor08 Куратор тега CSS
    Эффект интересный, но реализация просто мерзкая, так еще и кривая.

    Для создания такого эффекта тебе потребуется несколько svg картинок, которые будут представлять собой всю полосу надписей. 4 полоски - 4 картинки, у каждой svg картинки текстовые элементы расположены в ряд. Далее задаешь эти картинки как фон для блоков: background: url(img1.svg) repeat-x;. Остается только задать бесконечную анимацию смещения фона в нужную сторону на @keyframes. Все.

    Пример:
    Ответ написан
    1 комментарий
  • Как добавить события к слайдам плагина Slick slider?

    profesor08
    @profesor08 Куратор тега JavaScript
    kenwheeler.github.io/slick/#settings

    Чуть ниже есть Events
    Ответ написан
    Комментировать
  • Как оптимизировать slick slider?

    profesor08
    @profesor08 Куратор тега CSS
    Очевидно slick тут не подходит. При любом движении, он двигает все слайды, те что видны и те что не видны. А помимо это, на слайдах другие слайдеры делают то-же самое. Тут напрашивается свое решение, которое решит эти проблемы. Ну и максимально оптимизировать картинки и их размер, чтоб ничего лишнего.
    Ответ написан
    Комментировать
  • Как можно обрезать изображение?

    profesor08
    @profesor08 Куратор тега JavaScript
    https://developer.mozilla.org/ru/docs/Web/API/Canv...
    https://developer.mozilla.org/en-US/docs/Web/API/H...

    Этих двух функций достаточно, чтоб на канвасе нужного размера нарисовать картинку по нужным координатам, а потом получить результат. Придется немного пошевели извилинами, чтоб посчитать правильные координаты.
    Ответ написан
    Комментировать
  • Как дождаться загрузки jquery?

    profesor08
    @profesor08 Куратор тега JavaScript
    Включить в общий бандл, либо вставить в тег head.
    Ответ написан
    Комментировать