调用类型特定函数的有效方法

时间:2016-05-30 08:40:20

标签: javascript jquery html

这是我的情况:

我有一个Field.js文件,其中包含一堆类(由this plugin组成),每个类对应于页面上的数据类型。

班级的一个例子:

$.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;
        }
    };
});

(现在它是一个虚拟课)。

我还有一些html代码,以标准格式呈现类型UI。

最后,我有一个包含许多不同类型输入的页面,并且它们都需要调用它们的特定init函数才能正确呈现。

我到目前为止所做的只是在Field.js文件中调用EVERY初始化函数,如下所示:

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

    // And so forth

});

我真的很想知道是否有更有效的方法来调用文件中的每个init函数,而无需单独调用它们。

Field.js是主框架的一部分,它由第三方开发人员维护,因此,虽然我可以并且可以编辑它来休闲,但我更喜欢保留他们施加的通用结构

谢谢,

1 个答案:

答案 0 :(得分:0)

我认为您需要一些映射字段< - >功能。您可以使用字段init函数的名称将数据属性添加到字段中。然后你可以遍历你的字段,获取值并执行函数。

检查以下代码段:



// 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();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-function="myFunction" />
<input data-function="myOtherFunction" />
&#13;
&#13;
&#13;