Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mfolnovic/483786 to your computer and use it in GitHub Desktop.
Save mfolnovic/483786 to your computer and use it in GitHub Desktop.
I was searching for a best way to define a javascript class, and then, I found this:
http://www.phpied.com/3-ways-to-define-a-javascript-class/
So, it describes three ways:
1. using a function
2. using JSON
3. singleton (combination of 1. and 2.)
I couldn't find any article which describes what is the best way, in matter of compression, so I decided to test it by myself.
So I made three versions of my navigation system (I already had it in 2. way before I read that article), and I compressed them using google closure compiler, and these are result:
1. way:
Original Size: 494 bytes (286 bytes gzipped)
Compiled Size: 351 bytes (229 bytes gzipped)
2. way:
Original Size: 462 bytes (284 bytes gzipped)
Compiled Size: 322 bytes (224 bytes gzipped)
3. way:
Original Size: 488 bytes (287 bytes gzipped)
Compiled Size: 345 bytes (225 bytes gzipped)
So, winner is 2. way (for 1 byte gzipped, but for more complex code, it would be more).
But, let's look at compressed code.
So, what is the only problem? Properties names don't get compressed! But they could, right? I'm using it just in local scope, so why not?
Since it doesn't work that way, I tried something else. I figured, since outside Navigation, I'll only call init. And then, I tried defining it in local scope, but without any objects, as you can see in last example (scope.js). So, it was:
Original Size: 395 bytes (246 bytes gzipped)
Compiled Size: 272 bytes (202 bytes gzipped)
Which beats 2. way for 22 bytes (this is small example, so this is quite much).
There are even more stuff in my code which works in same way, so I find doing it in this way the right thing.
But, be careful, not everything isn't compatible with this way. If it isn't, 2. way (JSON) is the best way.
Is there better way?
/* 1. way (function) */
$(function() {
function Navigation() {
this.init = function() {
$( "nav li" ).bind( 'mouseover mouseout', this.action ).find( '.dropdown' ).parent().append( '<div class="sdropDown">&nbsp;</div>' );
};
this.action = function( e ) {
var mouseover = e.type == 'mouseover';
el = $( mouseover ? ".sdropDown" : '.sdropUp', this ).toggleClass( 'sdropDown sdropUp' ).prev( '.dropdown' );
if( mouseover ) el.show();
else el.hide();
};
};
nav = new Navigation();
nav.init();
});
/* Compressed */
$(function(){nav=new (function(){this.init=function(){$("nav li").bind("mouseover mouseout",this.action).find(".dropdown").parent().append('<div class="sdropDown">&nbsp;</div>')};this.action=function(a){a=a.type=="mouseover";el=$(a?".sdropDown":".sdropUp",this).toggleClass("sdropDown sdropUp").prev(".dropdown");a?el.show():el.hide()}});nav.init()});
/* 2. way (JSON) */
$( function() {
var Navigation = {
init: function() {
$( "nav li" ).bind( 'mouseover mouseout', Navigation.action ).find( '.dropdown' ).parent().append( '<div class="sdropDown">&nbsp;</div>' );
},
action: function( e ) {
var mouseover = e.type == 'mouseover';
el = $( mouseover ? ".sdropDown" : '.sdropUp', this ).toggleClass( 'sdropDown sdropUp' ).prev( '.dropdown' );
if( mouseover ) el.show();
else el.hide();
}
};
Navigation.init();
});
/* Compressed */
$(function(){var b={init:function(){$("nav li").bind("mouseover mouseout",b.action).find(".dropdown").parent().append('<div class="sdropDown">&nbsp;</div>')},action:function(a){a=a.type=="mouseover";el=$(a?".sdropDown":".sdropUp",this).toggleClass("sdropDown sdropUp").prev(".dropdown");a?el.show():el.hide()}};b.init()});
/* 4. way (module pattern) */
$(function() {
var Navigation = new function() {
var init = function() {
$( "nav li" ).bind( 'mouseover mouseout', this.action ).find( '.dropdown' ).parent().append( '<div class="sdropDown">&nbsp;</div>' );
};
var action = function( e ) {
var mouseover = e.type == 'mouseover';
el = $( mouseover ? ".sdropDown" : '.sdropUp', this ).toggleClass( 'sdropDown sdropUp' ).prev( '.dropdown' );
if( mouseover ) el.show();
else el.hide();
};
return {init: init};
};
});
$(function() {
function init() {
$( "nav li" ).bind( 'mouseover mouseout', action ).find( '.dropdown' ).parent().append( '<div class="sdropDown">&nbsp;</div>' );
};
function action( e ) {
var mouseover = e.type == 'mouseover';
el = $( mouseover ? ".sdropDown" : '.sdropUp', this ).toggleClass( 'sdropDown sdropUp' ).prev( '.dropdown' );
if( mouseover ) el.show();
else el.hide();
};
init();
});
/* Compressed */
$(function(){$("nav li").bind("mouseover mouseout",function(a){a=a.type=="mouseover";el=$(a?".sdropDown":".sdropUp",this).toggleClass("sdropDown sdropUp").prev(".dropdown");a?el.show():el.hide()}).find(".dropdown").parent().append('<div class="sdropDown">&nbsp;</div>')});
/* 3. way (singleton) */
$(function() {
var Navigation = new function() {
this.init = function() {
$( "nav li" ).bind( 'mouseover mouseout', this.action ).find( '.dropdown' ).parent().append( '<div class="sdropDown">&nbsp;</div>' );
};
this.action = function( e ) {
var mouseover = e.type == 'mouseover';
el = $( mouseover ? ".sdropDown" : '.sdropUp', this ).toggleClass( 'sdropDown sdropUp' ).prev( '.dropdown' );
if( mouseover ) el.show();
else el.hide();
};
};
Navigation.init();
});
/* Compressed */
$(function(){(new (function(){this.init=function(){$("nav li").bind("mouseover mouseout",this.action).find(".dropdown").parent().append('<div class="sdropDown">&nbsp;</div>')};this.action=function(a){a=a.type=="mouseover";el=$(a?".sdropDown":".sdropUp",this).toggleClass("sdropDown sdropUp").prev(".dropdown");a?el.show():el.hide()}})).init()});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment