An efficient way to call type specific functions

Question

this is my situation:

I have a Field.js file which contains a bunch of classes (made with this plugin) each corresponding to a datatype on the page.

An example of a class:

$.Class("Types_UserId_Js",{
    init_done : false,
    validate : function (value){
        return true;
    }
},{
    container : "",

UserIdDisplay : function (){
        var associations = [];
        var uid = 0;
        $( container ).find(".userid_display").each(function(index,el){
            uid = $( this ).find(".userid_value").val();
            url = siteurl + "/dname?";
            $.ajax({
                type: "POST",
                url: url,
                data: ajaxData,
                dataType: "json",
                success: function(result, status){
                    associations[uid] = result;
                }
            });
        });
    },

init : function ( container ) {
        if(container.length > 0 && !Types_UserId_Js.init_done){
            this.container = container;
            this.UserIdDisplay();
            Types_UserId_Js.init_done = true;
        }
    };
});

(It's a dummy class for now).

I also have some html code that renders the types UI, in a standard format.

In the end, I have a page with a bunch of different types of inputs, and they all need their specific init function to be called in order to render properly.

What I did up to now is simply invoke EVERY init function in the Field.js file, like so:

$( document ).ready(function(ev){
    var cont = $("#container");
    var uid  = new Types_UserId_Js(cont);
    var text = new Types_Text_Js(cont);

    // And so forth

});

I'd really like to know if there is a more efficient way to call every init function in the file without having to call them individually.

The Field.js is part of the main framework, and it is maintained by a third party developer so, while I can and do edit it to my leisure, I'd prefer to keep the generic structure that they imposed.

Thank you,

score 0 · Accepted Answer · answered May 30 '16 at 09:23

I think you'd need some mapping field <-> function. You can add data-attributes to the fields with the name of the fields init function. Then you can just loop over your fields, get the value and execute the function.

Check the following snippet:

// helper function borrowed from http://stackoverflow.com/a/12380392/4410144
var getFunctionFromString = function(string) {
    var scope = window;
    var scopeSplit = string.split('.');
    for (i = 0; i < scopeSplit.length - 1; i++) {
        scope = scope[scopeSplit[i]];
        if (scope == undefined) return;
    }

    return scope[scopeSplit[scopeSplit.length - 1]];
}

var myFunction = function() {
    console.log('myFunction');
}

var myOtherFunction = function() {
    console.log('myOtherFunction');
}

$('input').each(function() {
    var initFunction = getFunctionFromString($(this).data('function'));
    initFunction();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-function="myFunction" />
<input data-function="myOtherFunction" />

Hi Marc, would that work with the Class plugin? I think I'd just replace the call to initFunction() with a new initClass() but I don't know if it's possible — Guerriky, May 30 '16 at 09:55
Not sure about the details of your system. I guess you have to try. Good luck. :) — Marc Dix, May 30 '16 at 11:10
Hi Marc, i tried it, and it works just fine, you just need to replace the call to initFunction() with "new initFunction()". If the class is loaded, it will do its job :) Thank you — Guerriky, May 30 '16 at 12:14

An efficient way to call type specific functions

1 Answers1