Question

我正在做一个类似于excel的指令。由于Javascript不支持矩阵作为本机，我不得不做通常人们所做的解决方法。数组内的数组。

到目前为止一切正常，但我已经意识到，当我应用100x100的矩阵时，我确实遇到了很大的性能问题。使用一个小矩阵可以，但是对于大的矩阵，它会让我感到沮丧。

另一个重要的事情是，虽然这个指令没有完成加载，但如果有问题的指令没有完成，那么APP的其余部分就不会加载。

如何改善现有方法以获得更好的表现？和如何让APP以异步方式加载自身的每个部分？

从我的服务中我得到了：

this.getDataGrid = function(column, row){

    var matrix = new Array(column);

    for (var i = 0; i < column; i++) {
       matrix[i] = new Array(row);
    }

    for (var i = 0; i < matrix.length; i++){
       for (var j = 0; j < matrix[i].length; j++){
          matrix[i][j] = {value: '', checked: false};
       }
    }

    return matrix;

};

从我的指示：

link: function postLink(scope, element, attrs) {
  scope.dataGrid = info.getDataGrid(attrs.column, attrs.row);
}

从我看来：

<table border="1">

    <thead>
        ...
    </thead>

    <tbody>
        <tr ng-repeat="items in dataGrid track by $index">
            <td><strong>{{$index+1}}</strong></td>
            <td ng-repeat="item in items track by $index"><input type="text" ng-model="item.value"/></td>
        </tr>
    </tbody>

</table>

更新

我尝试了如 apairet 所述的快速重复，但到目前为止还没有工作。看起来quick-ng-repeat并不适用于嵌套数组。

    <tr quick-ng-repeat="item in dataGrid" quick-repeat-list="items">
        <td><strong>{{$index+1}}</strong></td>
        <td quick-ng-repeat="subItem in items" quick-repeat-list="subItems"><input type="text" ng-model="subItems.value"/></td>
    </tr>

更新

经过一些研究后，我开始研究延迟加载方法。我找到了一些带有RequireJS和Sript.js的项目，我认为这是我问题的解决方案，直到我意识到我遇到了困难。

延迟加载方法由路由工作，它以懒惰方式加载路由的相关文件。

然而，当你在路线的视图中有一个使一切变慢的指令时呢？那是我的理由。

所以，我必须做一些解决方法，如下所示：

指令

link: function postLink(scope, element, attrs) {

    var maxIntervalColumnLoad = 5;
    var maxIntervalRowLoad = 5;

    scope.gridLoadColumn = function(index){
        if (index <= maxIntervalColumnLoad) {
            return true;
        }else{
            return false;
        }
    }

    scope.gridLoadRow = function(index){
        if (index <= maxIntervalRowLoad) {
            return true;
        }else{
            return false;
        }
    }

    $interval(function(){
        maxIntervalColumnLoad = (maxIntervalColumnLoad + 5);
    }, 1500, (attrs.column/maxIntervalColumnLoad) );

    $interval(function(){
        maxIntervalRowLoad = (maxIntervalRowLoad + 5);
    }, 1500, (attrs.row/maxIntervalRowLoad) );

    scope.dataGrid = info.generateDataGrid(attrs.column, attrs.row);

  }

查看

<thead>
    ...
</thead>

<tbody>
    <tr ng-if="gridLoadRow($index)" ng-repeat="items in dataGrid track by $index">
        <td><strong>{{$index+1}}</strong></td>
        <td ng-if="gridLoadColumn($index)" ng-repeat="item in items track by $index"><input type="text" ng-model="item.value"/></td>
    </tr>
</tbody>

它解决了第一个加载页面的问题。

但是当我在输入中输入任何值时，我仍然会遇到性能问题。

<input type="text" ng-model="item.value" />

我猜测通过ng-model的关系似乎是问题，但我需要它来保持数据同步。

任何想法怎么可能实现？或者如何提高绩效？

指令类似的电子表格，性能不佳

0 个答案: