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 thestaticClass
. Just a personal preference to avoid meaningless variable assigning when you extend the function withFoo.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
Categories:
javascript(1)