How to automatically handle javascript function call and wrap/decorate it

Question

Hello I have problem with existing javascript code.

The background is that some of JSP Tags automatically include JS function, and then some of html elements need to run this functions. But the point is that there a lot of html elements that need to use included JS function, and there will be very hard to modify each separate element to configure which function it should run.

Lets consider simple example: we have JSP Tag that generate table

<table id="automaticallyGeretatedId">
<tr>
<td></td>
</tr>
</table>

and this include some JS function

function removeItemFromTable(){
    //modify automaticallyGeretatedId
}
function addItemToTable(){
    //modify table, add values and so on..
}

then we have some html external buttons or/and div-s that have method with constant name "clearData" but the JS is a part of HTML page sometimes in this way (embedded in Html)

<script>
function clearData(){/*some code*/}
</script>

and sometimes in included file as

function clearData(){ //some code
}

So my question is: is other way than modify each simple clearData in code, to ensure that each time when clearData function will be run, the function removeItemFromTable() will be also run?

I mean can I search for clearData function and append after it call to removeItemFromTable function? And where should be this operation done, what is the best way to do this?

Lets suppose that each time when clearData() function appear the function removeItemFromTable() also will be included.

Why not register your various handlers somewhere and call them from one place, like `clearData` in this case? Eventing might also be appropriate unless you have a lot of strictly-sequential operations. — Dave Newton, Aug 26 '14 at 10:31
@Dave Newton can You give me more detail about Your way of thinking? — Mazeryt, Aug 27 '14 at 18:31
Nutshell: Instead of just defining `removeItemFromTable`, define it, and add it to a list of functions `clearData` will run. — Dave Newton, Aug 27 '14 at 18:36

score 1 · Accepted Answer · edited May 23 '17 at 12:23

Finally I decided to use described at this link technique:

Adding code to a javascript function programmatically

I set up at document ready to search function clearData()

$( document ).ready(function() {
    decorateClearData();
});

and code in function decorateClearData();

function decorateClearData() {
    clearData = (function() {
    var cached_function = someFunction;

    return function() {
        cached_function.apply(this, arguments); // use .apply() to call it

        // and my new code:
        removeItemFromTable();
    };
}());
}

This works because clearData is global function, and maybe this is not pragmatic way but I didn't have other ideas.

i think most ppl would go for o more "event driven" solution, but this is a good info to know. thx 4 sharing — rafaelcastrocouto, Sep 08 '14 at 11:14

How to automatically handle javascript function call and wrap/decorate it

1 Answers1