Calling one function inside the other, through a string

Question

To facilitate the work of other programmers in the company whose default is no pattern, i created a Javascript library with some form field formatting and validation functions (date, phone, CPF, CNPJ, etc.).

At the end of the process, this library allowed me a very simple call:

<input type="[data|telefone|...]" name="" value="">

At the end of the page loading i Gero a Nodelist and assign the appropriate functions to each input in accordance with its type.

That code then went like this: Jsbin.com

The problem with the method used is that although only one of the functions is being executed for each input (as it should be), I’m setando ALL the functions for each object found in my Nodelist. That is, for each object I get a kilometric code, containing several functions that this object never will use.

In normal pages, where this feature is not widely used, the problem is totally inconspicuous. However, on pages where these functions are called numerous times, it is possible to notice a certain loss of performance after page loading.
And since the company’s system is to be used also on mobile devices, a small loss of performance may end up becoming a major problem.

To solve this, I thought of isolating each of the functions. Here’s my problem!
I have N functions (date, phone, Cpf, ...), within a global function (setEvents) and all I have to call these internal functions is their name in the form of string.

I’ve tried many ways, but failed to succeed.
The only way it’s worked so far is by using eval. But as the JS Bin: "Eval is evil."

Answer 1

Just a hint, you can put the functions inside an object, and call it by name:

<script>
  function a() {
    var nomeDaFuncao = [função a ser chamada];

    var fncObj = {
        b: function(objeto) {
         . . .
        }

        c: function(objeto) {
         . . .
        }
    }

    fncObj[nomeDaFuncao](objeto);
  }
</script>

But it would be much better if you explain the reason for this strange logic... because even the way I said it, it sounds kind of strange to have something like this... would it be that a switch would not solve?

Answer 2

Hello, try to do like this:

function a(){
    alert('olá a');
    var nomeFuncao = 'b';
    var b = function(){
        alert('olá b');
    };

    var c = function(){
        alert('olá c');
    };

    eval(nomeFuncao)();
}

JS Bin

You can also use this alternative without eval():

func_a = function(arg1) {
    alert('call a '+ arg1);
};
func_b = function() {
    alert('b');
};
func_c = function() {
    alert('c');
};

var n = "a";

 window["func_" + n]('arg1');

JS Fiddle

Another option using Jquery:

$.main = {
    a : function(arg){
        alert('function a - arg: '+arg);
    },
    b : function(){
        alert('b');
    },
    c : function(){
        alert('c');
    },
    call : function(func,arg){
        $.main[func](arg);
    }
};
$.main.call('a','param 1');
$.main.call('b');
$.main.call('c');

With Jquery

Answer 3

Can use a namespace for this. A multi-function object calling the function it needs and does not pollute the global space as in its original idea.

var validar = {

    date: function (value) {
        return [value, 'Função para data'];
    },
    text: function (value) {
        return [value, 'Função para texto'];
    },
    password: function (value) {
        return [value, 'Função para passwords'];
    }
}

And then you can wear it like this:

// "el" no exemplo é o elemento que quer analisar
var type = el.getAttribute("type");
var retornoFuncao = validar[type](el.value);

Example

I used the same code within each function but I imagine I wanted to adapt this part.

Answer 4

Try adding your functions explicitly to the object window as here:

window.dyna = function(param) {
    alert("dyna " + param);
}
window["dyna"]("oi");

Some browsers this is not even necessary and would work the way you did.

Edit 1

Testing here does not work in your example why functions b() and c() are not directly in the object window. Therefore they are not found in the scope of window

Since they are created in the scope of Function a(), and they will only exist within Function a(), and whether within a() you want to access b(), for example, you have to do something like this:

this["b"]();
// que é o mesmo que this.b();

Edit 2

To use the this, as I mentioned you have to do something similar to this, your problem is of scope, so you have to attach your function in an object that is accessible in the scope where you intend to call it, in case the this, as follows in the example code:

function a(nomeDaFuncao) {

  // anexa a function "b" ao objeto local this
  this.b  = function(param) {
      alert("b " + param);
  }

  // anexa a function "c" ao objeto local this
  this.c = function(param) {
      alert("c " + param);
  }

  // chama a function pelo nome no objeto local this
  this[nomeDaFuncao]("oi");
}

a(nomeDaFuncao);

Example here

To better understand how the scope of objects in the javascript, recommend that link that is very good and that of MDN.

Note: I don’t know what your real problem is to need such a solution, but depending on what it is, there may be simpler and cleaner ways to do it, but this solution will work for your current question.