samedi 27 avril 2019

would using JavaScript classes or modular pattern be better for this project?

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