pomke.js; making javascript classy, for better or worse*

pomke.js is a small javascript library which implements the concepts of classes and multiple inheritance as well as modules and dependancies, loosely following the conventions of python where appropriate.

pomke.js has been designed with no dependancies and to play nicely with whichever javascript framework you wish to use. The library was initially developed for a Mochikit project, and some reminents of that lovely library exist in the pomke.js internals.

*I initially wrote pomke.js back in 2005, a time when javascript libraries as we know them now were a fantasy, and with a team of developers who had issues with prototype-based languages such as javascript. Wheather or not the concepts here are useful today are debatable, yet there are still a small handful of applications in the wild making use of pomke.js internally and I thought that it would be worth making this code available to anyone who might find it useful.

---

This page you are currently viewing uses pomke.js + jquery to provide the functionality in the navigation on the side, this is a contrived example but covers the basic functionality of the library. If you find the dialog popup used on this page a bit wonky, thats vanilla jquery-ui, I'm not entirely sure whats up there.

pomke.js provides three top-level objects:

pomke is the top level pomke module, containing pomke internals, this can safely be ignored unless you're interested in reusing some of its components.

module is the module factory, you use this to create 'modules' as in python which can be loaded on demand. A module specifies a number of dependancies, these can be proper pomke modules or other javascript libraries. Deps are always loaded before any module code is run.

A module may have an __init__ method, this will be invoked when all deps are loaded on the page. Module dependancies are loaded in order and then their __init__ method's are invoked in appropriate order, for instance module A depends on B depends on C, loading A will ensure B is loaded and in turn C.

Init your top level module in your main template:

 yourapp = module('yourapp', 0.1);
            

Add sub-modules containing functionality as required ie: yourapp/somemodule.js

 yourapp.somemodule = module('yourapp.somemodule', 0.1);
 yourapp.somemodule.dependsOn('yourapp.widgets.button');
 yourapp.somemodule.__init__ = function() {
    yourapp.widgets.Button("#foo"); 
 }
            

klass is the class factory, it creates classes which can be instantiated (you can omit the 'new' keyword with a pomke class). Classes can be provided one or more base classes, MRO behaves as it does in python. All methods are bound to the instance and can safely be passed as callbacks, with 'this' being respected.

Wrap functionality up into reusable classes ie: yourapp/widgets.js

 yourapp.widgets = module('yourapp.widgets', 0.1);
 yourapp.widgets.dependsOn('jquery.jquery');

 yourapp.widgets.BaseWidget({

    __init__ : function(selector) {
        this.selector = $(selector);
        this.renderWidget();
    }

 });

 yourapp.widgets.Button = klass('yourapp.widgets.BaseWidget', {

    renderWidget : function() {
        // do some stuff..
    }

 });
            

And thats about it.. its small and may have some bugs, you may or may not find it useful, I hope you do, and if so drop me a line and let me know ^_^

- Pomke Nohkan