Это руководство призвано ввести в курс новичков в 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) - это API, дающее возможность работать с HTML и XML документами. Она обеспечивает структрурное представление документа, позволяя изменять содержимое и визуальное представление посредством скриптовых языков, таких как Javascript. Подробнее на странице Mozilla Developer Network - DOM.
Как любой другой язык, 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 - Строгий режим
Самовызывающиеся функции - это подход, который позволяет создать лексическое окружение использую функциональную область видимости в Javascript. Самовызывающиеся функции могут быть использованы, чтобы избежать всплытия переменных за пределы блока, предотвратить загрязнение глобальной области видимости и обеспечить доступ к публичным методам сохряняя недоступность данных, которые объявлены внутри функции.
Этот подход основывается на самовызывающихся анонимных функциях, но @cowboy (Ben Alman) ввел понятие IIFE как более семантически-верное для обозначения этого шаблона.
Подробнее: Немедленно вызываемыми функциональные выражения (IIFE)
Javascript содержит достаточное колличество шаблонов, специфических для языка. Однако так же могут быть использованы многие классические шаблоны проектирования.
Хорошим способом с этим разобраться будет чтение книги Addy Osmani Learning JavaScript Design Patterns (Изучение Шаблонов Проектирования Javascript), и ссылок ниже, которые частично взяты из книги.
Порождающие шаблоны
Структурные шаблоны
Поведенческие шаблоны
Различные библиотеки и фреймворки для тестирования кода на JavaScript.
Поддерживается 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 библиотека, которая предоставляет полный набор разнообразных вспомогательных функций без изменения встроенных объектов.
Очень популярный JavaScript клиент-серверный фреймворк, созданый @jashkenas.
Создан @wycats, который явялется значимым разрабочиком jQuery и Ruby on Rails.
Упрощает построение динамических интерфейсов посредством использования паттерна Model-View-View Model (MVVM).
Создан командой из Google. Angular.js похож на полифилл для будущих версий HTML.
Framework.Mobile и рабочий стол. Один из способов создания приложений с угловым и использовать навыки и программный код для создания приложений для каждой цели развертывания. Для веб-страниц, мобильный Интернет, мобильный телефон родной и родной рабочий стол.
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 взаимодействием в реальном времени. Система основана на потоковой передаче данных и включает в себя мощные возможности по моделированию на стороне клиента на основе дельт-обновлений (передача изменений состояния).
Super-fast 3D framework for Web Applications & Games. Based on Three.js. Includes integrated physics support and ReactJS integration.
by Yehuda Katz
by Scott Allen
by Ben Alman
by Viljami S.
by Ju Gonçalves
by James Coglan
by Dustin Diaz
by Addy Osmani
by John Resig
by Kyle Simpson
by Ryan Burgess
by Ivo Wetzel
by David Herman
by DevFreeBooks
Этот проект не существовал бы без этих замечательных людей. Спасибо, ребята, что воплотили его в жизнь!
JavaScript: Правильный путь by William Oliveira.
Licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
На базе http://jstherightway.org.
William Oliveira
Allan Esquina