JavaScript
Общий стиль
Объявление всех переменных должно начинаться с var.
var myVariable;
Используйте NAMES_LIKE_THIS при объявлении констант.
var CONSTANT_VARIABLE = 'mve';
В конце любого оператора используйте точку с запятой.
Не допускается объявление функций в условиях
if (x) { var foo = function() {}; }
Одинарные кавычки предпочтительней двойных.
var text = 'Some text';
Отступы и пробелы
- Табуляция в 4 пробела.
- Не используйте пробел в конце строки.
- Используйте пустую строку для разделения 1 блока от другого.
- Один отступ по обе стороны от бинарных операторов и операторов присваивания.
- Не должно быть пробела между именем функции и левой скобкой списка аргументов.
Плохо
a.foo=bar+baz;
if( foo ){
foo.bar = doBar () ;
}
function foo () {
return bar;
};
foo = function() {
return('bar');
};
foo = typeof( bar );
function baz(foo, bar) {
return 'gaz';
}
Хорошо
a.foo = bar + baz;
if ( foo ) {
foo.bar = doBar();
}
function foo() {
return bar;
}
foo = function () {
return 'bar';
};
foo = typeof bar;
function baz( foo, bar ) {
return 'gaz';
}
Глобальная область видимости
Для того что бы не мусорить в глобальном пространстве. JavaScript код должен быть обернут в анонимную функцию.
(function(_, $) { // Your code will be here }(Tygh, Tygh.$));
Оформление инлайнового (встроенного в тело документа) JavaScript должно быть в следующем виде:
<script type="text/javascript"> (function(_, $) { // Your code will be here }(Tygh, Tygh.$)); </script>
В глобальной области видимости доступен объект Tygh. Он является основной точкой входа в приложение. В объекте Tygh доступны закешированные jQuery селекторы например Tygh.doc или Tygh.body. Настройки валюты языка и окружения, загрузчик файлов и микроформаты.
Пример использования закешированного body селектора
<script type="text/javascript"> (function(_, $) { $(_.doc).on('click', '.someclass', function(event) { // Your event handler code. }); }(Tygh, Tygh.$)); </script>
Пример получения языковой переменной
<script type="text/javascript"> (function(_, $) { _.tr('language_variable_name'); }(Tygh, Tygh.$)); </script>
Пример определения где запущен скрипт в админке или кастомерке.
<script type="text/javascript"> (function(_, $) { if(_.area === 'C') { // This code will run only in customer area } else if(_.area === 'A') { // This code will run only in admin area } }(Tygh, Tygh.$)); </script>
jQuery
Используется библиотека jQuery v1.9.1
Вся дополнительная функциональность, написанная нами, представляется в виде плагинов.
Для вызова всех методов jQuery используем сокращенную запись —
$
. Использование для вызовов переменнойjQuery
НЕ ДОПУСКАЕТСЯ.$.browser.msie; $('#test').ourMethod();
Создавая плагины нужно придерживаться стиля кодирования, принятого для jQuery! Для функций же остаются правила оформления как в php.
(function($){ var methods = { init: function(mode) { // Init plugin }, plugin_method: function() { // Your code. } }; $.fn.myPlugin = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply(this, arguments); } else { $.error('ty.myPlugin: method ' + method + ' does not exist'); } }; })($);
Важно
Вообще использование inline JavaScript нужно сократить до минимума. Если вам нужно писать логику в темплейте - значит с логикой что-то не то. Инлайн можно использовать только для передачи данных из php в javacript.
Внешние скрипты должны подключаться через смарти-функцию
{script}
{script src="js/core.js"}
Если нужно загрузить внешний скрипт через яваскрипт — нужно использовать ТОЛЬКО функцию
$.getScript
— она подправлена под наши нужды (учет загруженных скриптов, правильная работа с неймспейсами и третье-сторонними библиотеками).Третьесторонние яваскрипт библиотеки мы складываем в
/js/lib/
.Если нам нужно расширить функционал, что пишем обертку по примеру
ceDialog
.Событие ready (вызываемое при загрузке документа) писать в виде полной записи, с привязкой к document.
Не допускается запись вида
$(function()), $(window).ready(), etc…
Правильно так:
$(document).ready(function() { // do something });
Оптимизация
В CS-Cart применен хитрый метод оптимизации js. Для отложенной загрузки файлов все js файлы подключаются в самом низу страницы. А весь inline код вырезается и вставляется в самый конец html документа.
Было:
<script type="text/javascript"> // Inline scripts </script> <script src="//your_javascript.min.js"></script>
Стало:
<script src="//your_javascript.min.js"></script> <script type="text/javascript"> // Inline scripts </script>
Чтобы отменить вырезание скрипта из потока для тега скрипт необходимо добавить no-defer аттрибут
<script src="//your_javascript.min.js" data-no-defer></script>
Если JS подключается через smarty то следует добавить параметр no-defer
{script src="js/lib/jquery/jquery.min.js" no-defer=true}