Le librerie JavaScript nello stesso spazio (widget dell'interfaccia utente) utilizzano due approcci diversi per la creazione di istanze dei componenti:
-
Stringhe letterali per specificare i tipi e inlining il più possibile, ad esempio:
var oTable = webix.ui({ view: "datatable", columns: [ { id: "rank", header: "", css:"rank", width: 50 }, { id: "title", header: "Film title", width: 200 }, { id: "year", header: "Released", width: 80 }, { id: "votes", header: "Votes", width: 100 } ], autoheight: true, autowidth: true, data: tableData });
-
Una gerarchia di classi complessa e oggetti che passano invece di stringhe:
var oTable = new sap.ui.table.Table({ title: "Movies", }); oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Film title"}), template: new sap.ui.commons.TextField().bindProperty("value", "title"), sortProperty: "title", filterProperty: "title", width: "200px" })); oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Released"}), template: new sap.ui.commons.TextField().bindProperty("value", "released"), sortProperty: "released", filterProperty: "released", width: "80px" })); oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Votes"}), template: new sap.ui.commons.TextField().bindProperty("value", "votes"), sortProperty: "votes", filterProperty: "votes", width: "100px" })); // add the other columns... var oModel = new sap.ui.model.json.JSONModel(); oModel.setData({modelData: tableData}); oTable.setModel(oModel); oTable.bindRows("/modelData");
In entrambi i casi, tableData
è un semplice array JSON, quindi nessuna differenza:
[
{ id: 1, title: "Shawshank Redemption", year: 1994, votes: 678790, rank: 1 },
{ id: 2, title: "The Godfather", year: 1972, votes: 511495, rank: 2 }
]
Quali sono i vantaggi e gli svantaggi di questi due approcci, in termini di curva di apprendimento, manutenibilità, prevenzione di antipattern, riusabilità e altre best practice di ingegneria del software?