Рубрика «javascript» - 526

Привет, меня зовут Игорь (iamo0), я старший фронт-энд разработчик в Островке. Я занимаюсь нашим основным продуктом: сайтом Ostrovok.ru. С помощью нашего сайта ежедневно бронируют отели тысячи человек, поэтому для нас очень важно, чтобы качество нашего продукта было на высоте. А для этого нужно не отвлекаться на разного рода мелочи и уметь эффективно решать поставленные задачи.

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

Не претендую на то, что мой рассказ сорвет покровы или станет настоящим откровением. Хочу поделиться с вами опытом работы с большими приложениями, накопленным разработчиками Островка.
Читать полностью »

Дата — крайне неудобная штука для работы с ней в плане создания UI.

Мало того, что она составная (год, месяц, день), и ее компоненты не кратны между собой. Так она еще и довольно велика, но при этом требует претенциозной точности — ввод года рождения в выпадающем списке, если вам больше 8 лет — задача на тренировку силы воли.

Мой вариант решения проблемы

DatePalette — фреймверк, создающий UI для работы пользователя с датой в браузере

Для самых нетерпеливых — да, есть функционирующее демо — jsfiddle.net/Meettya/aDAsa/embedded/result/

Читать полностью »

В ответ на посты о кнопках для шаринга в социальных сетях с громоздким исходным кодом, и сложной детальной кастомизацией, хочу показать хабрасообществу решение которое однажды написал неизвестный, но однозначно добрый программист. Автор сего чуда не я, но использую это решение уже больше года в проектах с которыми работаю.
Читать полностью »

Для скрытия элементов Web-страницы, т.е. для того, чтобы сделать эти элементы невидимыми, а также для того, чтобы восстановить их видимость на Web-странице, используется два свойства каскадных листов стилей: свойство CSS display и свойство CSSvisibility.

Читать полностью »

JSter – все, что нужно для JavascriptНасколько сложно собрать все Javascript библиотеки в одном месте? Задача, конечно, непростая, но веб-разработчик из Финляндии Juho Vepsäläinen потратил на это около семи месяцев и справился с ней достаточно успешно. Его проект JSWiki собрал около 2000 звездочек на гитхабе, содержит более 30 категорий, в которых перечислены самые разнообразные проекты для frontetnd разработки. Сколько библиотек и утилит там упомянуто посчитать очень трудно. Прежде всего, потому что каталог слабо структурирован и не содержит практически ничего кроме ссылок.

Тем не менее, JSWiki послужила нам отличной базой для нового проекта JSter. Вместе с Juho Vepsäläinen мы разработали совершенно новый Javascript каталог. В нем уже почти 700 библиотек и любой пользователь может дополнить список.
Читать полностью »

Привет!

Долго не мог решить, как это оформить – как вопрос в QA или как пост, в итоге, 4-ый пункт правил оформления вопроса меня насторожил — «содержит в себе действительно вопрос, но не повод для дискуссии.», и я решил это сделать постом.

До сегодняшнего вечера, я считал, что немного разбираюсь в JavaScript, и даже знаю какие-то фишки клиентской оптимизации:
— к примеру, минимизировать и обфусцировать скрипты, склеить их в один файл и позволить закэшировать его браузеру;
— так же я свято верю в то, что нельзя засорять window большим количеством глобальных объектов, это так же может сказаться на производительности и «качестве» (собственно об этом и пойдёт речь)

Не помню, что именно меня натолкнуло на мысль открыть консоль в chrome development tools, находясь на vk.com (куда я к слову очень редко захожу), но назад дороги уже нет…

Сначала я удивился отсутствию jquery. Символ доллара, конечно занят, но совсем не под jQuery, а вот под такую штуку:


function () { var curArgs = Array.prototype.slice.call(arguments); return func.apply(obj, args.concat(curArgs)); }

Попытка достучаться через jQuery тоже ни к чему не привела. Ну ладно, подумал я, они, наверное, как yahoo, написали свой мега крутой framework с блэк-джеком и без jquery. Но я решил убедиться, что в объекте window нет какого-нибудь странного свойства, в которое затисался jQuery (ну может он скрывался бы в window.jqry).

Я написал в консоль window, нажал enter, развернул «дерево», чтобы увидеть список свойств объекта и…
Читать полностью »

Пару недель назад мне попалась на глаза книга Стояна Стефанова (Stoyan Stefanov) Объектно-ориентированный Javascript. У книги был настолько высокий рейтинг на Амазоне (12 обзоров на 5 звезд), что я решил просмотреть, нет ли в ней чего-нибудь что можно было бы порекомендовать другим. Мне очень понравилось, как все описывается в разделе про функции, с которого я начал; поток примеров выстроен таким приятным и прогрессивным образом, что даже начинающие очень легко освоят его. Однако практически сразу я наткнулся на интересное заблуждение, описываемое на протяжении целой главы — удаление функций. Есть и другие ошибки (такие как разница между объявлением функции и оператором function), но сейчас мы не будем их обсуждать.

