How can I properly organize my JS code into a more traditional class structure?

Question

I'm struggling with my JS code structure that's becoming apparent during my unit testing attempts. I'm used to the class structure, but I'm a bit lost in the JS world where there aren't any classes. I'm looking for a way to organize my code in the traditional class/constructor architecture. Here's what I have:

function ddGridSelector(primaryId, templateDefault, gridObj) {
    //set the variables
    this.primaryId = primaryId,
    this.defaultTemplate = templateDefault,
    this.gridObj = gridObj,
    this.gridObj.searchVal = '',

    this.init = ddgs_init
}

function ddgs_init(ddgs_obj) {
    ddgs_setDefaultTemplate(ddgs_obj);
    ddgs_initGrid(ddgs_obj);
    ddgs_initKendoWindow(ddgs_obj);
    ddgs_initKendoButton(ddgs_obj);
    ddgs_initResetButton(ddgs_obj);
    ddgs_addGridEventListener(ddgs_obj);
}

function ddgs_setDefaultTemplate(ddgs_obj) {
    //doing stuff
}

function ddgs_initGrid(ddgs_obj) {
    //more stuff
}

To call any of these...

var ddGridSelector_new = new ddGridSelector('PrimaryIdentifier', templateDefault, gridObj);

ddGridSelector_new.init(ddGridSelector_new);

It seems really redundant to pass my object to my function that's specified in my constructor so I'm sure I'm missing something obvious here. Really would appreciate some guidance on the matter. I think I'm close to being on a good path.

Answer 1

ES5 Way

You can do "functional classes" like this, which are pretty self explainable:

function User(name) {
  // name is thus "private" here because it's
  // not put under "this.name"

  this.sayHi = function() {
    alert(name);
  };
}

let user = new User("John");
user.sayHi(); // John

There's also the prototype class pattern as well:

function User(name, birthday) {
  this._name = name;
}

User.prototype.sayHi = function() {
  alert(this._name);
};

let user = new User("John");
user.sayHi(); // John

Source/Tutorial with the examples listed here

ES6+ Way

In ES6 you can declare classes in a way that looks more like traditional programming languages:

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }
}

let user = new User("John");
user.sayHi(); // John

However you will need a transplier like Babel or Typescript to compile it down to web compatible code if you are targeting platforms such as IE (all versions), Opera Mini, and the Android Browser (4.4.x, ~16% of all Android versions in the field) (web compat sources), or things such as Cordova on older iOS devices (< 10, UIWebView, etc).

Node.js should have support for classes from 4.8.4(!) and above, surprisingly enough (source).

Answer 2

but I'm a bit lost in the JS world where there aren't any classes.

But... there are!

class ddGridSelector {
    constructor(primaryId, templateDefault, gridObj) {
        //set the variables
        this.primaryId = primaryId,
        this.defaultTemplate = templateDefault,
        this.gridObj = gridObj,
        this.gridObj.searchVal = '',
     }

     init() {
        this.setDefaultTemplate();
        this.initGrid();
        this.initKendoWindow();
        this.initKendoButton();
        this.initResetButton();
        this.addGridEventListener();
    }

    setDefaultTemplate() {
        //doing stuff
    }

    initGrid() {
        //more stuff
    }
}

Answer 3

I tend to love this structure for a class-like layout when I want to avoid new features. It gives you a private scope where you can scope functions and shared variables as you need them and lets you separate out a "constructor" and public methods on the prototype.

var MyType = (function () {
    function MyType() {
        //My Constructor
    }

    MyType.prototype = {
        constructor: MyType,
        publicMethod: privateMethod
    };

    function privateMethod() {
        ...
    }

    return MyType;
}());

The outer scope runs immediately and keeps the global namespace clean. We augment the private function with prototype instance methods, define any "private" methods needed, and return the private type after setup. This lets you instantiate a class like normal and call any methods.

var example = new MyType();
example.publicMethod();