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}
```