Такая задача может возникнуть когда требуется независимое связывание данных для элементов на странице. Данный пример демонстрирует как это можно реализовать с помощью mvc:
class MenuModel {
constructor() {
this._obs = [];
this._selected = -1;
this.selected = 0;
}
select(num) {
this.selected = num;
}
set selected(value) {
if(value != this._selected) {
this._selected = value;
this.dispatchEvent(new Event("selectChange"));
}
}
get selected() {
return this._selected;
}
addEventListener(type, node) {
this._obs.push({type, node});
}
removeEventListener(type, node) {
this._obs = this._obs.filter(obs=>obs.type == type && obs.node == node);
}
dispatchEvent(event) {
let obs = this._obs.filter(obs => obs.type == event.type);
obs.forEach(obs=>{
let node = obs.node;
if(typeof node == "function") {
node.call(this, event);
}
else if(node.handleEvent) {
node.handleEvent(event);
}
});
}
}
class ButtonView {
constructor(target, index) {
this.target = target;
target.addEventListener("click", this);
this.index = index;
}
bind(model) {
if(this.model != model) {
if(this.model) this.model.removeEventListener("selectChange", this);
this.model = model;
if(model) {
model.addEventListener("selectChange", this);
this.refresh();
}
}
}
refresh() {
this.target.classList.toggle("active", this.model.selected == this.index);
}
handleEvent(event) {
if(event.type == "selectChange") this.refresh();
else if(event.type == "click") {
if(this.model) this.model.select(this.index);
}
}
}
ButtonView.create = (target, index) => new ButtonView(target, index);
window.addEventListener("load", ()=>{
let menu1 = document.body.querySelectorAll("menu")[0];
let menu2 = document.body.querySelectorAll("menu")[1];
let list1view = [].slice.call(menu1.querySelectorAll("button")).map(ButtonView.create);
let list2view = [].slice.call(menu2.querySelectorAll("button")).map(ButtonView.create);
var menu = new MenuModel();
list1view.forEach(elm=>elm.bind(menu));
list2view.forEach(elm=>elm.bind(menu));
});
Изначально получается довольно громоздкий велосипед, но если программировать в таком же стиле, то избыточности в коде станет меньше за счет обобщения.
Одно из преимуществ данного подхода заключается в том, что теперь можно оказывать влияние на элементы списка не обращаясь к dom element напрямую, а просто изменяя model, например, если теперь сделать вот так:
menu.select(2);
то изменения будут автоматически применены к представлению.
Понимание принципа работы данного кода помогает в последствии с легкостью перейти на любой современный mvc фреймворк.