mercredi 1 juillet 2015

Best way to fire different functions for different window sizes

I have a site, that behaves in different ways for mobile and desktop devices. I could use this selector to choose wether to fire functions:

if($(window).width < 768) {
    // fire functions for mobile
} else {
    // fire functions for desktop
}

How does this snippet work, if I write a lot of stuff into the placeholders? Does it skip the whole if or else code (to reduce loading time)?

Should I create variable functions like so, to keep it clean, or should I trigger everything my if {} else {} function?

// Is this one better?
if ($(window).width() < 768) {

    // $('something').something();
    // var another = $('another');
    // another.something();
    // lets guess lots of stuff to do here
    // like 200 lines of code

} else { 

    // $('something').something();
    // var another = $('another');
    // another.something();
    // lets guess lots of stuff to do here
    // like 200 lines of code
}

// Or this one?
var mobileFunctions = function() {

    // $('something').something();
    // var another = $('another');
    // another.something();
    // lets guess lots of stuff to do here
    // like 200 lines of code
}
var desktopFunctions = function() {
    // $('something').something();
    // var another = $('another');
    // another.something();
    // lets guess lots of stuff to do here
    // like 200 lines of code
}
if ($(window).width() < 768) { 
    mobileFunctions();
} else { 
    desktopFunctions();
}

Aucun commentaire:

Enregistrer un commentaire