Question

I was building a large web script with jquery. It does various things and one of them is interacting with the DOM elements. I used a simple JavaScript function

function mymainclass() {

// declared variables here
this.var1 = new String
// Some functions
this.fn1 = function () { ... }

}

After that, I added other functions using the prototype function in JavaScript.

mymainclass.prototype.afn1 = function () {
...
}

I made a good progress using this methodology, finished writing around 300 lines before I read the Appendix C in “learning Jquery” book. It was about Javascript closures, and it recommended that I use jQuery fn function. So instead of adding functions by prototype I would use:

jQuery.fn.afn1 = function() {
....
return this;
}

I re-factored the whole code from scratch. I was happy because of the new usage

$('..').afn1('..','..',...);

which is much more better in coding; but when I was trying things in my new code, I noticed that it’s much SLOWER than the old one. The old code speed is 50.56ms in total compared to 488ms when the jQuery.fn was used.

I would appreciate any advice about the jQuery plug-ins methodology. I’m afraid that after going 4000 or 5000 lines in my script I find it quite slow and will be obliged to re-factor the code from scratch. What shall I do? Did you find the same issue?

I would also like to know how do you optimize a script so it runs quicker. I use FireBug to track the speed.

Answer 1

Normally you’d want to use the jQuery plugin authoring when you are targeting DOM.

If you are familiar with the javascript prototype and writing more complex apps, it might be a good idea to write your code using native inheritance first, and then add a jQuery plugin to simplify DOM implementation.

Prototype is a fast and memory-effective way of extending your javascript code, since every instance inherits the same prototype methods without the need for duplicates.

I tend to write the app in a native environment and then add a plugin if needed:

myClass = function(elem) {
    this.elem = elem;
}

myClass.prototype = {
    myMethod: function() {
        // do stuff
        this.elem.className = 'foo';
    }
}

$.fn.myClass = function() {
    return this.each(function() {
        var instance = new myClass(this);
        instance.myMethod();
    }
};

Now you can use this class i two ways:

$('#elem').myClass();

or:

var id = document.getElementById('elem');
var instance = new myClass(id);
instance.myMethod();