Javascript Class
1

Javascript is a weird programming language, it doesn't come with a class structure(at least before es6) like in other languages. Developers who has experiences in other languages will bring their existed styles into Javascript and create their own standard. As there are so many different standards, it makes many junior developers(including me) very confused in the first place. In this short post, I am gonna share my standard, and please feel free to comment(but please do not start a war).

Javascript - static class example

var staticClass = (function(exports) {

    // always define a local undef variable in a class as undefined 
    // can be overrided and a local variable can be minified
    var undef;

    var _localVariable = 0;

    function init(cfg) {
        // use whatever mixIn tool you found comfortable with
        // in this case, I used: http://moutjs.com/docs/v0.1.0/object.html#mixIn
        mixIn(exports, {

            // assign default value to some public variables  
            foo: 'bar'

        }, cfg);
    }

    function _privateFunc() {
        // do something private 
    }

    function publicFunc() {
        // do something public  
    }

    // expose some public functions at the end  
    exports.init = init;
    exports.publicFunc = publicFunc;

    return exports;

}({}));
  • staticClass is basically a plain object, so I personally prefer to name it in camel case and it will be easier to identify if it is a static class and regular class.
  • With this structure, it is very easy to convert it into AMD/CommonJS formats by adjusting the head and tail of the codes
  • All public functions can be found at the bottom of the document.
  • No unnecessary this.

Javascript - regular class example

var RegularClass = (function() {

    var undef;

    function RegularClass() {}

    var _p = RegularClass.prototype;

    function init(cfg) {
        mixIn(this, {

            foo: 'bar'

        }, cfg);
    }

    // well, you can still do some private call here as long as
    // it doesn't related to the current instance. I don't see why
    // you should do it... but just saying you can do it.
    function _privateFunc() {
        // do something private 
    }

    function publicFunc() {
        // do something public  
    }

    function _protectedFunc() {
        // do something protected   
    }

    // expose some public functions at the end  
    _p.init = init;
    _p.publicFunc = publicFunc;
    _p._protectedFunc = _protectedFunc;

    return RegularClass;

}());
  • constructor should only do variables assigning, no action call because of this. Personally, I would instead creating an init function to handle the variables assigning as well so that it looks more likely to the staticClass. Just a personal preference to avoid meaningless variable assigning when you extend the function with Foo.prototype = new RegularClass();
  • Same advantage for AMD/CommonJS formats
  • All public/protected functions can be found at the bottom of the document.

Javascript - extended class example

var ExtendedClass = (function() {

    var undef;

    function ExtendedClass() {}

    var _super = RegularClass.prototype;
    var _p = ExtendedClass.prototype = new RegularClass();

    // even though I don't use constructor, it is still better to use
    // ExtendedClass as constructor for development purpose 
    _p.constructor = ExtendedClass;

    function init(cfg) {
        _super.init.call(this, mixIn({}, {

            foo: 'bar'

        }, cfg));
    }

    function _privateFunc() {
        // do something private 
    }

    function publicFunc() {
        // do something public  
    }

    function _protectedFunc() {
        // super call :)
        _super._protectedFunc.apply(this, arguments);
    }

    // expose some public functions at the end  
    _p.init = init;
    _p.publicFunc = publicFunc;
    _p._protectedFunc = _protectedFunc;

    return ExtendedClass;

}());
  • with the _super shorthand, now it looks like other programming languages

Conclusion

Code with ES6 if you can :D

Share:
Comments
Tengotengo
2016-02-25 19:02:41
Reply to
What about destructors?
Cancel
What do you think?




All comments require my approval in order to be public. So... Spammers, please get the fuck out of my blog. Cunt!