JavaScript

The Right Way

Привет!

Это руководство призвано ввести в курс новичков в Javascript и помочь опытным разработчикам больше узнать и лучших практиках и подходах.

Несмотря на название, это руководство не обязательно означает "Единственно верный" способ работать с JavaScript.

Просто мы решили собрать все статьи, советы и секреты от ведущих разработчиков в одном месте. Так как мы говорим о выдающихся людях, мы можем сказачать что это "правильный путь", или лучший способ делать подобные вещи.

Выбери свой путь

С ЧЕГО НАЧАТЬ

О ЯЗЫКЕ

Созданный компанией Netscape в 1995 как расширение HTML для браузера Netscape Navigator 2.0, Javascript имел в качестве основной функции - манипулирование HTML-документом и проверку данных в формах. До того, как он стал известен в мире под современным названием, Javascript назывался Mocha. Когда он выпустился в первой бета-версии он назывался LiveScript. Свое текущее название он приобрел только после выпуска компанией Sun Microsystems. Из-за похожести названий люди иногда путают Javascript и Java. Эти языки имеют похожий синтаксис, но в остальном они сильно отличаются. В отличии от C, C# и Java, Javascript - интерпретируемый язык. Это означает, что он нуждается в интепретаторе. В случае с Javascript интерпретатором является браузер.

ТЕКУЩАЯ ВЕРСИЯ

Стандарт Javascript называется ECMAScript. По состоянию на 2012 год, все современные браузеры полностью поддерживают ECMAScript 5.1. Более старые браузеры поддерживают по-крайней мере ECMAScript 3. В июне 2015 была утверждена спецификация ES6/ES2015. Следуя новому годовму релизному циклу, ES7/ES2016 был утвержден в июне 2016. Подробнее читайте о спецификации языка ECMAScript 2016 на сайтеEcma International.

Отличное описание версий, ссылок и изменений JavaScript можно найти на сайте Mozilla Developer Network.

DOM

Объектная модель документа (DOM) - это API, дающее возможность работать с HTML и XML документами. Она обеспечивает структрурное представление документа, позволяя изменять содержимое и визуальное представление посредством скриптовых языков, таких как Javascript. Подробнее на странице Mozilla Developer Network - DOM.

JS - СТИЛЬ НАПИСАНИЯ КОДА

Условные обозначения

Как любой другой язык, JavaScript имеет множество стилей кодирования. Возможно самый используемый и рекомендуемый это Руководство по оформлению Javascript кода от Google Code, но мы рекомендуем ознакомиться с Idiomatic.js.

Валидация кода

На сегодняшний день лучшим инструментом для статической валидации Javascript кода является JSHint. Мы рекомендуем всегда, когда возможно, использовать валидаторы (линтеры) для проверки вашего кода и правил оформления.

СИЛЬНЫЕ СТОРОНЫ

Объектно ориентированный

Javascript имеет сильные объектно-ориентированные возможности. Несмотря на некоторые споры которые имеют место вокруг различий ООП в javascript по сравнению с другими языками.

Подробнее: Введение в объектно-ориентированный JavaScript

Анонимные функции

Анонимные функции - функции которые динамически объявляются в процессе выполнения. Они называются анонимными потому, что они не именуются в отличии от обычных функций.

Подробнее: Анонимные функции в JavaScript

Функции как объекты первого класса

Функции в Javascript - объекты первого класса. Это означает что функции это особый класс объектов, которые могут делать все тоже самое что могут делать обычные объекты.

Подробнее: Функции как объекты первого класса в JavaScript

Нестрогая типизация

Для многих фронтенд разработчиков Javascript был первым опытом в скриптовых/интерпретируемых языках. Для этих разработчиков принцип и реализация нестрогой типизации может быть само собой разумеещимся. Однако взрывной рост популярности современных веб-приложений приводит к тому, что все большее число бэкенд разработчиков вынуждено погружаться в мир клиентских технологий. Многие из этих разработчиков приходят с опытом работы с типизироваными языками вроде C# или Java, и им кажутся странными как вольности допускаемые нестрогой типизацией, так и подводные камни, которые она в себе скрывает.

