Question

I’m well versed with javascript and jQuery. I’ve just never built a class before. Maybe a class is not even what I’m looking for.

I have a function I call to launch an overlay and it’s used a lot and contains some parameters.

function launchOverlay(method, content, width, closeBtn) {

    $("body").append('<div id="overlay-backdrop" style="display:none"></div>');

    $("#overlay-backdrop").css({
        width: $(document).width(),
        height:$(document).height()
    }).fadeIn();

    $("#overlay-backdrop").append('<div id="overlay-canvas-area"><div class="inner-canvas-area"></div><div>');

    if(typeof closeBtn == 'undefined'){
        $("#overlay-canvas-area").append('<div class="close-btn"><a class="close" onClick="closeOverlay()">Close</a></div>');
    }

    if (method == "load"){
        $("#overlay-canvas-area .inner-canvas-area").load(content);
    }if(method == "append"){
        $("#overlay-canvas-area .inner-canvas-area").append(content);
    }

    var canvasAreaWidth = width+($("#overlay-canvas-area").width());
    var canvasAreaHeight = $("#overlay-canvas-area").height();

    $("#overlay-canvas-area").animate({
        top:((($(document).height())-(canvasAreaHeight))/2),
        left: ((($(document).width())-(canvasAreaWidth))/2) 
    },700);

}

I find myself modifying this constantly to fit my needs and then going back to old instances and modifying the function call. I would also like to pass json as settings with the function.

first question is, are classes what I’m looking for?
if so, where is a good place to learn?

if not, what should I do to improve functionality?

Answer 1

A class (or in javascript a “prototype” is actually the more correct term) is appropriate when there is a lasting object that contains some data and then you want to operate on that data with multiple different methods over time.

The class allows you to neatly specify how the data is stored and what methods operate on the data.

If you just have one operation that produces an output and can take in a variety of different input data, then you won’t really benefit from a class. You just need a function that takes a variety of parameters and chooses its operation based on what was passed to it.

In javascript when there are lots of options for a function and they may be variable, then it is sometimes common to pass in an options object that contains properties that direct the operation of the function. The function can then examine which properties are present and what values they have to select how it should behave. The use of the options object can allow much simpler maintenance any time you want to add or modify a parameter rather than continuing to add more and more function arguments. An options object like this can also be passed around more easily rather than passing every single argument individually. You can also create a default state for the options object that contains all the default values for the arguments (what their value should be if they aren’t passed). While all of this can be done with multiple traditional function arguments, it can be a lot cleaner to code with an options object.

The use of an options object would look like this:

function doWhatever(mainData, options) {
    if (options.foo) {
        // do it one way
    } else {
        // do it the other way
    }
}

doWhatever(myData, {foo: true, output: "commas", fee: "whatever"};