• Где используются прототипы, наследование в JS приложениях?

    yurakostin
    @yurakostin
    Front-end developer
    Здравствуйте.
    На самом деле всё проще.
    Не обижайтесь, но вы просто не так хорошо знаете сам javascript.

    1. prototype - ссылка на прототип объекта.
    Array.prototype, Number.prototype. В нём хранятся методы и свойства этого объекта, а также... (далее переходим к __proto__)

    2. __proto__ - тоже ссылка на прототип. Например, введите в консоли [] и раскройте ветвь. У вас всего два свойства. Одно - length - количество элементов в массиве. Другое - __proto__. А где же все методы, которые мы можем использовать с массивами filter, map, slice и так далее? Они лежат в __proto__. Более подробно здесь.

    3. inheritance соответственно - наследование. JS построен на прототипной парадигме (надеюсь, я тут не наврал). Array наследуется от Object. Это можно легко увидеть, посмотрев Array.prototype. Там вы увидите тот самый __proto__, являющийся ссылкой на Object.prototype. Вся инфа по ссылке выше.

    4, 5. call и apply постепенно уходят из обихода, но тем не менее про них важно знать и уметь ими пользоваться. Эти методы позволяют вызвать функцию в контексте, который вам необходим.

    Например вам нужно вызвать метод какого-то объекта, который работает с this в контексте другого объекта, у которого этого метода нет. Вы можете сделать следующее:
    var o_1 = {
    	name: 'Peter',
    	hello: function () {
    		console.log('Hello, ' + this.name);
    	}
    };
    
    var o_2 = {
    	name: 'Jane'
    };
    
    o_1.hello.call(o_2); // Фактически вы говорите "вызови метод такой-то для объекта такого-то"


    Для передачи аргументов в "заимствованную" функцию оба метода принимают аргументы, каждый по-своему.
    var o_1 = {
    	name: 'Peter',
    	hello: function () {
    		console.log('Hello, ' + this.name);
    	},
            sum: function (a, b) {
    		console.log(`${this.name} sum a and b to ${a + b}`);
    	}
    };
    
    var o_2 = {
    	name: 'Jane'
    };
    
    o_1.sum.call(o_2, 2, 4);
    o_1.sum.apply(o_2, [1, 2]);


    Отличие между этими двумя методами в том, как они принимают аргументы, которые попадут в функцию.
    call принимает список аргументов, начиная со второго, а apply, соответственно, принимает массив.

    Также, ничто не мешает вам вызвать функцию, которая не нуждается в контексте, для этого первым аргументом можно передать null.

    var o = {
    	sum: function (a, b) {
    		console.log(a + b);
    	}
    }
    o.sum.call(null, 1, 2);
    o.sum.apply(null, [1, 2]);


    Подробнее тут.

    6. bind тоже довольно простая штука. Отчасти он похож на предыдущие два метода, за исключением того, что он не вызывает функцию сразу же.
    Основная его задача - вернуть функцию, которая будет вызвана для нужного вам контекста.

    var o = {
    	a: 1,
    	b: 2,
    	sum: function () {
    		console.log(this.a + this.b);
    	}
    };
    
    var o2 = {
    	a: 10,
    	b: 20
    };
    
    var o2Sum = o.sum.bind(o2);
    
    o2Sum();


    Также с помощью bind можно каррировать функции.
    Всё есть здесь

    PS: надеюсь, код не содержит ошибок и я нигде не налажал и всё правильно рассказал.
    Ответ написан
    4 комментария
  • Как применять знания javascript?

    yurakostin
    @yurakostin
    Front-end developer
    Довольно распространённая проблема.
    Вам нужен либо ментор, который будет помогать вам развиваться, либо просто используйте собственное воображение.

    Задач можно придумтаь, сколько угодно. И даже, если вы будете делать хотя бы тот же самый плагин попапов, то это НЕ ПЛОХО. Вы должны написать велосипед. Вы должны сделать работу, которую кто-то уже сделал 1000+ раз. Хорошо бы, чтобы после своей реализации вы посмотрели чужие.

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

    Или заставьте тот же элемент передвигаться по экрану с помощью клавиш-стрелок.

    А если вам больше нравится с данными работать, то найдите генератор JSON данных. С помощью js сформируйте на основе этих данных таблицу, потом добавьте сортировку по названиям колонок.

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

    Успехов.

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

    yurakostin
    @yurakostin
    Front-end developer
    Вставлю свои пять копеек.

    Начну как всегда, наверное издалека, уж извините.

    У меня стало довольно мало времени на то, чтобы разрабатывать дома: ребёнок, удалённость жилья от места работы и т д.
    И вот ушедшие три дня выходных я потратил на ресёрч некоторых вещей.
    Прочитал почти половину документации по Vue, запустил hello world на clojure script, ну и галопом по европам прошёл по реализациям FRP на js, остановивишь на cellx. С ней просидел весь вечер.
    И вот только после этого я ощутил то забытое чувство, когда узнаёшь что-то новое, расширяешь кругозор.

    К чему я это всё?

    Я вспомнил, что до переезда, до ребёнка, я "летел" домой и до часу-двух ночи изучал что-то новое. Читал книги/статьи/какие-либо источники, и задавал себе вопросы "А что если сделать так?", "А если применить этот метод?", "А если вызвать с этим параметром?", etc, и пробовал на все свои вопросы найти ответы.
    А также я постоянно хотел что-то "напилить". Свой сайт, какой-нибудь маленький проект. Какой-нибудь маленький плагин. Можно продолжать бесконечно..

    Самое интересное не то, что я получал какой-то интересный готовый продукт - этого почти ни разу не случилось, а то, что я повышал качество своих навыков, узнавал что-то новое, так как иногда что-то не работало, приходилось гуглить, рефакторить, использовать функции, библиотеки, фреймворки, которые ещё ни разу не использовал. Именно этот опыт на мой взгляд делает вас ценным разработчиком.

    Но - как в рекламе - и это ещё не всё.

    Ещё есть важные аспекты, которые делают из вас хорошего разработчика:
    1. Умение и можно сказать любовь читать чужой код. Читать, понимать(править?). Дело в том, что на любых проектах, особенно тех, где большая кодовая база была написана до вас, вам придётся разбираться в коде, и соответственно чтение и правка чужого кода будет занимать примерно 65-85% вашего времени.
    2. Отсутствие боязни перед чтением документации. Кто-то бежит смотреть статьи, где люди пишут свой опыт внедрения или, извините "пробования" какой-либо технологии или инструмента, и упускает огромный пласт информации, который описан в документации. Пласт, который может затянуть старт использования, но помочь вам быть абсолютно в теме того, с чем и как вы собираетесь рабоать.
    3. Третий пункт, немного связан со вторым. Вам нужно знать английский. На уровне достаточном чтобы понимать эту самую документацию. А также читать статьи зарубежных разработчиков. Ведь почти всё, что мы учим, сделано за бугром, и в связи с тем, что английский - международный язык, все более менее популярные библиотеки/фреймворки/инструменты, а точнее документация к ним, существуют на английском языке как минимум.

    Это всё, я думаю, более менее объективные пункты.. Ээмм, ну ладно, субъективно-объективные.. Ну короче вы поняли =)

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

    yurakostin
    @yurakostin
    Front-end developer
    Если у вас нет никаких специфических требований, то делайте самый простой и понятный вариант.
    Изменятся требование - измените реализацию.
    Ответ написан
    Комментировать
  • Ajax-запросы, почему не работает?

    yurakostin
    @yurakostin
    Front-end developer
    Используйте отладчик чтобы видеть как работает ваш код.

    $(window).scroll(function(){
        debugger;
    Ответ написан
    Комментировать
  • Почему диалоговое окно конфликтует с анимацией якоря?

    yurakostin
    @yurakostin
    Front-end developer
    А какой код вы убираете и начинает работать?

    В общем-то, я думаю, что дело в том, что вы допустили небольшую ошибку.
    Не нужно использовать jquery везде, где только можно. От этого только путаница.

    var id = this.href;
    var top = document.getElementById('#'+id).getBoundingClientRect().top;
    
    $('body, html').animate({ scrollTop: top }, 1500)


    Если не заработает - пишите, будем разбираться.
    Ответ написан
    Комментировать
  • Вывод информации в зависимости от выбранной даты JQUERY?

    yurakostin
    @yurakostin
    Front-end developer
    А что значит - сравнить?
    Вы знаете, что такое timestamp?

    Number(new Date()); // timestamp

    https://learn.javascript.ru/datetime
    Ответ написан
    Комментировать
  • Как лучше и правильнее сделать калькулятор на JQuery?

    yurakostin
    @yurakostin
    Front-end developer
    Правильнее будет сделать на javascript. Вы ведь не планируете поддерживать совсем старые браузеры?

    Сделать можно по-разному.
    Лучше, конечно, сделать хорошо, чем писать спагетти-код.

    Можно вообще сделать весь интерфейс через js.
    Данные получить js запросом на сервер.
    И на их основе всё отрисовать. Тогда не нужно будет хранить-читать ничего в DOM-е.

    У вас тут есть:
    1. Отображение машины (и какое-то не совсем понятное меню).
    2. Табы (или что это?)
    3. Таблица.

    Вы не объяснили нам как это приложение должно работать.
    Что происходит при клике на другие табы?
    Очень мало информации.
    Как только вы сможете описать полностью схему работы, вы наверняка начнёте понимать как это всё должно быть написано, ну или мы вам сможем объяснить.
    Ответ написан
  • Как вынести построение DOM в отдельную функцию с настраиваемыми options?

    yurakostin
    @yurakostin
    Front-end developer
    1. Вынесите в отдельную функцию рендер одного item-а. Лучше если функция будет получать данные в качестве аргумента, а на выходе отдавать HTMLElement - в вашем случае со всеми детьми.
    2. Лучше создавайте ноды, вместо работы со строками, или используйте тогда уж js string template.
    3. Достаточно проверять items.length
    4. Постарайтесь постепенно отказаться от jquery, если, конечно, не поддерживаете какое-нибудь старьё. items.forEach вам вполне подойдёт. И можно будет вообще отказаться от проверки items.length, только сохраняйте в items пустой массив, если данные не пришли
    5. Если я не ошибаюсь, то теперь, когда функция возвращает вам элемент вашего списка, вы уже дальше сами можете определить, как его использовать: полностью заменять содержимое, или добавлять. И значит вам не нужны никакие options.

    Мне если честно не до конца понятна концепция $('.container').html(html); и $(html).appendTo('.container');, а вникать мне не хочется. Что у вас тут происходит? То есть, почему разная логика в разных случаях?
    Ответ написан
    4 комментария
  • Как отслеживать изменения input value, которые вносит другой скрипт?

    yurakostin
    @yurakostin
    Front-end developer
    Ну, как вариант, можно использовать пользовательское событие.
    И триггерить его, когда результат работы ajax запроса попадает в ваш инпут.
    Ответ написан
    Комментировать
  • Как можно получить выбранный select по классу?

    yurakostin
    @yurakostin
    Front-end developer
    Однажды со мной поступили следующим образом https://google.gik-team.com/?q=js+%D0%BF%D0%BE%D0%...

    Было очень неприятно и с тех пор, я почти всегда находил ответы на простые вопросы сам.
    Ответ написан
  • Как спрятать DIV при скролле?

    yurakostin
    @yurakostin
    Front-end developer
    Сэр, а вы знаете, что грамотно поставленный вопрос содержит ответ?
    Вот ответ вашими словами "после opacity:0 сделать display:none"

    И господи боже, сколько можно писать на jquery?
    Ответ написан
    Комментировать
  • Как задать класс "active" ссылкам при прокрутке страницы на данном примере?

    yurakostin
    @yurakostin
    Front-end developer
    Здравствуйте.
    Есть плагин scrollspy. https://www.w3schools.com/bootstrap/bootstrap_scro...
    Разберитесь, как он работает и узнаете как это сделать.
    Ответ написан
    Комментировать
  • Рандомно появляющийся div?

    yurakostin
    @yurakostin
    Front-end developer
    1. Для анимации посмотрите css transition.
    2. Нужно писать дополнительную логику. Дерзайте.
    3. Зачем вам здесь jquery?
    Ответ написан
    Комментировать
  • Как сделать при нажатии формы срабатывал ajax и отправляло на другую страницу?

    yurakostin
    @yurakostin
    Front-end developer
    На самом деле не очень понятно, чего вы хотите достичь.

    Зачем вам ajax, если вы хотите перенаправить пользователя на другую страницу?
    Оставьте тогда форму в покое и не добавляйте ей js обработчик.

    Кстати не очень понятно, чего вы ждёте от строки:
    'location.href="http://mysite.com/error.php"'

    Или это такой способ комментирования?
    Ответ написан
    4 комментария
  • Задачки по javascript?

    yurakostin
    @yurakostin
    Front-end developer
    Здравствуйте.

    Устройтесь уже на работу(фриланс) и задач будет хоть отбавляй.
    Ну серьёзно.
    Вы хотите чтобы мы вам вот сюда скинули прикладные примеры задач из головы, которые будут абсолютно синтетическими?
    Программируйте, придумывайте себе задачи.

    Если вам нужны эти задачи, то вероятно, вы не поняли до конца, в каких ситуациях эти методы используются, так ведь? Или просто хотите руку набить?
    Ответ написан
    2 комментария
  • Как аргументировать начальству создание существующего проекта заново, с ноля?

    yurakostin
    @yurakostin
    Front-end developer
    Умные люди уже написали всё, что хотел написать я, но вставлю свои пять копеек, уж извините.

    Я очень хорошо знаком с этой болью. И раньше тоже(на прошлых местах работы) неоднократно заводил разговор о том, что нужно всё переписывать. Молодо - зелено.

    Бизнесу действительно не выгодно тратить любого вида ресурсы(время, деньги) на переписывание с нуля.
    Здесь бизнес следует правилу, которое мы - разработчики периодически забываем "работает - не трогай".

    Другое дело, что мы, в отличие от бизнеса, понимаем, что ещё немного и кодовую базу будет невозможно поддерживать.
    И хочется бросить это всё и переписать, или просто бросить и уйти туда, где трава зеленее, код чище(идеален), где можно будет использовать любые фреймворки, библиотеки, инструменты, которые на данный момент кажутся вам самыми клёвыми. Однако этого не бывает практически никогда.

    Теперь о позитивном.

    Переработка кода - отличный опыт. Я бы даже сказал, что он ценнее, чем разработка на Angular 100500 версии, которую вы хотите использовать больше для того, чтобы сказать "теперь я умею angular(подставь своё) 100500 версии".
    Вам придётся быть ещё более внимательным чем обычно, так как обновлять код нужно осторожно, чтобы ничего не сломать. Ещё более вдумчивым, ещё более внимательными, ещё более *, так как читать/понимать/править чей-то код - великий труд. К слову, это может показаться бредом, но вы вполне можете изучить что-то новое для себя пока будете рефакторить.

    И да - рефакторить нужно частями. И чем части эти будут меньше, тем лучше.
    Поэтому рекомендую взять самый адовый на ваш взгляд модуль/кусок/файл с кодом и разбить на логические части его работу. Затем осознать, что нужно разбить ещё.. ещё.. и ещё... Словом, декомпозируйте до тех пор, пока не поймёте, что дальше декомпозировать некуда.
    В итоге вы обнаружите огромный список задач. С этим списком уже можно работать. Для начала необходимо оценить его в человеко-часах. Дальше можно показать его руководителю, показать временные оценки, а самое главное - объяснить, на кой чёрт нужно тратить столько времени на эти задачи, вместо того, чтобы запилить новую фичу.
    А тратить это время нужно по той простой причине, которую мы преследуем изначально - ради чистоты, понятности, поддерживаемости кода. И.. да - если рефакторите js, то делайте это через TDD, это должно облегчить вам задачу (хотя вначале будет казаться иначе).

    Моя коллега с первой работы сейчас занимается одним интернет-магазином. Мне невероятно нравится читать её сообщения о том, что она выпиливает css код тысячами строк. Даже не представляю, насколько приятно ей смотреть на результат своей работы.

    Может показаться, что предложенный подход(рефакторинг) - полный бред и безумие, но это не так.
    Удачи вам.
    Ответ написан
    Комментировать
  • Как "запихнуть" iframe в div?

    yurakostin
    @yurakostin
    Front-end developer
    Сэр, а вы вообще пробовали это делать, или только хотели?

    У вас есть отладчик, где можно посмотреть как реализована вставка игр в div-ы через iframe-ы
    Ответ написан
    Комментировать
  • Google chrome osx url scheme. Как настроить обработчик протоколов?

    yurakostin
    @yurakostin
    Front-end developer
    Буквально вчера столкнулся

    Вот типа решение https://lifehacker.ru/2012/02/10/gmail-default-mailer/
    Ответ написан
    Комментировать
  • Где найти интерактивное изучение js?

    yurakostin
    @yurakostin
    Front-end developer
    Самый крутой интерактив это садиться и программировать.
    Всегда рекомендую, в качестве учебника для начала, прекрасный ресурс Ильи Кантора.
    https://learn.javascript.ru/
    Следуйте по урокам, выполняя все задачи, не переходите на следующий, пока не поймёте текущий. Если не получается решить задачу - посмотрите решение, но обязательно осознайте, почему работает так, а не иначе. Это может отнять время, но если js - технология, которая в будущем вам пригодится, то это время будет потрачено с пользой.

    Появился у вас вопрос, появилась идея что-то реализовать, пусть даже простое -
    откройте консольку и проверьте/создайте файлик и реализуйте, что вам взбрело в голову.

    Удачи.
    Ответ написан
    2 комментария