Object Oriented JavaScript Tools

Question

I am working on the user interface of my website ( www.swalif.com : use chrome to translate if you want), Not familiar with jQuery, I started with JavaScript and now the file is huge: about 1000 lines of code. In addition, the code becomes difficult to process and modify.

Therefore, I was looking for a way in which I could approach this problem in an object-oriented manner, which would lead to a clean, reusable system with good architecture. It would also be nice to use the functions provided by jQuery to save the code .

The problem is that there are many tools, and I can’t decide why I need to invest time to complete 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 suggestions are also welcome.

Answer 1

For object oriented javascript development, I would recommend John Resig Simple javascript Inheritance . This is a tiny bit of javascript that allows you to define classes based on base classes and overriding 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

, , , , , .

MooTools.

, JS, MooTools, . , , .

Answer 3

. Javascript , Javascript , .

: http://phrogz.net/JS/Classes/OOPinJS.html.

Answer 4

If you just need to arrange the code and don’t need libraries, you can 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);
            }
        }
    })
})