I am trying to create a web based music player (JS only) that is fairly complicated and would like to create it as neat as possible so I can reuse the code for similar projects.
At this point I am stock what approach would be more suitable. I can do it using modular pattern such as the below example. Or use ES6 and separate the code into few classes. I do not know which approach would be more professional and commercial for this.
(function() {
var myModule = {
init: function() { // Initialising the module
this.cacheDom();
this.bindEvents();
this.render();
},
catchDom: function() { // DEALS with HTML to not reapeat in the code
this.$el = $("#plugin");
this.$button = this.$el.find("button");
},
bindEvents: function() { // Translates the current state of the code into the HTML
this.$button.on('click', this.aFunction.bind(this));
},
render: function() {// UPDATING INTERFACE
this.$ul.html("ADD DATA TO HTML");
},
aFunction: function(){
console.log("something")
}
}
myModule.init();
});
class class1 {
constructor(name, location) {
this.name = name;
this.location = location;
}
start() {
alert(this.name + 'Meetup ' + 'is started at ' + this.location);
}
}
let obj1 = new class1('JS', 'Blr');
let obj2 = new class1('Angular', 'Noida');
obj1.start(); //JSMeetup is started at Blr
obj2.start(); //AngularMeetup is started at Noida
import class1 from './class1.js'
.
.
.
.
Again the point is to keep the plugin profession, easy to extend and reusable for similar future projects.
The answer would be the one that explains why one is better than the other.
Aucun commentaire:
Enregistrer un commentaire