thomasfrank.se

Add some klass to JavaScript

Cheat sheet -- klass.js

A simple example -- using the extends, public, super and constructor features

• We tell a class to extend another class using _extends (whatToExtend).
• All members (variables and methods) are protected by default, this means they can not be seen from outside the object but get inherited, unless we say otherwise. In this example we make the methods move and bite public.
• _constructor is a magic method - it gets run each time you create a new instance of a class.
• _super() is a magic reference - it allows you to call a method you have overwritten in a child class from inside the method you've replaced it with.

// Class definitions
var Animal = klass (function Animal(){
  _public (move, bite);
  var name;
  var _constructor = function(n){
    name = n
  };
  var move = function(meters){
    alert (name + ' moved ' + meters + 'm.')
  };
  var bite = function(){
    alert (name + ' bites!');
  };
});

var Snake = klass (function Snake(){
  _extends (Animal);
  var move = function(){
    alert ('Slithering');
    _super (5);
  };
  var bite = function(){
    alert(name + ' attacks with a venomous bite!');
   };
});

var Horse = klass (function Horse(){
  _extends (Animal);
  var move = function(){
    alert ('Galloping');
    _super (45);
  };
});

// Create some instances and call their methods
var sam = new Snake ('Sammy the Python');
var tom = new Horse ('Tommy the Palomino');
sam.move();
sam.bite();
tom.move();
tom.bite();

Some ground rules

1. All code in a class definition should reside inside the methods you define, except for variable declarations and calls to the special klass methods.
2. All members are protected by default. Visibility and mutability can only be changed for methods (using calls to _public, _abstract and _final), not other members/variables. The exception to this rule is that _private can be used for all members (methods and variables).
3. Do not define variables/methods that conflict with the ones klass use (_public, _abstract etc.) in variable scopes that surround your class definitions. The exception is the global scope where you are free to do so.

Creating getters and setters

// Class definition
var Animal = klass (function Animal(){
  _public (_g.brain,_gs.legs); 
  var legs = 4;
  var brain = 'hopefully';
});

// Setting values (since brain is "get-only" it will not change)
var myAnimal = new Animal();
myAnimal.legs (3);
myAnimal.brain ('not really');

// Getting values
alert ('legs: ' + myAnimal.legs())
alert ('brain: ' + myAnimal.brain());

Singletons

// Class definitions
var Universe = klass (function Universe(){
  _singleton ();
  _public (_g.size);
  var size = 'large';
});

var ParallellUniverse = klass (function ParallellUniverse(){
  _extends (Universe);
  _singleton (false);
  var size = 'unknown';
});

// Universe becomes an instance directly since it is a singleton
alert (Universe.size());

// But our parallell universes are not singletons and require instantiation
var pu1 = new ParallellUniverse ();
var pu2 = new ParallellUniverse ();
alert (pu1.size ());
alert (pu2.size ());

Private members

// Class definitions
var Wolf = klass (function Wolf(){
  _public (bite);
  _private (howl, kill);
  var species = "Wolf";
  var kill = "I kill what I've bitten.";
  var howl = function(){
    alert ("Aoooooo!");
  };
  var bite = function(){
    alert (
      "I'm a " + species 
      + "!\nI bite!\n" 
      + kill
    );
    howl ();		
  };
});

var Dog = klass (function Dog(){
  _extends (Wolf);
  var species = "Dog";
});

// Create a wolf and a dog, then let them bite
// the Dog will not now the value of "kill" or "howl"
// so an error will be thrown when it tries to howl
var bigBad = new Wolf();
var smallPup = new Dog();
bigBad.bite();
smallPup.bite();

Abstract classes and methods

// Class definitions
var Animal = klass (function Animal(){
  _abstract ();
});

// Trying to create an instance of Animal - throws an error since Animal is abstract
var myAnimal = new Animal();

// Class definitions
var Animal = klass (function Animal(){
  _public (legs);
  _abstract (legs);
});

var Snake = klass (function Snake(){
  _extends (Animal);
  var legs = function(){
    alert ("I'm a snake - I don't have any legs");
  };
});

var Dog = klass (function Dog(){
  _extends (Animal);
});

// Creating an instance of Snake
var mySnake = new Snake ();
mySnake.legs ();

// Trying to create an instance of Dog - throws an error since legs is abstract
var myDog = new Dog ();

Final methods

// Class definitions
var Browser = klass (function Browser(){
  _public (status);
  _final (status);
  var status = function(browserName){
    return browserName == 'ie6' ? 'dead' : 'alive';
  };
});

var MsBrowser = klass (function MsBrowser(){
  _extends (Browser);
  // trying to override status - this will throw an error since status is final
  var status = function(){
    return 'alive'
  }
});

Static members

//Class definition
var Animal = klass (function Animal(){
  _public (info, galacticMove);
  var _static = function(){
    _public (generalStatus);
    var generalStatus = function(){return 'amazing'};
    var planet = 'Earth';  
  };
  var name;
  var _constructor = function (n){name = n};
  var info = function(){
    alert ("Hi there I'm " + name + ' and I live on ' + planet + '...');
  };
  var galacticMove = function (newPlanet){
    alert ("We can't move just " + name + " to " + newPlanet + "."
      + "\nLet's move ALL animals there...");
    planet = newPlanet;
  };
});

// Let's create two fine animals
var cam = new Animal ('Cammy The Cobra');
var liv = new Animal ('Liv The Lion');
// Now Cammy the Cobra moves to Mars
cam.galacticMove ('Mars');
// And as it turns out Liv The Lion lives on Mars too, since planet is a static member
cam.info();
liv.info();
// Public static methods are attached to the class constructor
alert("All animals are " + Animal.generalStatus() + '.');

Multiple inheritance

// Class definitions
var Plant = klass (function Plant(){
  var typeOfOrganism = 'plant';
  var asexualReproduction = true;
  var stationary = true;
});

var Animal = klass (function Animal(){
  var typeOfOrganism = 'animal';
  var eatsOtherOrganisms = true;
});

var Fungus = klass(function Fungus(){
  _extends (Animal, Plant);
  var typeOfOrganism = 'fungus';
  var _constructor = function(){
    var aboutMe = [
      "I'm a " + typeOfOrganism + ".",
      "I " + (eatsOtherOrganisms ? '' : "don't ") + "eat other organisms.",
      "I think sex is " +  (asexualReproduction ? "overrated." : "important."),
      stationary ? "I don't move a lot..." : "I like to move it, move it!"
    ].join('\n\n');
    alert (aboutMe);
  };
});

// A Fungus gets created and tells us about life
var myFungus = new Fungus();

Alternative syntax -- prefixing function names

// Class definition using alternative syntax
var Animal = klass (function Animal(){
  var name;
  var _constructor = function(n){
    name = n
  };
  var _public_move = function(meters){
    alert (name + ' moved ' + meters + 'm.')
  };
  var _public_final_bite = function(){
    alert (name + ' bites!');
  };
});

// An instance of Animal
var myAnimal = new Animal ('Furry Fido');
myAnimal.move (10);
myAnimal.bite ();

Settings -- change how klass works and modify the syntax

// Default settings for klass
{
  // Function names etc...
  publicFuncname : '_public',
  privateFuncname: '_private',
  extendsFuncname: '_extends',
  singletonFuncname: '_singleton',
  finalFuncname: '_final',
  abstractFuncname: '_abstract',
  staticFuncname: '_static',
  constructorFuncname: '_constructor',
  superFuncname: '_super',
  getterFuncname: '_g',
  getterSetterFuncname: '_gs',
  // If the alternative syntax - using method prefixes - is allowed
  allowAlternativeSyntax: true
};

// Change one or several settings
klass.settings({
  publicFuncname: '_pub',
  getterSetterFuncname: 'getset'
});

// Now this will work - note the use of "_pub" and "getset"
Animal = klass (function Animal(){
  _pub (getset.isAlive);
  var isAlive;
});

var myAnimal = new Animal ();
myAnimal.isAlive ("I'm alive and kicking!");
alert (myAnimal.isAlive());

Working with JavaScript compressors/minifiers

• Google Closure Compiler @compilation_level WHITESPACE_ONLY
• YUI Compressor --nomunge -- i.e. minify only
• Packer keep Shrink variables turned off
• JS Min agressive or any other level
• Uglify JS (source: github) -nm (can't be set in the online version)

Performance and stability