Javascript 使用过滤器时提高角度性能

我有一堆角度过滤器，我用它们来整理我的数据，然而，我的应用程序似乎加载得很慢。我想知道是否有更好的方法来构造代码以提高性能

js

var myApplication = angular.module('myApp', ['ngColorThis']);

myApplication.controller("Catalog", function ($scope) {

$scope.books = books;

$scope.showInfo = false;

})

.filter('mydate', function() {
return function(input) {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0, so always add + 1
var yyyy = today.getFullYear();
if (dd < 10) {
  dd = '0' + dd
}
if (mm < 10) {
  mm = '0' + mm
}
today = mm + '/' + dd;
return (input == today)
}
})

.filter('past', function() {
return function(input) {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0, so always add + 1
var yyyy = today.getFullYear();
if (dd < 10) {
  dd = '0' + dd
}
if (mm < 10) {
  mm = '0' + mm
}
today = mm + '/' + dd;
return (input)
}
})

.filter('January', function() {
return function(input) {
return input.slice(0,2) === '01';
}
})

.filter('February', function() {
return function(input) {
return input.slice(0,2) === '02';
}
})

.filter('March', function() {
return function(input) {
return input.slice(0,2) === '03';
}
})

.filter('April', function() {
return function(input) {
return input.slice(0,2) === '04';
}
}) 

.filter('May', function() {
return function(input) {
return input.slice(0,2) === '05';
}
})

.filter('June', function() {
return function(input) {
return input.slice(0,2) === '06';
}
})

.filter('July', function() {
return function(input) {
return input.slice(0,2) === '07';
}
})

.filter('August', function() {
return function(input) {
return input.slice(0,2) === '08';
}
})

.filter('September', function() {
return function(input) {
return input.slice(0,2) === '09';
}
})

.filter('October', function() {
return function(input) {
return input.slice(0,2) === '10';
}
})

.filter('November', function() {
return function(input) {
return input.slice(0,2) === '11';
}
})

.filter('December', function() {
return function(input) {
return input.slice(0,2) === '12';
}
});

var myApplication=angular.module（'myApp'，['ngColorThis']）；
控制器（“目录”，函数（$scope）{
$scope.books=书籍；
$scope.showInfo=false；
})
.filter（'mydate'，函数（）{
返回函数（输入）{
var today=新日期（）；
var dd=today.getDate（）；
var mm=today.getMonth（）+1；//一月为0，因此始终添加+1
var yyyy=today.getFullYear（）；
如果（dd<10）{
dd='0'+dd
}
如果（毫米<10）{
毫米='0'+毫米
}
今天=毫米+'/'+dd；
返回（输入==今天）
}
})
.filter（'pass'，function（）{
返回函数（输入）{
var today=新日期（）；
var dd=today.getDate（）；
var mm=today.getMonth（）+1；//一月为0，因此始终添加+1
var yyyy=today.getFullYear（）；
如果（dd<10）{
dd='0'+dd
}
如果（毫米<10）{
毫米='0'+毫米
}
今天=毫米+'/'+dd；
返回（输入）
}
})
.filter（'一月'，函数（）{
返回函数（输入）{
返回输入。切片（0,2）='01'；
}
})
.filter（'二月'，函数（）{
返回函数（输入）{
返回输入。切片（0,2）='02'；
}
})
.filter（'March'，function（）{
返回函数（输入）{
返回输入。切片（0,2）='03'；
}
})
.filter（'April'，function（）{
返回函数（输入）{
返回输入。切片（0,2）='04'；
}
}) 
.filter（'May'，function（）{
返回函数（输入）{
返回输入。切片（0,2）='05'；
}
})
.filter（'June'，function（）{
返回函数（输入）{
返回输入。切片（0,2）='06'；
}
})
.filter（'July'，function（）{
返回函数（输入）{
返回输入。切片（0,2）='07'；
}
})
.filter（'August'，function（）{
返回函数（输入）{
返回输入。切片（0,2）='08'；
}
})
.filter（'九月'，函数（）{
返回函数（输入）{
返回输入。切片（0,2）='09'；
}
})
.filter（'10月'，函数（）{
返回函数（输入）{
返回输入。切片（0,2）='10'；
}
})
.filter（'11'，function（）{
返回函数（输入）{
返回输入。切片（0,2）='11'；
}
})
.filter（'December'，function（）{
返回函数（输入）{
返回输入。切片（0,2）='12'；
}
});

