Question

我正在使用Firebase / AngularFire构建一个Ionic App。我面临着一个棘手的问题：我希望我的ng-repeat能够更好地进行性能优化。我听说最好的方法就是无限滚动。我使用AngularFire在服务/工厂中获取所有数据 - 更具体地说，$ firebaseArray。

我google并找到了这个：http://firebase.github.io/firebase-util/#/toolbox/Paginate/example/ionic

问题1：使用Firebase util库的无限滚动是无限滚动服务器端无限滚动还是客户端？这个库是否解决了ng-repeat的性能问题，如下所述：（http://www.alexkras.com/11-tips-to-improve-angularjs-performance/）

问题2：我的firebaseArray实际上需要orderBy一个动态计算变量的名为distance。我是否仍可以在安全规则中使用.indexOn规则来提高查询性能？（声音不可能，因为距离最初没有存放在火场中）

这是我的代码：我的工厂：taskService.js

    var ref = new Firebase(FirebaseUrl);
    var tasks = $firebaseArray(ref.child('tasks'));
    var Task = {
        all: tasks,
        getAllTasks: function() {
            if (tasks.length == 0) {
                tasks = $firebaseArray(ref.child('tasks'));
            } else {   
                tasks = tasks;
            }
            return tasks;
        },
     }

我的ng-repeat视图控制器：

    $scope.tasks = taskService.getAllTasks();
    $scope.tasks.$loaded().then(function(data){
            calculateDistance($scope.tasks, $scope.userCurrentLocation);  
    });
    var unwatch = $scope.tasks.$watch(function(event) {
          calculateDistance($scope.tasks, $scope.userCurrentLocation);
        });
    $scope.$on('$ionicView.leave', function(){
          // Anything you can think of
          unwatch();
        });
    }
    //--------------GeoLocation Calculation
    var calculateDistance = function (tasks, userCurrentLocationData) {
        for (var id in tasks) {
            var task = tasks[id];
            if (task.addressLat) {
                var taskLocation = new google.maps.LatLng(task.addressLat, task.addressLng);
                var userCurrentLocation = new google.maps.LatLng(userCurrentLocationData.lat, userCurrentLocationData.lng);
                var distance = google.maps.geometry.spherical.computeDistanceBetween(userCurrentLocation, taskLocation);
                $scope.tasks[id].distance = parseInt(distance*0.000621371192);
            }
        }
    }

我的观点：

<a class="item item-avatar" ng-repeat="task in tasks | filter: searchTask | orderBy: ['-status', 'distance', '-datetime'] track by task.$id" ng-href="#/app/task/{{task.$id}}">
....
</a>

如您所见，我在获取firebaseArray对象后添加了distance属性。并且该距离是基于用户当前设备位置动态计算的。因此ng-repeat将显示最接近用户当前位置的项目。由于距离是动态的，我无法将其保存在我的Firebase之前，因此firebase规则不会起作用。

问题3：如何在动态值上使用Firebase.util无限滚动 - 就像在这里一样，＆＃34;距离＆＃34;属性？

当我看到firebase util的文档时，我需要这样做：

   // create a scrollable reference
  var scrollRef = new Firebase.util.Scroll(baseRef, 'distance');

但是baseRef中没有距离。它在firebaseArray加载后生成。那我该怎么做呢？

另外，从结构的角度来看，我会将scrollRef和firebaseArray放在我的工厂中 - taskService.js

//创建一个可滚动的引用 var scrollRef = new Firebase.util.Scroll（baseRef，＆＃39; distance＆＃39;）;

//在范围上创建一个同步数组 return $ firebaseArray（scrollRef）;

然后，由于工厂只返回$ firebaseArray（scrollRef），如何访问文档中所述的scroll.next函数，如scrollRef.scroll.next（3）;在我的控制器？由于我没有scrollRef对象，只有FirebaseArray ......

Answer 1

Re Q1： firebase-util的Scroll通过更新查询参数并在滚动时同步服务器的更改来实现滚动。服务器通过缓存和预取来参与，以便快速进行滚动更新。

ng-repeat性能问题似乎是ng-repeat不能处理非常多的元素。使用Scroll可以通过限制重复元素的数量来解决这个问题。

Re Q2：索引用户与要显示的元素之间的大圆距离是不可能的。更好的方法可能是使用geohashing。 geofire库直接为firebase实现此功能，可以轻松查找用户附近的内容。

Re Q3： GeoFire本身提供了一种限制结果的方法（通过限制半径），因此您可能甚至不必解决此问题。如果您想限制为固定数量的元素，您需要自己对地理位置查询的结果进行后处理。

AngularFire服务器端无限滚动，带有距离计算顺序。

1 个答案: