Задать вопрос

animous

Лайки

  • Замыкания в чем конкретно разница?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Не работает, потому что к тому времени, когда функция onclick будет вызвана, переменная i дойдет до самого конца цикла. И будет использоваться именно это, последнее значение.

    В первом варианте переменная i используется в конкретной итерации, т.е. берется photos[i] и это значение дальше передаётся, а сама переменная i больше не используется, так что в целом пофиг, как там она дальше будет изменяться.

    Ведь в первом варианте вызов addThumbnailClickHandler(thumbnails[i], photos[i]) происходит прямо в цикле, сразу, без промедлений, а не откладывается на потом. В этот момент конкретные значения передаются в качестве параметров. И далее из-за замыкания они так и остаются висеть в памяти и ссылаться на то, что нужно.

    Немного изменим код, и он снова перестанет работать :)
    var i;

var addThumbnailClickHandler = function (thumbnail) {
  thumbnail.addEventListener('click', function () {
    fullPhoto.src = photos[i]; // i === thumbnails.length
  });
};

for (i = 0; i < thumbnails.length; i++) {
  addThumbnailClickHandler(thumbnails[i]);
}
    Ответ написан
    Комментировать
    Комментировать

  • Замыкания в чем конкретно разница?

    yangirekun
    @yangirekun 
    for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () { // Корень проблемы здесь.
    // Ты обьявляешь (не вызываешь!) в цикле анонимную функцию. При создании эта функция получает
    // ссылку на внешнее лексическое окружение, которым, в данном случае, является тело цикла for.
    // Когда функция вызывается, в своем лексическом окружении i она не находит, и продолжает поиск
    // во внешнем. К моменту вызова, цикл завершен, и i в его лексическом окружении равна thumbnails.length
    fullPhoto.src = photos[i];
  });
}
    Ответ написан
    Комментировать
    Комментировать

  • Какие сайты хорошо подготовят к собеседованию React разработчика?

    @myaca
    У тебя могут спросить совершенно разные задачки, из того что мне приходит в данный момент в голову:
    - расскажи какие значения свойства position, display ты знаешь
    - способы выравнивания элемента по центру

    - как работает this в javascript
    - как работает прототипное наследование в javascript
    - generators, async/await, promises, setTimeouts, что из них раньше выполнится и т.п., расскажи про микротаски
    - variable hoisting

    - расскажи про HoC, что это такое, где используется
    - расскажи про render props
    - расскажи про portals
    - расскажи про context api
    - react component lifecycle hooks
    - что такое middlwares, какое у них в принципе назначение, какие знаешь, какими пользовался
    - как можно уменьшить количество ререндеров, какие способы оптимизации ты знаешь

    - CORS - ?
    - ФП vs ООП сравнение, их особенности и сильные/слабые стороны
    - composition vs inheritance
    - различные вопросы по паттернам, например рассказать про observer, как это работает концептуально
    - расскажи про пирамиду тестирования

    т.е. обычно идут вопросы в основном на поговорить, чтобы понять что из себя представляет собеседник, ведь на один и тот же вопрос можно ответить совсем по-разному :)
    Ответ написан
    Комментировать
    Комментировать

  • Насколько актуальны данные книги (JavaScript, ООП, Python)?

    @kindpirate
    1 и 2 - почитайте, лишним не должно быть, если уже есть какой-то опыт в js.
    Конкретно про 3 книгу не скажу. Многие советуют книгу Банды 4х (опять же классика, но может быть тяжело по началу). Если совсем ничего не знаете по данной теме, то можно взять книгу из серии Head First "Паттерны проектирования" (только там для описания используется java).
    4 и 6 книги точно не устарели - классика всегда актуальна.
    5 книга - дело вкуса:)
    Да, забыл оставить полезную ссылку с алгоритмами и структурами данных на js: https://github.com/trekhleb/javascript-algorithms
    Ответ написан
    Комментировать
    Комментировать

  • Какие существуют "общие" правила по верстке web страниц?

    AleksandrB
    @AleksandrB
    Совсем недавно вывел "Hello world"
    Святая книга версальщика
    Ответ написан
    Комментировать
    Комментировать

  • Какие существуют "общие" правила по верстке web страниц?

    @itsjustmypage
    Перевести блочную модель в привычный вид (*, *::before, *::after {box-sizing: border-box;}
    Подключить normalize.css (body margin 0 там тоже есть).
    Верстка семантическими тегами. Header, main, footer, section, article, aside, вот это всё. О том где и как их применять подробно в спецификации https://www.w3.org/TR/html/fullindex.html#index-el...
    Сохранять семантичность и доступность при кастомизации форм всех видов (input, button). Пример правильной кастомизации чекбоксов https://www.youtube.com/watch?v=E6kLaaQFctU
    Размечать документ, сохраняя правильную структуру заголовков (h1-h6), что такое правильная структура есть в спецификации https://www.w3.org/TR/html/sections.html#the-h1-h2...
    Использовать какую-либо методологию вёрстки (обычно БЭМ).
    Верстать модульно, максимально независимыми блоками (см пункт о методологии).
    Сжимать изображения, использовать SVG при возможности (векторные иконки, косые и криволинейные украшательства и т.д.)
    Использовать автопрефиксер для автоматического проставления префиксов в CSS.
    Стили для обработки пользовательского ввода (на случай, если текста будет слишком много/мало, длинные слова и т.д.)
    Как-нибудь обработать FOUT(мерцание нестилизованного текста)/FOIT(мерцание невидимого текста). Как правило это просто font-display: swap.

    Пока не знаю что ещё добавить, можешь погуглить чеклисты вёрстки, взять что-то из них.
    И здесь посмотреть webmasters.teamdev.com
    Ответ написан
    Комментировать
    Комментировать

  • IIFE и область видимости?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Мне кажется, нет. т.к. вот это получается выражение (function foo() {}), и области видимости тут не должно быть (тем более, мы говорим о JS, где область видимости не появляется в выражении или фигурных скобках).
    Можно написать вот так
    var a = function foo() {};
a();

    и ничего не изменится. Но вот так написать мы не можем
    function foo() { }()
    по той причине, что это не выражение, поэтому чтобы ее сразу вызвать, мы создаем выражение при помощи скобок. Это как
    {} + [] // 0
({} + []) // [object Object]

    В первом случае у нас не получилось выражения, сначала у нас фигурными скобками создается блок, а потом отдельное выражение +[]. А во втором все считалось в выражении, поэтому получился объект + массив. Поэтому даже так заработает
    ( function foo() {}())
    Не думаю, что где-то создается область видимости. т.е. мы имеем их только два - глобальную и в функции.
    PS: Если я не прав коллеги, поправьте.
    Ответ написан
    3 комментария
    3 комментария

  • Есть ли смысл читать паттерны банды четырех, если ты js-разработчик?

    dimka-dooz
    @dimka-dooz
    front-end разработчик)
    Банда четырех пишет достаточно академично, и въехать будет тяжеловато.
    Я думаю знакомство с патернами стоит начать с книги
    "Эрик Фримен, Элизабет Фримен - Паттерны проектирования (Head First O'Reilly)" + тут примеры на java.
    Что касается js- там есть свои особенности поэтому в помощь Стоян Стефанов - JavaScript. Шаблоны и Эдди Османи Паттерны для масштабируемых JavaScript-приложений.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно работать с Ajax?

    @kudis
    Bitrix developer
    1. чтобы получить из ajax ответ типа json, нужно вежливо попросить, добавив параметр dataType: 'json'
    2. Чаще всего в пользовательских формах разбор ошибок ajax не требуется, т.к. это внутренняя кухня и пользователь должен знать только то, что форма не отправилась и ему нужно "подождать и повторить"
    Ответ написан
    1 комментарий
    1 комментарий

  • Как отфильтровать активные чекбоксы?

    0xD34F
    @0xD34F Куратор тега JavaScript 
    const getCheckedValues = elements =>
  [...elements].reduce((acc, n) => (
    n.checked && (acc[n.name] = acc[n.name] || []).push(n.value),
    acc
  ), {});

    Если пустые группы тоже должны присутствовать, то

    const getCheckedValues = elements =>
  Array.prototype.reduce.call(
    elements,
    (acc, { name, value, checked }) => (
      acc[name] = acc[name] || [],
      checked && acc[name].push(value),
      acc
    ),
    {}
  );
    Ответ написан
    Комментировать
    Комментировать

  • Gulp и plumber, перестает работать после ошибки в коде?

    @Za0r
    pop()
    gulp.task('css', ['sass'], () => {
    gulp.src('app/css/style.css')
    .pipe(cssnano())
    .pipe(rename({
    suffix: '.min'
    }))

    попробуй так
    взято отсюда https://toster.ru/q/212922,помогло в свое время
    Ответ написан
    1 комментарий
    1 комментарий

  • Как добиться такого результата?

    @FBI_Agent
    Посмотри здесь
    Ответ написан
    Комментировать
    Комментировать

  • Как добиться такого результата?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    codepen.io/chriscoyier/pen/41d6e36ac584ee0401064d1...
    Ответ написан
    Комментировать
    Комментировать

  • Как добиться такого результата?

    @lemme
    Frontend 
    .circle {
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
}

    https://jsfiddle.net/b800vkap/

    Единственный минус, родитель будет прокликиваться.
    Ответ написан
    7 комментариев
    7 комментариев