Методы работы на чистом JavaScript без библиотек

Модуль расширенного управления меню для битрикс

Июль 12, 2021

Полезные примеры, если вы не хотите использовать JS библиотеки и просто удобные готовые решения простых задач.

Инициализация переменной если она не задана:


var myVar = myVar || 'Значение';

window.myVar = window.myVar || 'Значение'; // глобальная область видимости

Выборка одного элемента:


var element = document.querySelector('[data-element]');

Цикл по элементам и применение обработчика нажатия:


document.querySelectorAll('[data-add-to-cart]').forEach((button) => {

    button.addEventListener('click', (e) => {

        e.preventDefault();

        console.log("Button pressed");

    });

});

То же самое, но выполнение обработчика только один раз (аналог jquery one)


document.querySelectorAll('[data-add-to-cart]').forEach((button) => {

    button.addEventListener('click', (e) => {

        e.preventDefault();

        console.log("Button pressed");

    },{ once: true });

});

То же самое, только поиск внутри какого-то объекта (":scope" обязателен, иначе контекст не будет учитываться):


var block = querySelector('[data-element]');

block.querySelectorAll(':scope [data-add-to-cart]').forEach((button) => {

    button.addEventListener('click', (e) => {

        e.preventDefault();

        console.log("Button pressed");

    });

});

Вариант для постоянной привязки обработчика в аякс-контейнере:


document.querySelector('[data-ajax-container]').addEventListener('click', e => {

    const element=e.target.closest('[data-element]');

    if (!element) 

        return;

    e.preventDefault();

    console.log("Button pressed");

});

Значение data атрибута "data-my-name"


btn.dataset.myName

Добавление класса:


element.classList.add('class-name');

Удаление класса:


element.classList.remove('class-name');

Проверка на наличие класса:


element.classList.contains('class-name')

Получение атрибута:


element.getAttribute('my-attr');

Установка/добавление атрибута:


element.setAttribute('my-attr');

Удаление атрибута:


element.removeAttribute('my-attr');

Аналог jquery-функции parents, возвращает ближайший родительский элемент или сам элемент:


element.closest('[data-block]');

Аналог jquery-функции "ready":


document.addEventListener("DOMContentLoaded", (event) => { 

    // код

});

Пример функции ajax-запроса (первый параметр - action, второй - объект параметров запроса, третий - callback-функция с параметром data, в котором содержится разобранный из json объект):


GrainMessenger.prototype.query = function(action,params,callback) {

    var _this = this;

    var formData = new FormData();

    formData.append('action', action);

    for(var key in params)

        formData.append(key, params[key]);

    const request = new XMLHttpRequest();

    request.responseType = "json";

    request.open("POST", this.ajaxUrl, true);

    //request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // do not use with FormData

    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.addEventListener("readystatechange", function() {

        if(request.readyState !== 4)

            return;

        if (request.status === 200) {

            let data = request.response;

            callback.call(_this,data);

        } else {

            console.log('ajax request error');

        }

    });

    request.send(formData);

}

Несколько более продвинутый вариант функции отправки ajax запроса:


let post = function(post,success,fail,always) {

    if(post instanceof FormData) {

        var formData = post;

    } else {

        var formData = new FormData();

        for(var key in post)

            formData.append(key, post[key]);

    }

    const request = new XMLHttpRequest();

    request.responseType = 'json';

    request.open('POST', '/ajax.php', true);

    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.addEventListener("readystatechange", function() {

        if(request.readyState !== 4) 

            return;

        if(always)

            always.call(this);

        if (request.status === 200) {

            let data = request.response;

            if(typeof data.errors !== 'undefined' && data.errors.length>0 && fail)

                fail.call(this,data.errors);

            else if(success)

                success.call(this,data);

        } else {

            if(fail)

                fail.call(this,['Error '+request.status+', see console']);

            console.log('ajax request error',formData,request);

        }

    }.bind(this));

    request.send(formData);

};

Аналог $.proxy(functionName,object) - вызов функции с определенной переменной this:


functionName.bind(this)

Плавный скроллинг к элементу:


document.querySelector('#my_element_id').scrollIntoView({ behavior: 'smooth' });

// при этом отступ можно задать в css: scroll-margin-top: 100px;

← Переход к списку