Подробнее: Понимание нестрогой типизации в JavaScript

Область видимости и всплытие определений

Область видимости: В JavaScript, функции по-факту являются ограничениями области видимости при объявлении переменных. Это означает, что обычные блоки из циклов и условных выражений (такие как if, for, while, switch и try) НЕ ОГРАНИЧИВАЮТ область видимости, в отличии от большинства языков. Так что эти блоки имеют ту же самую область видимости, что и функции в которых они используются. Таким образом нужно быть внимательнее, объявляя переменные внутри блоков, так как может показаться, что переменные доступны только внутри блока (а это не так).

"Всплытие": При выполнении все объявления переменных var и функций перемещаются в начало функции (перед ее "телом"). Это называется "всплытием"(hoisting). Так что хорошей практикой является объявление переменных в начале функции, чтобы явно задать область видимости и избежать двусмысленности, что возможно при объявлении переменных/функций ниже по коду. Это общая проблема для программистов, которые раньше писали на языках с блочной областью видимости. Это поведение получило корректировки в новом стандарте (ES6/ES2015 - почитайте про let/const).

Подробнее: JavaScript - про всплытие и область видимости

Контекст выполнения

Контекст выполнения - это наименьшая из ваших проблем, когда вы начинаете работать с Javascript. Но однажды вы понимаете, что решение проблемы, которая у вас есть, заключается в вызове другой функции с сохранением текущего контекста. И вот в этот момент вы поймете, что Function.prototype.bind() - это то, что вам нужно. А еще вы можете почитать про "стрелочные функции" из нового стандарта Javascript.

Подробнее: Что такое Function.prototype.bind в JavaScript

Замыкания

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

Подробнее: MDN - Замыкания

Строгий режим

Строгий режим из 5-й редакции ECMAScript - это способ органичить возможности Javascript. Строгий режим - не просто подмножество, он намеренно ограничивает возможности вашего кода. Браузеры с поддержкой строгого режима и без нее будут обрабатывать ваш код по-разному, так что не стоит рассчитывать на строгий режим без соответствующего тестирования вашего кода в обоих случаях. Строгий и нестрогий режимы могут сосуществовать (например строгий режим может распространяться на отдельные функции), так что переписывать свой код под строгий режим можно постепенно.

Подробнее: MDN - Строгий режим

Самовызывающиеся функции (IIFE)

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

Этот подход основывается на самовызывающихся анонимных функциях, но @cowboy (Ben Alman) ввел понятие IIFE как более семантически-верное для обозначения этого шаблона.

Подробнее: Немедленно вызываемыми функциональные выражения (IIFE)

MUST SEE

Arindam Paul - JavaScript VM internals, EventLoop, Async and ScopeChains

ТИПОВЫЕ РЕШЕНИЯ

Описание

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

Хорошим способом с этим разобраться будет чтение книги Addy Osmani Learning JavaScript Design Patterns (Изучение Шаблонов Проектирования Javascript), и ссылок ниже, которые частично взяты из книги.

Шаблоны проектирования

Порождающие шаблоны

Структурные шаблоны

Поведенческие шаблоны

Шаблоны MV*

Есть несколько реализаций традиционного MVC паттерна и его вариаций в Javascript.

ИНСТРУМЕНТЫ ДЛЯ ТЕСТИРОВАНИЯ

Описание

Различные библиотеки и фреймворки для тестирования кода на JavaScript.

Links

Поддерживается TJ Holowaychuk

Поддерживается jQuery

Поддерживается Pivotal Labs

Поддерживается командой АнгуларJS. По-большей части Vojta Jina

Поддерживается Sitepen

A JavaScript code coverage tool written in JavaScript, maintained by Krishnan Anantheswaran

