Правила оформления JavaScript-кода
Для создания объекта используйте фигурные скобки. Не создавайте объекты через конструктор new Object .
var item = <>;
var item = new Object();
1.2 Зарезервированные слова
Не используйте зарезервированные слова в качестве ключей объектов. Они не будут работать в IE8.
var superman = < defaults: < clark: 'kent' >, hidden: true >;
var superman = < default: < clark: 'kent' >, private: true >;
1.3 Ключевые слова
Не используйте ключевые слова (в том числе измененные). Вместо них используйте синонимы.
var superman = < type: 'alien' >;
var superman = < class: 'alien' >;
1.4 Создание обьекта на 3 и более элементов.
При создании обьектов, равно как и массивов, содержащих большое количество свойств(элементов), и тем самым образующих строки, длиной более 20 символов, необходимо выполнять ряд условий:
- Открывающая скобка располагается на той же строке;
- Каждое свойство оформляется на новой строке;
- Пробел после двоеточия;
- Закрывающая скобка располагается на новой строке.
var superman = < defaults: < clark: 'kent' >, type: 'alien', hidden: true >;
var superman = , type: 'alien', hidden: true>;
2. Переменные
Для именования переменных используйте существительные на английском языке(не транслит!). Имя переменной должно быть осмысленным.
Имя может состоять из букв, цифр, символов $ и _, не должно начинаться с цифры.
var vegetables;
var ovoschi; var rrfgov;
3. Функции
3.1 Именование функции
Имя функции должно быть глаголом на английском языке или начинаться с него. Для имён, состоящих из нескольких слов, используйте camelCase.
function editName() < // тело функции >;
function pravkaspiska() < // тело функции >;
3.2 Передача функции в функцию
При передаче функции, как аргумент в другую функцию, оформляйте код как в примере ниже.
var arr = ['Яблоко', 'Апельсин', 'Груша'].forEach(function (item, i, arr) < alert(i + ': ' + item + ' (массив:' + arr + ')'); >);
4. Отступы
4.1 Горизонтальные отступы
Отступ при вложенности — 2 пробела на каждый уровень вложенности.
if (age < 98) < for (var i = 0, iMax = items.length; i < iMax; ++i) < // тело цикла >>
if (age < 98) < for (var i = 0, iMax = items.length; i < iMax; ++i) < // тело цикла >>
4.2 Вертикальные отступы
Между логическими блоками(циклами, функциями и т.д.) следует оставлять пустую строку. Это делает код более читабельным. Избегайте блоков кода более 9 строк подряд.
var i; var iMax = items.length; for (i = 0; i < iMax, ++i) < // тело цикла >function showName() < // тело функции >
var i; var iMax = items.length; for (i = 0; i < iMax, ++i) < // тело цикла >function showName() < // тело функции >
5. Пробелы
- Используйте пробелы между параметрами и не используйте между именем функции и скобкой; Хорошо
function edit(name, age) < // тело функции >
function edit (name,age) < // тело функции >
function (name, age) < // тело функции >
function(name,age) < // тело функции >
if (age < 100) < // тело цикла >
if (age <100) < // тело цикла >
6. Скобки
Открывающая фигурная скобка располагается на той же строке. Перед скобкой пробел. Закрывающая скобка располагается на новой строке.
function edit(name, age) < if (age < 100) < // тело цикла >>
function edit(name, age) < if (age < 100) >
7. Кавычки
Всегда в коде скрипта используйте одинарные кавычки, если не требуется иного. Двойные кавычки допустимы, если в этой же строке необходимо использовать апостроф (‘) или одинарные кавычки для других целей.
var string = 'строка'; var phrase = "you're next";
var string = "строка";
8. Точка с запятой
В конце выражения обязательна точка с запятой.
alert('Привет'); alert('Мир');
alert('Привет') alert('Мир')
9. Комментарии
Для пояснения кода используются комментарии. Комментарии не исполняются интерпретатором JavaScript.
- Однострочные комментарии начинаются с двойного слэша // . За ним обязательно должен идти пробел;
- Многострочные комментарии располагаются между /* и */ . За символом начала комментария обязательно должен идти пробел. Символ конца комментария располагается на новой строке.
/* Пример комментария. Многострочного комментария. */ // Пример однострочного комментария.
/*Пример комментария. Многострочного комментария.*/ //Пример однострочного комментария.
Как писать быстрый JavaScript
На сегодняшний день JavaScript – самый популярный язык программирования. Он используется для различных целей — создание веб-сайтов, серверов, игр, операционных систем, роботов и еще кучи всего.
Но давайте будем честны, даже с его сумасшедшей популярностью, он не обладает той скоростью, которой мог бы обладать. Да, ведется работа по его улучшению, но ведь нам приходится ждать. Здесь, мы имеем в виду, что JS мог работать медленнее на рабочем столе, но сделайте гибридное приложение и Вам придется прибегнуть к миллиону уловок, для того, чтобы им можно было нормально пользоваться. У нас уже был такой опыт.
У Firefox есть самый быстрый переводчик JavaScript, SpiderMonkey. Загляните на Are We Fast Yet для просмотра более детальной информации и сравнений.
Есть несколько вариантов сделать JavaScript быстрее, один из них asm.js. Asm.js – это ряд параметров JavaScript, сгенерированных Emscripten, которые составляют C/C++ код к JavaScript вместе с большим количеством оптимизаций. Скомпилированные коды выглядят ужасно, поэтому Вы не можете написать оптимизированный код сами, но он, действительно, работает быстро. Мы очень рекомендуем Вам просмотреть слайды Алона Закаи Big Web App? Compile It!
Ближе к делу: О подсказках
Таким образом, нам нужно написать более быстрый код JavaScript, и вот несколько маленьких подсказок, которые помогут Вам создать код быстрее и с более эффективной памятью. Мы не говорим только о DOM и веб-приложениях, мы говорим о JavaScript с включенным DOM.
Мы собираемся добавить тест jsperf для каждой подсказки и протестировать, использую Firefox 38 и Chrome 39.
№1 Не заставляйте нас повторяться
JavaScript работает динамично, но постарайтесь не пользоваться этой функцией, если Вам нужна скорость. Постарайтесь сохранять последовательность различных шрифтов. То же самое касается массивов: старайтесь не смешивать несколько типов в одном массиве, к тому же, это главным образом оптимизировано браузерами. Это одна из причин, почему C/C++ код, примененный к JavaScript, быстрый, статичные шрифты.
Правка: Тест технически был неверным, к сожалению. Мы провели другой тест для массивов смешанных шрифтов, который, на нас взгляд, стал лучшим подтверждением этому.
Бонус: Последовательность для того, чтобы пронумеровать преобразование
Скажем, Вы должны преобразовать последовательность в число, а parseInt & parseFloat лучшие способы сделать это? Давайте посмотрим.
// Different ways of parsing integer/float from strings parseFloat("100") +"100" // integer only parseInt("100", 10) "100"|0 "100" >> 0 "100" >> 0
Firefox оптимизирует логические операторы, работая с кодом примерно на 99% быстрее, чем parseInt и + оператор. Но Chrome не демонстрирует особой любви к логическим операторам, лучший из них на ~62% медленнее, чем parseInt.
parseFloat быстрее + оператор на обоих браузерах (28% на Firefox, 39% на Chrome).
Таким образом, выбор зависит от того, пишете ли Вы приложение Node / Chrome или приложение Firefox. Мы Считаем, что для основной цели подойдет parseInt.
№2 Не нужно реструктурировать объекты
Реструктуризация – вещь недешевая, следуйте подсказкам, чтобы избежать этого.
Не используйте форму оператора delete.
Delete оператор – намного медленнее, чем назначение нулевого указателя к собственности. Назначение нулевого указателя на 99% быстрее на обоих браузерах, потому что это не изменяет структуру объекта, а delete изменяет.
Правка: кажется, подсказка может немного ввести в заблуждение. Вовсе не значит, что ты не должны использовать оператор delete, он имеет свое назначение. Он предотвращает утечку памяти в объект, но в случае, если Вам нужна скорость, то Вы можете воспользоваться этой подсказкой.
Не откладывайте добавление свойств на потом
Постарайтесь не добавлять свойства в конце, лучше всего определить схему Вашего объекта с начала. Это на 100% быстрее на Firefox и на 89% быстрее на Chrome.
№3 Объединяйте строки
Объединение строк достаточно дорогая операция, но каков лучший способ сделать это? Определенно не Array.prototype.join.
Оператор += кажется на много быстрее, чем +, String.prototype.concat и Array.prototype.join на обоих браузерах. Array.prototype.join, как и ожидалось, медленнее.
Правка: Спасибо Vyacheslav Egorov за то, что отметил ошибки и исправил их. Он протестировал эту подсказку и получил более реалистичные результаты, у него прекрасные, понятные пояснения.
№4 Используйте правильный RegExp метод
Нет смысла использовать RegExp.prototype.exec, если Вы хотите провести тест против чего-либо, не так ли?
Все же есть разница в результативности между RegExp.prototype.test и String.prototype.search, давайте посмотрим, какой из методов быстрее:
RegExp.prototype.exec намного быстрее, чем String.prototype.match, но именно поэтому они друг от друга и отличаются. Объяснение разницы между ними выходит за рамки этой статьи.
RegEx.prototype.test быстрее в поиске, вероятно потому, что он не возвращает индекс найденного совпадения. String.prototype.search должен быть использован только для поиска индекса желаемого совпадения.
Все же, Вы не должны использовать RegExps, чтобы найти индекс отдельной строки внутри другой строки. Для этого есть метод String.prototype.indexOf.
Другой интересный сравнительный тест String.prototype.indexOf vs RegExp.prototype.test. Мы ожидали, что последний будет быстрее, что и произошло в случае с Firefox, но не в Chrome. RegExp.prototype.test на 32% быстрее в Firefox, а то время, как String.prototype.indexOf на 33% быстрее в Chrome. В таком случае, выбирайте тот, что Вам больше нравится.
№ Объявите и перейдите к локальным динамичным переменным
Когда Вы вызываете функцию (например), то браузер должен сделать нечто, называемое scope lookup (определение последовательного поиска), который в большей степени основан на том, как много определений он должен найти. Попытайтесь не полагаться на глобальные/высокие определенные переменные, вместо этого, сделайте локальные динамичные переменные и перейдите к их функциям. Меньше объемов для поиска, меньше скорости придется приносить в жертву.
Этот тест показывает нам, что переход переменных к функциям и их использование от локальной области быстрее, чем поиск высоких областей для поиска переменных, как в Chrome, так и в Firefox.
№6 Вам не нужен jQuery для всего на свете
Большинство разработчиков используют jQuery, чтобы делать наиболее простые задачи, но ведь не обязательно использовать его, просто потому что он включен в проект. Вы считаете, что использование $val() всегда необходимо? Посмотрите пример:
$('input').keyup(function() < if($(this).val() === 'blah') < . >>);
Это одна из важнейших причин понять, как модифицировать DOM, используя ванильный JavaScript. Так Вы можете написать более эффективный код.
Написание того же самого условия в JavaScript на МНОГО быстрее. Доказано здесь JSPerf Test.
$('input').keyup(function() < if(this.value === 'blah') < . >>);
Подсказка-бонус: Используйте Web Workers для сложных задач
Если у Вас есть тяжелые вычисления в Вашем приложении, скажем, некоторая обработка изображения, лучше использовать Web Workers, чтобы позволить браузеру управлять задачей во второстепенной нити и дать Вам результаты асинхронно вместо того, чтобы заставлять пользователей скучать и раздражаться.
Вы можете также использовать каналы сообщения, чтобы показать прогресс задачи, скажем, у Вас есть длинная цепь (повторяющаяся по пикселям, например), Вы можете послать сообщение, чтобы указать, сколько из цепи сделано в каждом 100 повторении, и сможете показать индикатор выполнения, таким образом, пользователь будет знать, что происходит.
Вот и все. Семь подсказок и одиннадцать сравнительных тестов, которые помогут написать JavaScript быстрее. Благодаря им Вы поймете, как работает JavaScript и сможете поднять свои навыки программирования на следующий уровень.