In order to make it easier for other programmers to default to , I have created a JavaScript library with some form field validation and formatting functions (date, telephone, 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 page load I generate a NodeList and assign the appropriate functions for each input
according to its type
.
This code then looks like this: JSBin.com
The problem with the method used is that although only one of the functions is being executed for every input
(as it should be), I'm setting ALL functions for each object found in my NodeList . That is, for each object I get a kilometer code, containing several functions that this object will never use.
On normal pages, where this feature is not widely used, the problem is completely imperceptible. However, on pages where these functions are called numerous times, you may notice some loss of performance after loading the page. And since the company's system is also to be used on mobile devices, a small loss of performance can end up becoming a major problem.
To solve this, I thought about 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 inner functions is their name in the form of string .
I've tried it in many ways, but I did not succeed.
The only way it worked so far was to use eval
. But as the JS Bin says: " eval is evil. "