77. Мини-jQuery для старой страницы объявления Авито

На старой странице объявления Авито ещё живёт jQuery ради пяти вызовов. Его 30 КБ хотят убрать и заменить своим $ на 40 строк.

Напишите makeQuery(doc), которая возвращает функцию $. $(selector) берёт узлы через doc.querySelectorAll(selector) и отдаёт объект с методами addClass(name), removeClass(name), toggleClass(name), css(styles), html(markup). Каждый метод применяется ко всем найденным узлам и возвращает тот же объект, чтобы вызовы шли цепочкой.

css({ color: 'red', paddingTop: '10px' }) записывает ключи в node.style. html(markup) пишет в node.innerHTML, а html() без аргумента возвращает innerHTML первого узла или undefined, если узлов нет. Свойство length — число узлов. Пустая выборка не падает.

В работе: Подсветка блоков на странице объявления без jQuery: минус 30 КБ скрипта на 10 млн просмотров в день.

Пример 1: цепочка из условия

[["price", ["js-node"]], ["title", ["js-node", "item"]]], [[".js-node", [["addClass", "node"], ["toggleClass", "item"], ["removeClass", "node"], ["css", {"color": "red", "paddingTop": "10px"}], ["html", "<b>12 500 ₽</b>"]]]]

["len:2", "price|item js-node|{\"color\":\"red\",\"paddingTop\":\"10px\"}|<b>12 500 ₽</b>", "title|js-node|{\"color\":\"red\",\"paddingTop\":\"10px\"}|<b>12 500 ₽</b>"]

Пример 2: html() читает первый узел

[["a", ["seller"]], ["b", ["seller"]]], [[".seller", [["html", "Иван, на Авито с 2017"]]], [".seller", [["html"]]]]

["len:2", "len:2", "get:Иван, на Авито с 2017", "a|seller|{}|Иван, на Авито с 2017", "b|seller|{}|Иван, на Авито с 2017"]

function makeQuery(doc) // → $(selector) с методами addClass, removeClass, toggleClass, css, html и полем length

Источник: Авито, задача «свой $ с цепочкой методов» из репозитория кандидата, 2023. Условие пересказано своими словами.