Переделать скрипт в jquery из javascript?

Question

[Владислав]

function Media () {
	this.elems = [];
	this.matches = {};
}
Media.sizes = ["original", "small", "medium", "large", "nav", "wide", "huge", "max", "edge", "over"];
Media.attrs = Media.sizes.map(function (size) { return "media-" + size; });
Media.query = Media.attrs.map(function (attr) { return "[" + attr + "]" }).join(",");
Media.widths = [0, 320, 540, 720, 900, 980, 1280, 1600, 2400, 9000];
Media.spaceReg = /\s+/;
Media.prototype = {
	init: function () {
		this.update();
		document.querySelectorAlways(Media.query, this.addElem.bind(this));
		window.addEventListener("resize", this.update.bind(this));
		window.addEventListener("load", this.resize.bind(this));
	},
	resize: function () {
		if (window.trigger) {
			window.trigger("resize");
		} else {
			this.update();
		}
	},
	addElem: function (elem) {
		// save the original classes and always apply them
		elem.setAttribute("media-original", elem.className);
		this.elems.push(elem);
		this.updateElem(elem);
	},
	update: function () {
		this.width = window.innerWidth;
		var minWidth = Media.widths[1];
		if (this.width < minWidth) {
			this.width = minWidth;
		}
		Media.widths.map(this.updateWidth.bind(this))
		this.elems.map(this.updateElem.bind(this));
	},
	updateWidth: function (width, i) {
		var media = "media-" + Media.sizes[i];
		this.matches[media] = this.width >= width;
	},
	updateElem: function (elem) {
		Media.attrs.map(this.updateMedia.bind(this, elem));
	},
	updateMedia: function (elem, media) {
		var attr = elem.getAttribute(media);
		if (attr) {
			var classes = attr.split(Media.spaceReg);
			classes.map(this.updateClass.bind(this, elem, media))
		}
	},
	updateClass: function (elem, media, elemClass) {
		var match = this.matches[media];
		var negate = elemClass.charAt(0) === "!";
		if (negate) {
			if (match) {
				var doubleNegate = elemClass.charAt(1) === "!";
				if (doubleNegate) {
					elem.classList.add(elemClass.slice(2));
				} else {
					elem.classList.remove(elemClass.slice(1));
				}
			}
		} else {
			elem.classList[match ? "add" : "remove"](elemClass);
		}
	}
};

var media = new Media();
media.init();

window.Media = Media;
window.media = media;

function querySelectorAlways (selector, callback)

Есть кто понимает в этом хорошо и может помочь переделать в jquery ?

Comments

[Егор Живагин]

Просто интересно, а зачем? Все наоборот потихоньку уходят от jQuery, тем более, тут нормальный код. Зачем переписывать чистый и легковесный JS на JQuery, которая медленнее?)

[Владислав]

Я и не против его оставить, а вот клиент против, мое мнение рабоает и работает нечего лезть

[Александр]

Егор Живагин, а вот тут я бы поспорил. С незавидной регулярностью стал замечать, что на проекте с чистым js использую одни и те же функции, причем они есть в jquery. Приходится выделять их в отдельную библиотеку, которая скоро догонит jquery по размеру. И что в итоге дешевле: писать свой велосипед или использовать готовый?)

[Владислав]

Решено, сам переписал.

[edward_freedom]

Егор Живагин, даже вк jq использует, о чем ты, дядь? Медленней, ты под чем, вась? Тебе что больше лайк писать 10 строк или одну строку на jq?

[Егор Живагин]

edward_freedom, ох, какую старую тему ты откопал... Давай по-очереди:

1) "даже вк jq использует, о чем ты, дядь?"
ВК начинал её юзать тогда, когда она действительно решала гору проблем с кроссбраузерностью. Естественно, "дешевле" поддерживать этот код, а не переписывать, его же там тонны. Хотя, github, например, так не думает и переписывает - вот тут писали об этом

2) "Медленней, ты под чем, вась?"
Тебя удивляет, что код, написанный нативно, будет работать быстрее, чем тот же код, запущенный через библиотеку? Ты под чем, вась?)) Если ты хочешь сказать, что код на jquery будет работать быстрее кода на JS - приводи примеры.

3) "Тебе что больше лайк писать 10 строк или одну строку на jq?"
Вот ссылочка . Много там строчек нативного JS получается? А для сложных анимаций и работ с большими структурами данных я бы брал специализированные либы.

Ты как-то не в тему меня спрашиваешь. Тут у автора есть рабочий, уже написанный, код на JS и он хочет переписать его на jquery. Возникает логичный вопрос - для чего?
А так мне всё равно, кто на чём лендосики пишет. Я года полтора не видел jquery и это меня радует)

[edward_freedom]

Егор Живагин,

ONLY JS: Execution time: 0
ONLY JQ: Execution time: 2

В среднем у js 0 - 2, у jq 2-4. Оно того стоит?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            background: red;
        }
        .green {
            background: green;
        }
    </style>
</head>
<body>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</html>

function timeExecutions(title, callback) {
    var start = new Date().getTime();
    callback();
    var end = new Date().getTime();
    var time = end - start;
    console.log(title + ' Execution time: ' + time);
}

function callOnlyJs() {
    var span = document.createElement('span');
    span.innerHTML = 'Test JS';
    span.classList.add("red");
    document.body.appendChild(span);
}
function callOnlyJQ() {
    var body = $("body");
    var span = document.createElement('span');
    span.innerHTML = 'Test JS';
    span.classList.add("green");
    body.append(span);
}

document.addEventListener('DOMContentLoaded', function() {
    timeExecutions("ONLY JS:", callOnlyJs);
}, false);

$(document).ready(function(){
    timeExecutions("ONLY JQ:", callOnlyJQ);
});

[Егор Живагин]

edward_freedom, во-первых, чем сложнее пример - тем больше будет разница. Это видно даже если просто добавить генерируемых элементов в твой код. Например так

Во-вторых, конкретно в твоём примере количество кода не отличается в функциях на JS и JQ. Но код на JQ работает дольше + тянет библиотеку. Вопрос - зачем?

Что ты мне доказать-то хочешь?)) Тема "JQ vs JS" даже на тостере обсасывалась сотни раз, поищи в поиске, если тебе интересно.

[edward_freedom]

Егор Живагин, на данный момент, в твоем примере

ONLY JS: Execution time: 13
ONLY JQ: Execution time: 85

Но если, получение body у jq, вынести за цикл, то отрыв уже будет мизерным и не умеет смысла ущемлять удобство и скорость разработки

ONLY JS: Execution time: 13
ONLY JQ: Execution time: 42

Дело не в сравние, вель можно обойтись и без реакта и ангуляра, но его же для чего то подключают