Dependency Injection (DI) allows to obtain instances of classes without having to create them explicitly.
DI reduce the coupling in your application and facilitate the testing.
InfuseJS (by the creator of SomaJS) allows DI in vanilla JS
Here is a Demo
// Helper
const elt = id => document.getElementById(id);
class Model {
constructor() {
this.data = {
name: "John Doe",
age: 30
};
}
setData(name, age) {
this.data.name = name;
this.data.age = age;
}
getData() {
return this.data;
}
}
class View {
displayData(data) {
elt("name").innerHTML = `<h3>Hello ${data.name || "??"}</h3>`;
elt("age").innerHTML = `<h3>You are ${data.age || "??"} years old</h3>`;
}
}
class Controller {
constructor(model, view) {
this.model = model
this.view = view;
}
updateData() {
const name = elt("name-input").value;
const age = elt("age-input").value;
this.model.setData(name, age);
this.view.displayData(this.model.getData());
}
}
function main() {
var injector = new infuse.Injector();
injector.mapClass("model", Model);
injector.mapClass("view", View);
injector.mapClass("controller", Controller);
var controller = injector.getValue("controller");
window.controller = controller;
}
main();
Top comments (0)