Self invoking functions i JavaScript

Upptäckte en sexig lösning när jag fick i uppgift att blåsa upp en iframe till 100% av en sidas höjd (100% – en topbanners höjd). Själva koden för att göra det är inget speciellt, men det vackra i det hela är att använda en självanropande funktion för att skapa funktionen som ska användas för att ändra storlek på iframen.

var theFrame = $("#dinFrame");
(Resize = function() {
    theFrame.height($(window).height() - 100);
})();
$(window).resize(Resize);

Vad det här gör rent tekniskt är att köra en anonym funktion, som definierar en ny funktion och samtidigt kör den funktionen. Den cachar även DOM-elementet och lyssnar på resize-event, men det är inte det sexiga.

Samma kod skulle kunna skrivas:

var theFrame = $("#dinFrame");
var Resize = function() {
    theFrame.height($(window).height() - 100);
};
$(window).resize(Resize);
Resize();

Men enligt mig är det inte sexigt alls.

Samma princip används när man skriver jQuery-plugin och vill försäkra sig om att $-funktionen faktiskt pekar på jQuery och inget annat:

(function($) {

    //SAFE CLOSURE'D

})(jQuery);

För att vara extra säker kan man även lägga till window och undefined som parametrar, så ingen mixtrar med dem och förstör dina scripts. (Måste såklart köras när this pekar på det globala windowobjektet)

(function($, window, undefined) {

    //SAFER CLOSURE'D

})(jQuery, this);

Mest för att försäkra sig om att window är window och undefined verkligen är undefined.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>