Как реализовать объект с методами, которые можно было бы вызывать последовательно? Как реализовать подобную функциюget.id("main").class("selector")[0].tag("span")[0]; заместоdocument.getElementById("main").getElementsByClassName("selector")[0].getElementsByTagName("span")[0]; ? Это, вроде бы несложно, но не до конца понимаю, как сделать неget.id().get.class().get.tag() а как-то вызывать методы последовательно после (в данном случае) get. Заранее благодарю за помощь и прошу прощения за "кривое" описание проблемы.
Для реализации объекта с методами, которые можно вызывать последовательно, можно использовать цепочку вызовов методов, возвращающих сам объект. Например, для вашего примера, можно сделать такую реализацию:
Для реализации объекта с методами, которые можно вызывать последовательно, можно использовать цепочку вызовов методов, возвращающих сам объект. Например, для вашего примера, можно сделать такую реализацию:
const get = {id: function(id) {
this.element = document.getElementById(id);
return this;
},
class: function(className) {
this.element = this.element.getElementsByClassName(className)[0];
return this;
},
tag: function(tagName) {
this.element = this.element.getElementsByTagName(tagName)[0];
return this;
},
get: function() {
return this.element;
}
};
const result = get.id("main").class("selector").tag("span").get();
Теперь можно вызывать методы последовательно после get:
const result = get.id("main").class("selector").tag("span").get();Если нужно поддерживать возможность вызова методов в произвольном порядке, то можно сделать следующую реализацию:
class Selector {constructor(element) {
this.element = element;
}
id(id) {
this.element = document.getElementById(id);
return this;
}
class(className) {
this.element = this.element.getElementsByClassName(className)[0];
return this;
}
tag(tagName) {
this.element = this.element.getElementsByTagName(tagName)[0];
return this;
}
get() {
return this.element;
}
}
const get = new Selector();
const result = get.id("main").class("selector").tag("span").get();
Теперь можно вызывать методы в любом порядке:
const result = get.class("selector").tag("span").id("main").get();