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}