CODEWITHSUNDEEP
javascriptjqueryoopdesign-patterns
JNYRanger
JNYRanger

Reputation: 7097

Shared JavaScript File with Different Definitions of a Function Call

I have a 300 line javascript file that sets up jQuery event handlers and other needed functions for a partial view that's used by multiple views within a ASP.NET MVC application. The event handlers handle 99% of everything identically regardless of which view is using the partial. This question is about that 1% difference.

Since JavaScript doesn't have interfaces is it safe to define a function to be called by one or more of the event handlers that processes the things that are different in a separate file that is loaded depending on which view is used? If not, what would be the best way to handle this situation? In other languages I'd use interfaces and/or abstract classes in this situation.

Example:

shared file

$(document).ready(function() {
    //shared variables here for methods
    $(document).on('click', '.selectable-table tbody tr', function() {
        //do shared actions
        mySpecificFunction();
        //finish shared actions (if necessary)
    });
});

Definition1.js

function mySpecificFunction() {
   //do stuff
}

Definition2.js

function mySpecificFunction() {
   //do other stuff
}

The views would load the appropriate scripts as such:

<script src="definitionX.js"></script>
<script src="sharedScript.js"></script>

The "signature" (term being used generously because javascript) of mySpecificFunction() would be the same for each definition, but something in my gut is telling me that this is bad practice. Is there a better/correct way to do this or a design pattern for this purpose?

Upvotes: 4

Views: 507

Answers (2)

Borys Serebrov
Borys Serebrov

Reputation: 16172

I think you can use OOP approach here and you don't need the abstract classes or interfaces for that, instead you can use objects (which are more flexible than in other languages).

For example, you can have a base View prototype with shared code and then load specific view1.js, view2.js where the base prototype will be extended with specific code:

$(document).ready(function() {
    // view is a view instance coming from the specific view.js
    view.init();
});

// sharedScript.js, view prototype
var View = {
    init: function() {
        $(document).on('click', '.selectable-table tbody tr', function() {
            // do shared actions
            // ...
            // do specific actions
            this.mySpecificFunction();
        });
    },
    mySpecificFunction: function() {
        //do specific things, can be left empty in the "prototype" object
        return;
    }
};

// view1.js
var view = Object.create(View);
view.mySpecificFunction = function() {
    alert('view 1');
}

// view2.js
var view = Object.create(View);
view.mySpecificFunction = function() {
    alert('view 2');
}

And the views would load shared and specific scripts:

<script src="sharedScript.js"></script>
<script src="view1.js"></script>

This is just a rough idea which can be improved, for example, you may want to concatenate and compress all your js code into the single file for production. In this case the global view variable coming from view1.js, view2.js, etc would become a problem.

An improvement can be some kind of "router" which will detect what view should be instantiated:

$(document).ready(function() {
    router.when('/', function() {
       view = HomePageView();
    }).when('/about', function() {
       view = AboutPageView();
    });
    view.init();
});

Upvotes: 1

Andrew
Andrew

Reputation: 809

The approach outlined above will work but it's not the best approach in terms of maintainability. Adding one file or another via a script tag to import the specific function doesn't necessarily make it clear to another developer that you have actually changed the behaviour of the event handlers in the shared code.

A simple alternative could be that within each view you would wrap the partial view within a containing element that has an identifying css class to differentiate between the behaviour required at that point.

Then assign event handlers individually for those different css classes:

$(document).ready(function() {
    //shared variables here for methods     

    $(document).on('click', 'div.type1 .selectable-table tbody tr', function() {
        //do shared actions
        mySharedActions();
        mySpecificFunction1();
        //finish shared actions (if necessary)
    });

    $(document).on('click', 'div.type2 .selectable-table tbody tr', function() {
        //do shared actions
        mySharedActions()
        mySpecificFunction2();
        //finish shared actions (if necessary)
    });
});

This would allow you to keep all your specific functions together in one place and makes the changing behaviour predicated by the css class explicit for future developers to see.

Upvotes: 0

Related Questions