An intelligent way of calling a variable length number of JavaScript methods in a web page

Question

I have created a new web app that has 10 pages / forms and during the load of those pages 6 of the pages / forms call the same JavaScript methods and 4 call the same plus some additional methods. I can obviously call the the methods individually in the page but I'm wondering how I can do this in a more intelligent manner.

Currently all I'm doing is calling the methods at the bottom of the page like:

<script>
 somemethod1(someparam1);
somemethod2(someparam1, someparam2);
somemethod3();
somemethod4();
somemethod5(someparam1);
</script>

It would be nicer to call something like:

<script>
 Execute('somemethod1', 'somemethod2''somemethod3', 'somemethod4', 'somemethod5')();
</script>

Answer 1

I don't think its a good practice to do it. But sure, it'd be nicer to have Execute function like that if you don't need to pass any parameters.

You can do it like,

function test1() {
  console.log('test1');
}

function test2() {
  console.log('test2');
}

var Execute = function() {
  for (var i = 0; i < arguments.length; i++) {
    var funcName = arguments[i];

    if (typeof window[funcName] == 'function') {
      window[funcName]();
    }
  }
}

Execute('test1', 'test2')

However, as your question edited that you need to pass specific parameter/s to one or more of the functions, here's the intelligent way to do it.

test1(param1);
test2(param2, param1);

Answer 2

If you have uniform procedures and you need to call them in a certain order, like my example below for iteration nested arrays, then you could use the given proposal, which uses the following functions for the function before.

This might not work for other needs.

function Callback(array) {
    this.array = array;
}

Object.defineProperties(Callback.prototype, {
    start: {
        get: function () {
            return this.getCallback(0);
        }
    },
    getCallback: {
        value: function (i) {
            var that = this;
            return this.array[i].bind({ get next() { return that.getCallback(i + 1); } });
        }
    }
});

// example
function getSubmodel(model, submodel) {
    var callback = new Callback([
            function (a) { a.Categories.forEach(this.next); },
            function (a) { a.forEach(this.next); },
            function (a) { if (a.brandname === model) { a.models.forEach(this.next); } },
            function (a) { if (a.name === submodel) { a.submodel.forEach(this.next); } },
            function (a) { result.push(a.name); }
        ]),
        result = [];

    data.forEach(callback.start);
    return result;
}

var data = [{
        Storename: "Zig Zag Mobiles",
        Shopid: "asdef1234",
        Categories: [[{
            models: [{
                submodel: [{
                    price: null,
                    name: "Lumia 735 TS"
                }, {
                    price: "3200",
                    name: "Lumia 510"
                }], name: "Lumia"
            }],
            brandname: "Nokia",
        }]]
    }];

console.log(getSubmodel('Nokia', 'Lumia'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

it would be nicer to call something like Execute('somemethod1', 'somemethod2''somemethod3', 'somemethod4', 'somemethod5')();

Provided that you do not need to pass in argument(s) to the individual method you can do this:

[func1, func2, func3].map(function(func){
    func();
});

Otherwise the way to do it is to just call the methods with the required arguments as you are already doing now unless there is really significant benefits to be gained from creating an abstraction where you can pass in both the method to be called and its associated arguments.