用例

我在一个页面上有一组控件，大约60多个。每个控件计算一个字符串表达式，以根据在窗体本身中输入的数据来决定是否禁用该控件。表达式是由最终用户创建的，因此它可以是任何内容。

我遇到的问题是表单和评估相当复杂，并且会降低UI的速度。最终的代码将具有表达式，这些表达式需要查找作用域对象中的数据，并将包含循环等。

演示

这是一个jsfiddle，用来模拟我试图改进的内容。这不是最终的代码，因为该模块相当大。然而，这应该能说明我正在努力实现(或减少(什么。这个演示很快，因为表达式相当简单，但我希望能够减少调用函数is的次数。

[edit]我已经更新了演示，为最终的生产代码尽可能多地包含核心逻辑。这与将要实现的目标非常接近。

模板

<div ng-app ng-controller="ctrl">
    <div ng-repeat="widget in widgets">
        <label>Widget #{{$index}}
            <input type="text" ng-model="widget.value" 
                   ng-disabled="is(widget.expression)" />
        </label>
    </div>
</div>

控制器

var ctrl = function ($scope) {
    $scope.widgets = [];
    /** Core Logic Below Here **/
    var getValueByName = function (name) {
        for (i = 0, k = $scope.widgets.length; i < k; i++) {
            if ($scope.widgets[i].name == name) {
                return $scope.widgets[i].value;
            }
        }
        return 0;
    };
    var replaceNameWithValue = function () {
        var result = this.replace(/( |^)(widget_'d+?)( |$)/g, function ($0, $1, $2, $3) {
            return parseInt(getValueByName($2), 10);
        });
        return result;
    };
    $scope.is = function (expression) {
        console.log('firing');
        try {
            var exp = replaceNameWithValue.call(expression);
            return $scope.$eval(exp);
        } catch (e) {}
        return false;
    };
    /** Logic to generate random test cases **/
    var numWidgets = 60;
    var operators = ['+', '-', '*'];
    var comparators = ['===', '!==', '>', '<', '>=', '<='];
    var getRandomInt = function (max) {
        return Math.floor(Math.random() * max);
    };
    var makeExpression = function () {
        var a = getRandomInt(numWidgets);
        var b = getRandomInt(numWidgets);
        var c = getRandomInt(20);
        var op = operators[getRandomInt(operators.length)];
        var cf = comparators[getRandomInt(comparators.length)];
        return {
            expression: ['widget_' + a, op, 'widget_' + b, cf, c].join(' ')
        };
    };
    var makeRandomObject = function (index) {
        var obj = makeExpression();
        obj.name = "widget_" + index;
        obj.value = 0;
        return obj;
    };
    var preLoad = function (numWidgets) {
        for (i = 0; i < numWidgets; i++) {
            $scope.widgets.push(makeRandomObject(i));
        }
    };
    preLoad(numWidgets);
};

问题

如何提高这些评估的绩效？

解决方案

我注意到评估是在keyUp事件上执行的。我怀疑我不能使用本机ng-disabled，必须创建一个在模糊事件上启动的指令，但我想看看还有什么其他想法。