Object-Oriented JavaScript tools

Question

I have been working on the user interface of my website (www.swalif.com: do use chrome to translate if you like to). Not being familiar with jQuery I started off with JavaScript and now the file is huge: about 1000 lines of code. Furthermore the code is getting complex to handle and change.

Therefore I was looking for a way I could approach this problem in an object oriented manner that would result in a clean, re-usable system with a good architecture. Also would be nice to use features as provided by JQuery to keep the code small.

The problem is that there are a lot of tools out there and I cannot decide which one to invest time into to accomplish this task. e.g. mootools, prototype, jQuery, etc. So I need someone to lead me in the right direction.

This is our website www.swalif.com. Any other suggestion are also welcome.

Answer 1

For object-oriented javascript development I would recommend John Resig's Simple javascript Inheritance. It is a tiny bit of javascript that allows you to define classes, derive from base classes and override methods.

var Person = Class.extend({
  init: function(isDancing){
    this.dancing = isDancing;
  },
  dance: function(){
    return this.dancing;
  }
});
var Ninja = Person.extend({
  init: function(){
    this._super( false );
  },
  dance: function(){
    // Call the inherited version of dance()
    return this._super();
  },
  swingSword: function(){
    return true;
  }
});

var p = new Person(true);
p.dance(); // => true

var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true

// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

Answer 2

I think you'd be better off with a framework that actively developed and is build with OOP with extendability, reusability, mixings, mutators in mind.

This is exactly why MooTools was created.

That said, if you're not familiar with JS, it would be pretty difficult to grasp MooTools, since it's not a framework for beginners. Then again, if you grasp the notion of OOP, you should be ok.

Answer 3

Don't actually use a framework to implement your OOP. You get a much richer understanding of Javascript as a language when you deal with the nitty gritty of using Javascript's very flexible function prototype system to implement OOP-like operations.

Read about it here: http://phrogz.net/JS/Classes/OOPinJS.html.

Answer 4

If you only need to organize your code and don't need libraries you may use http://code.google.com/p/joose-js/. Otherwise use the oop model of the library you are using.

Simple example

Module("Test", function (m) {
    Class("Point", {
        has: {
            x: {
                is:   "rw",
                init: 0
            },
            y: {
                is:   "rw",
                init: 0
            }
        },
        methods: {
            clear: function () {
                this.setX(0);
                this.setY(0);
            }
        }
    })
})