Как я могу заставить эту функцию возвращать jquery-подобный только сам элемент, такой как var elm = $('div#test');
, теперь я возвращаю весь объект.
jQuery всегда возвращает вамвесь объект jQuery.Если вы ссылаетесь на то, что определенные вами методы (addClass
,…) не отображаются с объектом в консоли браузера, это достигается путем совместного использования этих свойств с prototype вместо созданияновый набор функций для каждого объекта.Классы ES6 - это удобный способ создания конструкторов, которые позволяют вам определять прототип с помощью методов и создавать объекты, которые наследуют его:
class MyElementCollection {
constructor(el) {
this.el = el;
}
addClass(className) {
this.el.forEach(elem => {elem.classList.add(className)});
return this;
}
// ⋮
}
var $ = function(s) {
var el = document.querySelectorAll(s);
return new MyElementCollection(el);
};
Затем, если вы хотите, чтобы он отображался как массив в Firefox и имелэлементы, доступные по индексу $('div#test')[0]
, как это делает jQuery, вы присваиваете элементы этим индексам и присваиваете своей коллекции length
:
class MyElementCollection {
constructor(el) {
el.forEach((elem, i) => {
this[i] = elem;
});
this.length = el.length;
}
each(action) {
for (let i = 0; i < this.length; i++) {
action(this[i]);
}
}
addClass(className) {
this.each(elem => {elem.classList.add(className)});
return this;
}
// ⋮
}
Затем, если вы хотите, чтобы она отображалась как массив в Chrome,вы делаете странный взлом (все еще применимый в 2019 году) , определяющий splice
метод , даже если он не делает то же самое, что делает с массивами ... или вообще что-то делает:
class MyElementCollection {
// ⋮
splice() {
throw new Error('Not implemented');
}
}
Как написать резервную функцию, чтобы предотвратить получение сообщения об ошибке, например $(...).animate
, не является функцией, если я использую метод, который в настоящее время не рассматривается в этой функции, например $('div#test').addClass('newclass').animate({top:'2.3em',background:'red'});
, поскольку animate()
на данный момент не реализовано.В php
есть функция __get()
, есть ли что-то похожее в javascript?
Вы можете сделать это с прокси в JavaScript, ноЯ не рекомендовал бы это - это не очень чисто.(Ваш объект будет претендовать на то, чтобы иметь все свойства, а не только те, которые существуют в jQuery, которые вы не реализовали, и не будет списка их для поиска в прототипе. Прокси-серверы также идут с потерями производительности и понятности.) Вместо этогорассмотрите возможность назначения всех неосуществленных вещей одной и той же реализации:
class MyElementCollection {
// ⋮
}
const notImplemented = () => {
throw new Error('Not implemented');
};
['animate', …].forEach(name => {
MyElementCollection.prototype[name] = notImplemented;
});