Книга утверждает, что «функции работают как обычные переменные — их можно скопировать в другую переменную или даже удалить». И приводится следующий пример:

>>> var sum = function(a, b) {return a + b;}
>>> var add = sum;
>>> delete sum
true
>>> typeof sum;
"undefined"

Если не обращать внимания на пару отсутствующих точек с запятой, что еще не так с этим куском кода? Конечно, проблема в том, что удаление переменной sum не должно было пройти успешно; выражение с оператором delete не должно разрешаться в true и typeof sum не должно вернуть «undefined». Все потому, что в яваскрипте нельзя удалять переменные. По крайней мере, те, которые определены таким образом.

Так что же происходит в этом примере? Опечатка? Диверсия? Скорее всего нет. На самом деле весь этот отрывок кода скопирован из Файрбага, который Стоян, должно быть, использовал для тестирования по-быстрому. Почти похоже что у Файрбага какие-то свои правила по поводу удаления. Это Файрбаг сбил Стояна с толку! Так что же на самом деле здесь происходит?
Читать полностью »

Пару недель назад мне попалась на глаза книга Стояна Стефанова (Stoyan Stefanov) Объектно-ориентированный Javascript. У книги был настолько высокий рейтинг на Амазоне (12 обзоров на 5 звезд), что я решил просмотреть, нет ли в ней чего-нибудь что можно было бы порекомендовать другим. Мне очень понравилось, как все описывается в разделе про функции, с которого я начал; поток примеров выстроен таким приятным и прогрессивным образом, что даже начинающие очень легко освоят его. Однако практически сразу я наткнулся на интересное заблуждение, описываемое на протяжении целой главы — удаление функций. Есть и другие ошибки (такие как разница между объявлением функции и оператором function), но сейчас мы не будем их обсуждать.

Книга утверждает, что «функции работают как обычные переменные — их можно скопировать в другую переменную или даже удалить». И приводится следующий пример:

>>> var sum = function(a, b) {return a + b;}
>>> var add = sum;
>>> delete sum
true
>>> typeof sum;
"undefined"

Если не обращать внимания на пару отсутствующих точек с запятой, что еще не так с этим куском кода? Конечно, проблема в том, что удаление переменной sum не должно было пройти успешно; выражение с оператором delete не должно разрешаться в true и typeof sum не должно вернуть «undefined». Все потому, что в яваскрипте нельзя удалять переменные. По крайней мере, те, которые определены таким образом.

Так что же происходит в этом примере? Опечатка? Диверсия? Скорее всего нет. На самом деле весь этот отрывок кода скопирован из Файрбага, который Стоян, должно быть, использовал для тестирования по-быстрому. Почти похоже что у Файрбага какие-то свои правила по поводу удаления. Это Файрбаг сбил Стояна с толку! Так что же на самом деле здесь происходит?
Читать полностью »

Язык JavaScript был представлен как язык функционального программирования. Причина заключается в том, что функции в JS не просто разделяют логику на операционные блоки, функции являются объектами первого класса, способными создавать другие объекты. Подобная зависимость от функций одновременно является как сильной стороной, так и настоящим проклятием этого языка. Сильная сторона заключается в том, что язык, обладая подобными особенностями, становится легковесным и быстрым (каким JavaScript изначально и видели его создатели). Однако если вы не знаете что делаете — однозначно ждите беды.

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

Итак, существует четыре пути вызова функций:

  • Вызов метода — Method Invocation
  • Вызов функции — Function Invocation
  • Вызов конструктора — Constructor Invocation
  • Применить и вызвать — Apply And Call Invocation

Читать полностью »

Введение

Комментирование статей в СМИ и блогах давно вошло в привычку.
Комментарии — это удобный инструмент для обмена мнениями между читателями, установления обратной связи с автором и возможность отразить альтернативные точки зрения и т.п. Отдельно стоит отметить, что комментарии оказывают существенное влияние на восприятие и оценку информации, приведённой в статье.
Всё это работает при условии что в процессе участвуют на равных условиях адекватные пользователи уважающие мнение друг друга.
Однако, есть личности которые не готовы играть по общим правилах. Они не готовы ужиться с тем, что нормальные пользователи мирно обмениваются мнениями и информацией. Эти личности также обладают достаточными ресурсами для нарушения равновесия. Они натравливают ботов и Путин-югенд на мирных комментаторов. Баланс таким образом нарушается. За счёт материальных ресурсов, тот кто обладает одним голосом получает возможность значительно большего влияния на общественное мнение.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js