用例

我在页面上有一组控件,大约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,并且必须创建一个在blur事件上触发的指令,但是我想看看还有哪些其他想法可用。

最佳答案

您可以继续使用ngDisabled,而不是每次Angular运行摘要周期为每个窗口小部件调用一个函数,而是让它评估一个仅在指令的链接函数所规定的特定条件下才发生变化的简单值。

这是modified Fiddle。为此,您需要:

添加一个属性受限指令,该指令用以下行为来装饰元素:


在父控制器中注册观察者
在元素上绑定侦听器,该元素在触发时会调用检查所有表达式的函数


...

directive('widgetWatcher', function($timeout){
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: true,
        link: function(scope, elm, attr) {

            // register observer for this directive by passing its scope
            scope.addExpressionObserver(scope);

            // Check expressions at most once every 1s or immediately when input is blurred
            var debounce;
            elm.bind('input', function() {
                $timeout.cancel(debounce);
                debounce = $timeout( function() {
                    scope.$apply(function() {
                        scope.checkExpressions();
                    });
                }, 1000);
            });
            elm.bind('blur', function() {
                scope.$apply(function() {
                    scope.checkExpressions();
                });
            });

        }
    }
})


将数组与以下内容一起添加到父控制器:


向数组添加观察者的函数(每个指令的范围)
另一个要遍历集合,评估每个表达式并为每个小部件设置isDisabled范围变量的方法……这是由发生输入或模糊的指令调用的


...

$scope.expressionObservers = [];

$scope.addExpressionObservers = function(dScope) {
    $scope.expressionObservers.push(dScope);
};

$scope.checkExpressions = function() {
    angular.forEach($scope.expressionWatchers, function(val){
        val.isDisabled = $scope.is(val.widget.expression);
    });
};


不知道这是否可以解决您的所有问题,或者在Angular中没有更好的方法来执行此操作,但是希望它至少为您提供了另一种考虑的方法(这就是您所要求的)。

关于javascript - 减少AngularJS中禁用ng的事件触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23394347/

10-12 12:52
查看更多