RK* - rikkertkoppes.com

thoughts

Javascript design pattern

This is more like a personal note, but I put it online anyway. It is not polished and shaped (no introductory texts etc), but could be useful for others.

don't augment existing classes

This one is so important, don't augment (add new members to) classes that already exist. Particularly native classes, like Object or Array. There are a lot of libraries that do this, I know, but especially when more parties are using your software, this could really be a pain in the ass.

This also includes augmenting DOM elements. Try not to store information in DOM elements.

Also don't augment even your own classes outside the package they were created in (see further on for the concept of a package in javascript). You might want to extend the package though.

namespace it

Put everything in it's own namespace. There are lots of third party libraries these days and one wouldn't want to overwrite other code. This keeps the global object (window) clean too.

if (!com) {var com = {};}
if (!com.rikkertkoppes) {com.rikkertkoppes = {};}

//here is an example package
com.rikkertkoppes.example = function() {
  //import the package or create a new one
  var EXAMPLE = com.rikkertkoppes.example||{};
  //fill the object
  //return the object
  return EXAMPLE;
}();

This structure will allow to put private (helper) functions inside the package, which will never be seen outside the package.

don't use syntax sugar or inheritance helpers

These include Douglas Crockford's object function and the prototype library Class object.

These things might help you (personally) in writing, but can be really confusing to others. The javascript way of inheriting is not that bad. Learn the language and don't try to mimic others (I have been there, shortly).

use creator functions to make classes

Sure, there are no classes in javascript, but some objects are just meant to create copies of, so do call them classes, it will be less confusing to those Java programmers.

Creator functions are not mandatory, but will enable you to put code into blocks. Some editors (like notepad++) will allow you to collapse all code in the creator function, which is really useful. So instead of:

var Foo = function(){};
Foo.prototype.bar = function(){};
Foo.prototype.baz = function(){};

do:

var Foo = function() {
  var _Foo = function(){};
  _Foo.prototype.bar = function(){};
  _Foo.prototype.baz = function(){};
  return _Foo;
}();

Note that this code will appear inside the example package created before. If one wants to publish this class (by any name), add it into the return object:

com.rikkertkoppes.example = function() {
  var EXAMPLE = com.rikkertkoppes.example||{};
  var Foo = function() {
    //the code above
  }();
  EXAMPLE.Foo = Foo;
  return EXAMPLE;
}();

This will have several advantages

  • Foo can be easily renamed within the package, you don't have to replace every line in which prototype methods are declared.
  • You can easily rename the published class, by adjusting the return object.
  • Your code sits nicely in blocks, can be collapsed in some editors.

partition it

When libraries tend to become large, consider partitioning into multiple files. Name them wisely, something like:

  • example.core.js
  • example.foo.js
  • example.fun.js

Then use jsplus to concatenate these files into one (example.js, indeed), then use Douglas Crockford's jsmin to minify the library. Serve gzipped.

jsplus is a little program of mine, which allows you to concatenate several javascript files and throw the resulting file through jsmin. It is not ready to go public yet, but it will, eventually.

use descriptive member names

DO use descriptive names for your methods and properties. A somewhat longer name is much more readable than a ambiguous shorter one. The following is perfectly legal JS syntax:

var _ = $._()['#'];

Obviously, it selects the # property from the object returned by the _ method of the $ object and assigns it to the global variable _. But what does it do?

You might consider:

var _ = {_: 'unreadable code detected!'};

So you could do alert(_._); at strategical places in your code.

(This is a joke).


comment

no comment

Add comment
older articles

AdministrationAtom feed