Minska storleken på dina Javascript-filer

För att din kod ska vara läsbar och möjlig att underhålla krävs att du använder dig av indrag, radbrytningar och kommentarer när du kodar. Men om du utvecklar webblösningar som använder mycket Javascript så leder det ofta till förhållandevis tunga Javascript-filer.

Om du har börjat tittat på Silverlight så känner du säkert till att många Javascript-filer som verktygen genererar är optimerade genom att alla radbrytningar, indrag, mellanslag och kommentarer har tagits bort ur koden.

Ett exempel är Silverlight.js som skickas med Silverlight SDK:t och Visual Studio-mallarna och som nog platsar i Guiness rekordbok vad gäller längsta en-rads Javascriptet genom tiderna. Ett annat bra exempel är ASP.NET AJAX klientscripts-bibliotek.

Här är ett litet utdrag ur det biblioteket:

Function.__typeName="Function";Function.__class=true;Function.createCallback=function(b,a){return function(){var e=arguments.length;if(e>0){var d=[];for(var c=0;c<e;c++)d[c]=arguments[c];d[e]=a;return b.apply(this,d)}return b.call(this,a)}};Function.createDelegate=function(a,b){return function(){return b.apply(a,arguments)}};Function.emptyFunction=Function.emptyMethod=function(){};

Som du ser väldigt svårt att läsa men filen blir avsevärt mindre.

Du kan själv använda dig av gratis-programmet JSMIN för att ta bort radbrytningar, indrag, mellanslag och kommentarer från dina egna Javascript-filer och på så sätt optimera dem.

Om du snubblar över en optimerad Javascript-fil och vill ändra i den eller bara försöka förstå koden är det oerhört svårt när den är optimerad. Som tur är finns det även ett fiffigt online-verktyg som kan fixa till formateringen åt dig.

Så här ser ovanstående kodsnutt ut när den körts genom 'Online beautifier':

Function.__typeName = "Function";

Function.__class = true;

Function.createCallback = function(b, a) {

    return function() {

        var e = arguments.length;

        if (e > 0) {

            var d = [];

            for (var c = 0; c < e; c++) d[c] = arguments[c];

            d[e] = a;

            return b.apply(this, d)

        }

        return b.call(this, a)

    }

};

Function.createDelegate = function(a, b) {

    return function() {

        return b.apply(a, arguments)

    }

};

Function.emptyFunction = Function.emptyMethod = function() {};