Независимый набор тестовых 'шпионов', моков и заглушек для JavaScript. Без зависимостей, работает с любым тестовым фреймворком. Создан Sinon.JS community

Вспомогательные утилиты для мока функций Javascript и объекта XHR, поддерживается Leo Balter

Тест-ранер (утилита для запуска тестов) с асинхронными тестами, поддерживается Sindre Sorhus

Безболезненное тестирование Javascript, поддерживается Facebook

ФРЕЙМВОРКИ

ОБЩЕГО НАЗНАЧЕНИЯ

jQuery - это быстрая, маленькая библиотека с богатым функционалом. Создана John Resig.

Создан Yahoo!, YUI - бесплатная библиотека с открытым исходным кодом. Использует набор решений на JavaScript и CSS для построения интерфейса интерактивных веб приложений. Разработка прекращена 29го августа 2014.

Zepto - минималистичная JavaScript библиотека для современных браузеров. По-большей части имеет jQuery-совместимое API. Если вы пользовались jQuery, то вы уже знаете как работать с Zepto.

Dojo - бесплатный инструмент с открытым исходным кодом для построения высокопроизводительных веб-приложений. Проект спонсируется IBM и SitePen.

Underscore.js - JS библиотека, которая предоставляет полный набор разнообразных вспомогательных функций без изменения встроенных объектов.

MV*

Очень популярный JavaScript клиент-серверный фреймворк, созданый @jashkenas.

Создан @wycats, который явялется значимым разрабочиком jQuery и Ruby on Rails.

Упрощает построение динамических интерфейсов посредством использования паттерна Model-View-View Model (MVVM).

Создан командой из Google. Angular.js похож на полифилл для будущих версий HTML.

Cappuccino проект с открытым кодом, который подзволяет легко создавать приложения, похожие на десктопный, но так чтобы они работали в браузере.

JavaScriptMVC проект с открытым кодом который сочетает в себе лучшие идеи разработки на jQuery.

Meteor - opensource проект для создания высококачественных веб-приложений. Доступен как опытным разработчикам так и новичкам.

Spice - супер минималистичный (< 3k) и гибкий MVC фреймворк для javascript. Spice был создан для быстрого добавления к существующим приложениям и хорошо сочетается с jQuery, pjax, turbolinks, node или что там еще вами используется.

Riot - невероятно быстрая, мощная и маленькая библиотека, для использования паттерна (MV*) в построении расширяемых веб приложений. Несмотря на маленький размер содержит все необходимое - шаблонизатор, роутер, событийную модель и строгий MVP для организации струтуры приложения.

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

Библиотеки

Создана Facebook. React - это Javascript библиотека для создания пользовательского интерфейса в Facebook и Instagram. Многие люди предпочитают рассматривать React как V в MVC.

MVVM библиотека обеспечивающая двустороннее связывание, расширение HTML посредством директив и реактивные компоненты. Использу я дополнения разработчик так же получает роутинг, AJAX запрос, Flux-подобное управление состоянием, валидацию форм и многое другое. В наличии полезное расширение для Chrome, позволяющее инспектировать компоненты созданные на Vue.

Handlebars - мощный и гибкий инструмент, позволяющий создавать семантические шаблоны (с использованием компонент/вспомогательных тегов).

Асинхронный шаблонизатор для браузера и node.js.

Анимации

GSAP самый быстрый и полнофункциональный инструмент. Он во многих случаях даже быстрее CSS3 анимаций и переходов.

Velocity - библиотека для анимации с тем же API что и $.animate() из jQuery.

Bounce.js - библиотека позволяющая задавать анимации, на базе CSS3.

Простая, но мощная, Javascript библиотека для изменения и анимирования HTML5.

Move.js - маленькая JavaScript библиотека делающая анимации на базе CSS3 простыми и элегантными.

SVG - прекрасный способ реализовать взаимодествие с пользователем, векторная графика, которая не зависит от разрешения и размера экрана.

Rekapi - библиотека для создания анимаций на базе canvas или DOM, так же хорошо как CSS @keyframe анимации в современных браузерах.

Позволяет использовать в качестве favicon спрайты, картинки или видео.

Textillate.js - набор прикрасных библиотек предоставляющий легкие в использовании расширения для применения CSS3 анимаций к любому тексту.

Motio - маленькая JavaScript библиотека для простых, но мощных анимаций и панарам на базе спрайтов.

С Anima очень легко анимировать сотни объектов. Каждый объект может иметь свои характеристики, что упрощает моделирование объектов реального мира.

ИГРОВЫЕ ДВИЖКИ


MelonJS - бесплатный и легковесный HTML5 игровой движек. Движек интеграрован с тайловыми картами, что делает разработку уровней еще проще.

ImpactJS - один из самый провереных и надежных движков для создания игр на HTML5. Первая версия вышла еще в конце 2010 года. Он прекрасно поддерживается и регулярно обновляется, имеет приличных размеров сообщество, которое его поддерживает. Сущестует достаточное колличество документации - даже две книги по созданию игр на этом движке.

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

Crafty - игровой движек, который берет начало из конца 2010 года. Его создали чтобы начать делать игры на Javascript было действительно просто.

Cocos2d-html5 - игровой 2D движек с открытым исходным кодом, распространяется под MIT лицензией. Это HTML5 версия проекта Cocos2d. Основное внимание при разработке Cocos2d-html5 уделено тому, чтобы сделать проект кроссплатформенным и доступным в разных браузерах и мобильных приложениях.

Phaser в большой степени опирается на Flixel. Он поддерживается Richard Davey (Photon Storm), который долгие годы был очень активным участником HTML5 сообщества.

Goo - это 3D игровой движек на JavaScript полностью построенный на WebGL/HTML5

LycheeJS - это JavaScript библиотека, предлагающая комплексное решение для создания и развертывания прототипов HTML5 игр с использованием Canvas, WebGL или нативного OpenGL(ES). Поддерживаются как игры для веб-браузеров так и для мобильных приложений.

Quintus - это игровой движек для HTML5. Легковесный, модульный, с понятным Javascript API.

Kiwi.js - забавный и дружелюбный игровой движек с открытым исходным кодом. Некоторые называют его WordPress в мире игровых движков для HTML5.

Panda.js - это игровой движек для HTML5 под мобильные устройства и десктопные браузеры с поддержкой рендеринга через Canvas и WebGL.

Rot.js - набор Javascript библиотек, призваный помочь с разработкой ролевых игр (roguelike) для браузеров.

Isogenic - продвинутый игровой движек, который обеспечивает поддержку соверменных сетей и возможностей HTML5 для разработки многопользовательских игр c взаимодействием в реальном времени. Система основана на потоковой передаче данных и включает в себя мощные возможности по моделированию на стороне клиента на основе дельт-обновлений (передача изменений состояния).

Где можно следить за новостями?

Вебсайты

Рассылки

Что стоит прочитать?

Статьи

by Quildreen Motta

by Yehuda Katz

by Scott Allen

by Ben Alman

by Nico Bevacqua

by Viljami S.

by Kirupa Chinnathambi

by Kirupa Chinnathambi

by JavaScript Is Sexy

by Ju Gonçalves

Книги

by Marijn Haverbeke

by David Flanagan

by Douglas Crockford

by Stoyan Stefanov

by James Coglan

by Nicholas C. Zakas

by Nicholas C. Zakas

by Henrik Joreteg

by Stoyan Stefanov

by Dustin Diaz

by Addy Osmani

by John Resig

by Nicolas Bevacqua

by Axel Rauschmayer

by Christian Johansen

by Kyle Simpson

by Ryan Burgess

by Ivo Wetzel

by David Herman

by Michael Fogus

by Reginald Braithwaite

by Axel Rauschmayer

by DevFreeBooks

Бесплатные электронные книги

Порталы

Подкасты



Скринкасты

К кому стоит присмотреться

Облачные сервисы



Утилиты