Метод функций bind своими руками
Разбираемся, как работает метод функций bind, как происходит привязка контекста и строим свой аналог на основе метода apply
React на практике: приложение с сортировкой и поиском данных
В первом выпуске React Challenge я предложил вам построить небольшое приложение на React, чтобы вы смогли прощупать библиотеку на более сложном проекте, чем, например, TODOList. Для выполнения челенджа у вас был небольшой стартовый шаблон, который отвечал за компилирование JavaScript и Sass, а также за генерирование случайных данных для приложения. Всего в первом челендже по официальным данным (количество форков на Github) приняло участие более 150 человек и многие даже довели дело до конца. Настало время во всём разобраться и подвести итоги.
ES6 классы
Нет, ничего не изменилось, прототипы никуда не ушли, а классы лишь приятная обёртка над прототипным наследованием. В классическом понимании классов в JavaScript никогда не существовало и не будет существовать никогда. Многие разработчики, особенно те, которые решили познать мир JavaScript после изучения другого языка программирования, не понимают (или не хотят понять) разницы между классическим и прототипным наследованием, в результате чего они буквально отказываются полностью использовать самый мощный инструмент, которым только может вооружиться JavaScript-разработчик. Поэтому данная статья, в первую очередь, призвана объяснить, почему классы, появившиеся в новом стандарте языка, не то, чем кажутся на первый взгляд.
Добро пожаловать в мир React
Сейчас вы на каждом шагу вы слышите: "React! Виртуальный DOM! Компоненты!". Настало время внести ясность, что это такое, как с этим жить и работать.
React Challenge #1: сортировка и поиск
В первом выпуске React Challenge я предлагаю вам прощупать React и, в целом, составить для себя какое-то представление о том, что это вообще такое. В этом челендже будем разрабатывать достаточно простое приложение для поиска и сортировки данных.
React Challenge: анонс
Учить новую технологию всегда непросто. Ещё сложнее сделать это одному, когда нет возможности спросить совета у более опытных разработчиков или своих "товарищей по несчастью". React Challenge призван объединить всех желающих научиться использовать React и помочь освоить библиотеку на более сложных и интересных примерах, чем Hello, World! или TODOList.
Продвинутое использование метода reduce
Метод массивов reduce не похож на другие перебирающие методы массивов: результатом его выполнения может быть значение любого типа данных, которое задаёте сами. Именно такая особенность может сделать reduce чрезвычайно мощным инструментом в руках опытного разработчика.
Объектно-ориентированный JavaScript: дескрипторы
Над каждым свойством любого объекта в JavaScript можно провести определённый набор манипуляций. Свойство можно записать, изменить, получить значение, а с помощью цикла for .. in
или метода Object.keys
перечислить все свойства объекта. Вполне стандартный набор операций для работы с объектами, к которому вы, скорее всего, уже привыкли. До релиза стандарта ES5 все эти "качества" объекта изменить было невозможно, но теперь для каждого свойства можно детально описать модель его поведения с помощью дескрипторов.
Объектно-ориентированный JavaScript: наследование на практике
В одной из прошлых статей мы подробно рассмотрели процесс создания библиотеки для валидации данных, полученных из поля ввода. Библиотека хорошо работает и справляется со своей задачей. Тем не менее, если оценить библиотеку в более глобальном масштабе, то можно заметить, что она состоит из двух частей: валидации данных и коммуникации с DOM. В этой статье разберём процесс создания конструктора-родителя, который будет отвечать только за валидацию переданных ему данных, после чего напишем дочерний конструктор, который будет заниматься "грязной" работой: получать данные от DOM элементов, писать сообщения и запускать callback функции.
Дайджест лучших материалов за февраль
Дайджест лучших материалов из группы за второй месяц 2016 года
Объектно-ориентированный JavaScript: наследование
Наследование в JavaScript постоянно подвергается критике. Что, на самом деле, не удивительно — люди, привыкшие к понятию "класс", обычно просто не могут сходу понять, какой мощный инструмент попал в их руки и пытаются применить свои знания о классовом наследвании в JavaScript. В результате разработчик остаётся недоволен — большая часть его паттернов не вписывается в прототипное наследование. Данная статья призвана объяснить, как работает прототипное наследование, чтобы ваш опыт использования JavaScript не испортился "классовыми" заблуждениями.
Объектно-ориентированный JavaScript: немного практики
Настало время применить все ваши навыки объектно-ориентированного JavaScript и создать небольшую библиотеку. Библиотека предназначена для валидации данных из одного поля ввода, содержит несколько простых встроенных методов для простых манипуляций с данными и небольшой строковый шаблонизатор для вывода понятных сообщений.
Объектно-ориентированный JavaScript: прототипы
Понимание принципов работы прототипного наследования очень важно для любого JavaScript разработчика. В этой статье расскажем, как создавать методы и свойства, которые будут доступны всем объектам, созданным с помощью одной функции-конструктора.
Объектно-ориентированный JavaScript: функции конструкторы
Итак, вам нужно создать десяток объектов с одинаковыми свойствами и методами. Как раз для этого есть функции конструкторы, которые позволят не переписывать код для каждого объекта и в значительной степени помогут сэкономить ресурсы.
Виселица
Напишите игру "виселица"
Объектно-ориентированный JavaScript: работа с объектами
В прошлой статье мы выяснили, что не всё в JavaScript является объектом, и все данные разделяются на примитивы и объекты. В этой статье рассмотрим способы создания объектов, что такое методы, свойства, как их присваивать, способы итерации по всем свойствам объектов и использование ключевого слова this
.
Объектно-ориентированный JavaScript: примитивы и объекты
Скорее всего, вы читали или слышали, что всё в JavaScript является объектом. Ещё чаще можно увидеть опровержения этого утверждения. Подобные споры возникают регулярно и обусловлены в большей степени недопониманием концепций JavaScript. И, на самом деле, причина считать примитивы объектами есть — примитивы имеют свойства и методы, поведение которых во многом схоже со свойствами и методами объектов. В статье рассмотрим, чем примитивы, на самом деле, отличаются от объектов и почему это так важно.
Что за треугольник?
Всего существует 3 вида треугольников: остроугольные, прямоугольные и тупоугольные. В задаче требуется написать функцию, которая будет тестировать треугольники и сообщать, к какому виду они относятся.
Перебирающие методы массивов изнутри
forEach
, map
, filter
, some
, every
и reduce
являются ключевыми методами массивов в JavaScript, так как большая часть данных, например приходящая с сервера, в JSON формате подразумевает их использование для удобной фильтрации и преобразований. В статье будет рассмотрено применение каждого метода, а также рассмотрены способы их реализации в виде функций.
Дайджест лучших материалов за январь
Дайджест лучших материалов из группы за первый месяц 2016 года.
Измерение производительности блоков кода
Измерять производительность блоков кода очень просто с помощью инструментов разработчика и функций console.time()
и console.timeEnd()
.
Пара двойников
В задаче напишем функцию, возвращающую переданное число, увеличенное вдвое. Если же переданное число состоит из двойников, функция вернет исходное число.
ES6: Расширение литерала объектов
Краткие формы записи свойств и методов объектов немного сократят код и сделают его немного более читабельным относительно аналогичного кода в ES5. Тем не менее новые краткие формы записи накладывают некоторые ограчения при работе с рекурсией и передаче методов объекта в качестве callback функции.
ES6: Цикл for .. of
Цикл for .. of
во многом похож на метод массивов forEach
, но имеет ряд преимуществ над ним. С появлением нового вида циклов отпадает необходимость использовать конструкцию [].forEach.call(elements, function(){})
для итераций по коллекции DOM элементов.
Простой chaining
Chaining — приём, при котором после вызова каждого метода возвращается исходный объект, таким образом, появляется возможность выполнять несколько методов последовательно, а не вызывать их по отдельности. На его использовании построены методы многих библиотек, например, jQuery.
ES6: Стрелочные функции
Стрелочные функции не просто "синтаксический сахар", как это может показаться на первый взгляд. Главная причина их появления в ES6 — недопонимание, которое возникает у большинства разработчиков при работе с ключевым словом this
. С релизом нового стандарта отпадает необходимость писать var self = this
при использовании колбэков, что в значительной степени упрощает чтение кода и понимание происходящего.
Найди анаграммы
Анаграммы — слова, которые получаются при перестановке букв или звуков местами в исходном слове. Например, апельсин и спаниель, старорежимность и нерасторжимость, равновесие и своенравие. В задаче напишем функцию для проверки являются ли два переданных ей слова анаграммами или нет.
Проверка нахождения значения в массиве
До релиза ES2016 ещё долго, а, значит, и метод массивов Array.prototype.includes
использовать можно будет ещё не скоро. Сейчас же можно немного сократить свой код, используя побитовый оператор ~
.
Передача аргументов в колбэки
По умолчанию в callback-функцию нельзя передавать аргументы, что в некоторых случаях приводит к очень неприятным проблемам. В статье расскажем, как обойти это ограничение.
Стилизация плэйсхолдеров
Применение стилей к тексту плэйсхолдеров не самое лёгкое занятие. Необходимо учитывать все префиксы для разных браузеров, в результате чего приходится писать достаточно объемное количество кода. К счастью CSS препроцессоры значительно облегчат его создание. В статье рассмотрим основы применения стилей к плэйсхолдерам, принципы их анимации, а также напишем небольшую библиотеку миксинов на Sass, которая значительно упростит работу с плэйсхолдерами.
ES6: Интерполяция
С выходом стандарта ES6 появилась возможность использовать строковую шаблонизацию. Новый вид строк, создаваемый с помощью символов `
поддерживает интерполяцию переменных и любых логических выражений.
ES6: Перед тем, как вы начнёте
Перед изучением нового стандарта ES6 необходимо помнить, что многие нововведения базируются на прошлом стандарте ES5. Для полного понимания многих новых конструкций и особенностей синтаксиса ES6 необходимо знание основ JavaScript. В статье вы найдете подборку книг и несколько воспросов для проверки своей готовности изучения нового стандарта.