html

 <ul>
  <li class="pane1">
    <div class="bg" ng-repeat="book in books" >
       <div ng-show=" book.doc.date | mydate" >
          <div class="date">{{book.doc.date}}</div>
          <div class="title">{{book.doc.title}}</div>
          <div class="quote">{{book.doc.quote}}</div>
          <div class="attribution">-{{book.doc.attribution}}</div>
          <div class="textt">{{book.doc.text}}</div>
      <div style="height:10px"></div>      
       </div>
      </div>  
  </li>
  <li class="pane2">
      <div class="january" ng-click="showJan = !showJan">
        <div class="titletext">January</div>
      </div>
      <div class="bg"  ng-repeat="book in books ">
        <div ng-show="showJan">
          <div style="padding-top:10px; border-bottom:2px solid #ededed;" ng-click="showInfo = !showInfo" ng-show=" book.doc.date |January">
            <div id="circleJan"><div class="day">{{book.doc.day}}</div></div>
            <div class="title">{{book.doc.title}}</div>
            <div class="quote"  ng-show="showInfo">{{book.doc.quote}}       </div>
            <div class="attribution" ng-show="showInfo">-{{book.doc.attribution}}</div>
            <div class="textt" ng-show="showInfo">{{book.doc.text}}</div>    
            <div style="height:10px"></div>    
          </div>
        </div>
      </div>
      <div class="february" ng-click="showFeb = !showFeb">
        <div class="titletext">February</div>
      </div>
      <div class="bg" ng-repeat="book in books ">
        <div ng-show="showFeb">
          <div style="padding-top:10px; border-bottom:2px solid #ededed;" ng-click="showInfo = !showInfo" ng-show=" book.doc.date |February">
            <div id="circleFeb"><div class="day">{{book.doc.day}}</div></div>
            <div class="title">{{book.doc.title}}</div>
            <div class="quote"  ng-show="showInfo">{{book.doc.quote}}</div>
            <div class="attribution" ng-show="showInfo">-{{book.doc.attribution}}</div>
            <div class="textt" ng-show="showInfo">{{book.doc.text}}</div>    
            <div style="height:10px"></div>    
          </div>
        </div>
      </div>
      <div class="march" ng-click="showMarch = !showMarch">
        <div class="titletext">March</div>
      </div>
      <div class="bg" ng-repeat="book in books ">
        <div ng-show="showMarch">
          <div style="padding-top:10px; border-bottom:2px solid #ededed;" ng-click="showInfo = !showInfo" ng-show=" book.doc.date |March">
            <div id="circleMarch"><div class="day">{{book.doc.day}}</div></div>
            <div class="title">{{book.doc.title}}</div>
            <div class="quote"  ng-show="showInfo">{{book.doc.quote}}</div>
            <div class="attribution" ng-show="showInfo">-{{book.doc.attribution}}</div>
            <div class="textt" ng-show="showInfo">{{book.doc.text}}</div>    
            <div style="height:10px"></div>    
          </div>
        </div>
      </div>

{{book.doc.date}
{{book.doc.title}
{{book.doc.quote}
-{{book.doc.attribute}
{{book.doc.text}


一月
{{book.doc.day}
{{book.doc.title}
{{book.doc.quote}
-{{book.doc.attribute}
{{book.doc.text}
二月
{{book.doc.day}
{{book.doc.title}
{{book.doc.quote}
-{{book.doc.attribute}
{{book.doc.text}
前进
{{book.doc.day}
{{book.doc.title}
{{book.doc.quote}
-{{book.doc.attribute}
{{book.doc.text}

---

如果需要日期格式，可以使用已有的AngularJS过滤器。除了据我所知，你正试图把你的记录分成几个月。在这种情况下，在控制器中按月分组数据比使用过滤器更容易。因此，每个组将包含特定月份的记录，您可以在视图中列出这些数组，而不是为每个月创建筛选器。下面是一个脚本，用于使用库

下划线

和

时刻

$scope.booksPerMonth = _.group($scope.books, function(book){
 return moment(book.doc.date).month();
});
//$scope.booksPerMonth[0] contain books of January you can use ng-repeat to traverse months, then another ng-repeat to traverse books of the month.

---

如果使用“angularjs”1.3或更高版本，请尝试单绑定功能，以便在只读“ng repeat”上显著提高性能

读一下这个

将代码更改为在数组之前使用双冒号：

<div class="bg" ng-repeat="book in ::books ">

---

在性能最佳实践方面，您的代码有很多问题

始终使用

ng repeat

的

track by

部分。这是出现性能问题时要做的第一件事

避免在大列表中同时使用过滤器。创建另一个将保存筛选数组的属性

关闭调试信息（

$compileProvider.debugInfoEnabled（false）；

）

使用

ng if

而不是

ng show

和

ng hide

，因为它们实际上使用相应的绑定从DOM中删除节点

@JDTLH9已经提到了一次性绑定。在适当的时候使用它们

还有一些与角度无关的东西——总是试着为你正在解决的问题想出合适的数据结构。如果您有一个月份列表，并且您有需要在第一个数组中的值之间分布的书籍列表，那么您可以创建一个哈希映射（js中的简单对象），其中键为月份名称或代码，值为筛选数组。 这样，您就不会对阵列进行12次Travest。 请参阅@cubbuk answer，了解使用下划线/lodash进行此操作的简单方法

<> P>另一件你可能要考虑的例子是，一旦你从服务器获得了每个图书的月价值。通过这种方式，您可以使用一个带有简单过滤器的

ng repeat

：

 <div ng-repeat='book in books track by book.id | month: selectedMonth' >
 ...

...

和选项卡按钮仅更改

$scope的值。选择每月

更新：还有一个很酷的库，可以帮助您操作需要在内存中切分的大型数据阵列：

还有一个用于角度测量的模块：

但问题是，除非您的数组中实际上有数十万条记录，否则仅修复上面提到的问题不应该有任何问题。但是，如果您发现自己需要搜索