Created
July 20, 2010 23:37
-
-
Save mfolnovic/483786 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 1. way (function) */ | |
$(function() { | |
function Navigation() { | |
this.init = function() { | |
$( "nav li" ).bind( 'mouseover mouseout', this.action ).find( '.dropdown' ).parent().append( '<div class="sdropDown"> </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"> </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()}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 2. way (JSON) */ | |
$( function() { | |
var Navigation = { | |
init: function() { | |
$( "nav li" ).bind( 'mouseover mouseout', Navigation.action ).find( '.dropdown' ).parent().append( '<div class="sdropDown"> </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"> </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()}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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"> </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}; | |
}; | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
function init() { | |
$( "nav li" ).bind( 'mouseover mouseout', action ).find( '.dropdown' ).parent().append( '<div class="sdropDown"> </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"> </div>')}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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"> </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"> </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