Geek Answers Handbook

Generic JavaScript file with various function call definitions

I have a file with a line size of 300 lines that installs jQuery event handlers and other necessary functions for a partial view, which is used by several views in an ASP.NET MVC application. Event handlers process 99% of everything, regardless of which view uses a partial. This question is about this 1% difference.

Since JavaScript has no interfaces, is it safe to define a function that will be called by one or more event handlers that handle different things in a separate file that is loaded depending on what kind is used? If not, what would be the best way to deal with this situation? In other languages, I would 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
}

Views will load the relevant scripts as such:

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

A "signature" (the term is used generously because javascript) mySpecificFunction()will be the same for each definition, but something in my gut tells me that this is bad practice. Is there a better / right way to do this or a design template for this purpose?

+4
2

, OOP , , ( , ).

, base View , view1.js, view2.js, :

$(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');
}

:

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

, , , js- . View, view1.js, view2.js .., .

- "", , :

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

, , , . script , .

, , css, , .

css:

$(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)
    });
});

, css, .

0

More articles:


All Articles