解决方案：

Question

我有一个JavaScript代码，我需要通过名称调用方法。方法名称在运行时生成。

我使用以下代码提取方法名称并使用JavaScript方法eval（）调用该方法：

/*
 * helper method to call a model getter/setter method by name. The method
 * expects theh funtion name including the parameters
 * 
 * e.g. setValue('abc');
 * 
 * Optional additional params can be set which will be added to the function
 * call
 */
_executeFunctionByName = function(functionCall, context, params) {
    var paramPos,methodName,args,fnparams,fn;

    paramPos = functionCall.indexOf('(');
    methodName = functionCall.substring(0, paramPos);
    args = functionCall.substring(paramPos + 1).trim();
    args = args.substring(0, args.indexOf(')')).trim();
    // first split the params...
    fnparams = args.split(",");
    if (params) {
        fnparams.push(params);
    }
    // clean param value ....
    $.each(fnparams, function(index, _obj) {
        // string literal ?
        if (_obj.indexOf("'") === 0 || _obj.indexOf('"') === 0) {
            fnparams[index] = _obj.substring(1, _obj.length - 1);
        } else {
            // param is treated as string literal           
        }
    });

    // find object
    fn = context[methodName];
    // is valid function?
    if (typeof fn === "function") {
        return fn.apply(context, fnparams);
    }
}

这里可以避免eval（）调用吗？

解决方案：

最后，我找到了以下解决方案来解决我的问题。该方法接受参数，仅用于需要由调用者提供的特定上下文：

<table class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Type Object</th>
            <th style="width: 100px;text-align: left">
                <a class="btn btn-primary btn-sm">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </th>
        </tr>
    </thead>
    <tbody ng-repeat="object in objects track by object.Id">
        <tr>
            <td ng-bind="object.Name"></td>
            <td>
                <a class="btn btn-default btn-xs" ng-click="object.showPhoto = !object.showPhoto; $event.stopPropagation();"><i class="glyphicon glyphicon-camera"></i></a>
                <a class="btn btn-default btn-xs" ui-sref="objects.view({regionId:region.Id, objectId:object.Id})" ng-click="$event.stopPropagation();"><i class="glyphicon glyphicon-info-sign"></i></a>
                <a class="btn btn-default btn-xs" ng-click="zoomObject(object); $event.stopPropagation();"><i class="glyphicon glyphicon-screenshot"></i></a>
                <a class="btn btn-default btn-xs" ng-click="object.showReview = object.showReview;"><i class="glyphicon glyphicon-list-alt"></i></a>
            </td>
        </tr>
        <tr ng-if="object.showPhoto">
            <td colspan="2"><img ng-src="{{getPhotoUrl(object)}}" style="max-width: 100%;" alt="Image Object" /></td>
        </tr>
        <tr ng-if="object.showReview">
            <td colspan="2">nnn!!!</td>
            <list-of-insp></list-of-insp>
        </tr>
    </tbody>
</table>

Answer 1

你绝对不需要eval()：

    if ($.isFunction(model[methodName])) {
        modelValue = model[modelField]();
    }

[ ]运算符通过包含表达式的值访问属性。 ()运算符（如果可以调用它）会使检索到的值作为函数调用（如果它是函数）。

如何避免名称方法调用的JavaScript eval（）？

解决方案：

1 个答案: