Skip to content

Latest commit

 

History

History
246 lines (185 loc) · 6.39 KB

10_scripts.md

File metadata and controls

246 lines (185 loc) · 6.39 KB
Raw

Работа со скриптами

При работе со скриптами важно придерживаться установленных правил по оформлению кода.

Скрипты размещаются в папке src/js:

ninelines-template
└── src
    └── js
        ├── vendor
        │   └── .keep
        ├── main.js
        └── vendor.js

За сборку и преобразование JS отвечает задача js:

gulp js

После выполнения команды в папке build/js появятся файлы main.js и vendor.js:

ninelines-template
└── build
    └── js
        ├── main.js
        └── vendor.js

Также дополнительно подключены библиотеки:

ninelines-ua-parser основана на ua-parser-js и отвечает за определение устройства, браузера и операционной системы пользователя, а также автоматически проставляет классы <html> элементу:

  • .is-os-mac-os
  • .is-os-windows
  • .is-os-linux
  • .is-os-android
  • .is-os-ios
  • .is-device-mobile
  • .is-device-tablet
  • .is-device-desktop
  • .is-engine-webkit
  • .is-engine-gecko
  • .is-browser-chrome
  • .is-browser-firefox
  • .is-browser-ie
  • .is-browser-safari

Данные классы можно использовать для стилизации элементов:

.for-desktop {
    .is-device-mobile & {
        display: none;
    }
}

Правила написания кода

Короткие именна переменных

Не следует сокращать имена переменных.

Неправильно:

$('.elements').each((i, e) => {
    // ...
});

Правильно:

$('.elements').each((index, element) => {
    // ...
});

Исключение могут составить имена счетчиков в цикле (i, j, k):

for (let i = 0; i < 10; i++) {
    // ...
}

Именование jQuery-переменных

Название переменных, являющихся jQuery-объектами, следует начинать с $.

Неправильно:

let element = $('.element');

Правильно:

let $element = $('.element');

jQuery-селекторы

Следует избегать дублирования jQuery-селекторов. Если обращение к элементу происходит многократно, то jQuery-объект можно сохранить в отдельную переменную, либо переписать код так, чтобы избежать дублирования.

Неправильно:

$('.element').on('click', () => {
    // ...
});

$('.element').on('mouseenter', () => {
    // ...
});

Правильно:

let $element = $('.element');

$element.on('click', () => {
    // ...
});

$element.on('mouseenter', () => {
    // ...
});

Или так:

$('.element')
    .on('click', () => {
        // ...
    })
    .on('mouseenter', () => {
        // ...
    });

Обработка событий с помощью jQuery

Для создания обработчика событий следует использовать функцию .on().

Неправильно:

$('button').click(() => {
    // ...
});

$('form').submit(() => {
    // ...
});

Правильно:

$('button').on('click', () => {
    // ...
});

$('form').on('submit', () => {
    // ...
});

Использование линтера

В сборку интегрирован линтер ESLint. Файл настроек — .eslintrc. Данный линтер позволяет поддерживать JavaScript-код в соответствии с заданным регламентом.

Проверка осуществляется с помощью задачи lint:js:

gulp lint:js

Пример использования:

var $form = $('.form')
$form.on("submit", function () {
  $.post('ajax.php', function (data) {
    $(".result").html(data);
  })
})

Результаты проверки:

  1:1   error    Expected blank line after variable declarations    newline-after-var
  1:1   error    Unexpected var, use let or const instead           no-var
  1:23  error    Missing semicolon                                  semi
  2:10  error    Strings must use singlequote                       quotes
  2:20  error    Unexpected function expression                     prefer-arrow-callback
  2:20  warning  Unexpected unnamed function                        func-names
  3:1   error    Expected indentation of 1 tab but found 2 spaces   indent
  3:22  warning  Unexpected unnamed function                        func-names
  3:22  error    Unexpected function expression                     prefer-arrow-callback
  4:1   error    Expected indentation of 2 tabs but found 4 spaces  indent
  4:7   error    Strings must use singlequote                       quotes
  5:1   error    Expected indentation of 1 tab but found 2 spaces   indent
  5:5   error    Missing semicolon                                  semi
  6:3   error    Missing semicolon                                  semi

✖ 14 problems (12 errors, 2 warnings)
  12 errors, 0 warnings potentially fixable with the `--fix` option.

ESlint сообщает о 14 найденных ошибках, причем большая часть из них может быть исправлена автоматически. За это отвечает ключ --fix, который можно указать при запуске задачи lint:js:

gulp lint:js --fix

Исправленный код:

let $form = $('.form');

$form.on('submit', () => {
    $.post('ajax.php', (data) => {
        $('.result').html(data);
    });
});