Question

我希望能够运行在我的变量“Table”中声明的函数。原因是避免基于字符串的解析来运行函数...

        var Table = function( params ){  
            var rowTemplate = params.rowTemplate;
            var table = params.table;

            function GetRow()
            {
                return $( rowTemplate ).html();
            }

            function AddRow()
            {
                $( table ).append( GetRow() );
            }

            function BindEvents()
            {    
                for( a in params.bind )
                {
                    params.bind[ a ].action();
                }
            }

            function Construct()
            {
                BindEvents();
            }

            Construct();

            return {
                AddRow: function() { AddRow(); }
            }
        };

        var ProductsTable = new Table( {
            table: "#ProductsTable tbody",
            rowTemplate: "#ProductsTable_TemplateRow",
            bind: [ 
                { action: AddRow, element: "#productsAddRowButton" }
            ]  
        } );

你能看到我的ProductsTable通过一个名为“bind”的属性传递给我的Construct一个对象，该属性是一个动作数组和实例化它们的元素。

AddRow显然尚未声明。所以它抛出一个错误。我不想做的是传入一个字符串“AddRow”因为那时我将解析一个字符串...然后从表范围内运行该函数，这很难看。

对此有何解决方案？

这是我的解决方案，这要归功于“不能做不到”的回答，这让我顺着开关声明:( ... :)：

        var Table = function( params ){  
            var rowTemplate = params.rowTemplate;
            var table = params.table;

            function GetRow()
            {
                return $( rowTemplate ).html();
            }

            function AddRow()
            {
                $( table ).append( GetRow() );
            }

            function BindEvents()
            {    
                for( a in params.bind )
                {
                    switch( params.bind[ a ].action )
                    {
                        case "AddRow":     
                            $( params.bind[ a ].element ).click( function(){ 
                                AddRow(); 
                            } );
                        break;
                    }
                }
            }

            function Construct()
            {
                BindEvents();
            }

            Construct();

            return {
                AddRow: function() { AddRow(); }
            }
        };

        var ProductsTable = new Table( {
            table: "#ProductsTable tbody",
            rowTemplate: "#ProductsTable_TemplateRow",
            bind: [ 
                { action: "AddRow", element: "#productsAddRowButton" }
            ]  
        } );

Answer 1

我认为你不能把函数名称作为字符串传递，因为在创建对象之前实际函数不存在。

即使将它们作为字符串传递，也会因为范围界定而出现问题。所以这就是我的方式：

var Table = function( params ){  
    var rowTemplate = params.rowTemplate;
    var table = params.table;
    // add any additional functions to this object
    var functions = {
        AddRow: function() {
            $( table ).append( GetRow() );
        }
    };

    function GetRow()
    {
        return $( rowTemplate ).html();
    }

    function BindEvents()
    {    
        for(var a in params.bind )
        {
            var action = params.bind[a].action;
            if (functions.hasOwnProperty(action)) {
                functions[action]();
            }
        }
    }

    BindEvents();
};

var ProductsTable = new Table({
    table: "#ProductsTable tbody",
    rowTemplate: "#ProductsTable_TemplateRow",
    bind: [ 
        { action: "AddRow", element: "#productsAddRowButton" }
    ]  
});

将函数名称作为字符串传递在JavaScript中非常常用，所以我不会担心这样做。

示例 - http://jsfiddle.net/4uxAX/

Answer 2

这是一个黑暗的镜头，但我猜你的实际代码不会从构造函数同步调用bind动作。如果它们是例如绑定到事件，然后您可以简单地使用闭包来描述尚未创建的方法：

var ProductsTable = new Table({
    table: "#ProductsTable tbody",
    rowTemplate: "#ProductsTable_TemplateRow",
    bind: [ 
        { 
            action: function() {
                ProductsTable.AddRow();
            },
            element: "#productsAddRowButton"
        }
    ]  
});

通过参数调用在变量内声明的函数

2 个答案: