角。如何不重复相同的功能答案

【问题标题】：Angular. how not to repeat the same function角。如何不重复相同的功能
【发布时间】：2016-08-26 07:54:08
【问题描述】：

此函数有效，但如何避免为第二个变量键入相同的 for 循环并以某种方式只使用一个。尽量不要在这里重复 yuorself 方法。我需要使用数组吗？

JS：

var app=angular.module('xpCalc', []);
app.controller('xpCalculatorController', function($scope){
$scope.currentLevel=1;
$scope.currentXp=function(){
    var output=0;
    for (var thisLVL=1; thisLVL < $scope.currentLevel; thisLVL++) {
        output += ( Math.floor ( thisLVL + 300 * Math.pow( 2, thisLVL / 7 ) ) / 4 );
    }
    return output;
  };
  $scope.desiredLevel=1;
  $scope.desiredXp=function(){
    var output=0;
    for (var thisLVL=1; thisLVL < $scope.desiredLevel; thisLVL++) {
        output += ( Math.floor ( thisLVL + 300 * Math.pow( 2, thisLVL / 7 ) ) / 4 );
    }
    return output;
  };
});

HTML：

<h2>{{desiredXp()-currentXp()}}</h2>

【问题讨论】：

首先，在控制器或服务中计算desiredXp()-currentXp()。在 HTML 中发布结果后。此外，使用::bindOnce，例如<h2>{{::result}}</h2>。无论如何，在 HTML 中使用函数并不是一个好习惯，你在每个摘要周期都调用它
实现getXP(level)函数即可。

标签： javascript html angularjs function dry

【解决方案1】：

试试这个。

var app=angular.module('xpCalc', []);
app.controller('xpCalculatorController', function($scope){
$scope.currentLevel=1;
$scope.currentXp=InternalLoop($scope.currentLevel);
$scope.desiredLevel=1;
$scope.desiredXp=InternalLoop($scope.desiredLevel);

function InternalLoop(level){
    var output=0;
    for (var thisLVL=1; thisLVL < level; thisLVL++) {
        output += ( Math.floor ( thisLVL + 300 * Math.pow( 2, thisLVL / 7 ) ) / 4 );
    }
    return output;
  };

});

【讨论】：

您还应该为输入变量添加$watch。

【解决方案2】：

你可以试试这个：

var app=angular.module('xpCalc', []);
app.controller('xpCalculatorController', function($scope){
$scope.currentLevel=1;
var getResult = function(level)
{
   var output=0;
   for (var thisLVL=1; thisLVL < level; thisLVL++) {
     output += (Math.floor(thisLVL+300*Math.pow(2,thisLVL/7))/4);
   }
   return output;
}
$scope.currentXp=getResult($scope.currentLevel);
$scope.desiredLevel=1;
$scope.desiredXp=getResult($scope.desiredLevel);
});

【讨论】：

【解决方案3】：

任务：

xp = sum[floor(i + 300*2^(i/7)) / 4], i = 1..level
4*xp = sum[i] + sum[floor(300*2^(i/7))], i = 1..level
4*xp = level*(level+1)/2 + sum[floor(300*2^(i/7))], i = [1..level)

我们来到下一个函数：

function getXP(level) {
  var xp = level*(level+1)/2, i;
  var sum = 0;
  for (i = 1; i < level; i++)
    sum+=Math.floor(300 * Math.pow(2, i/7));
  return (xp + sum) / 4;
}

但是，getXP(5) - getXP(3) 将等于我们跳过前 3 个步骤

function getXP(to, from) {
  from = from || 1;
  var xp = 0, i;
  for (i = from; i < level; i++)
    sum += i + Math.floor(300 * Math.pow(2, i/7));
  return xp / 4;
}

所以，您现在可以像 {{getXP(desiredLevel, currentLevel)}} 一样使用它

每次摘要迭代都会调用此函数。这不好。

你至少有两种选择来处理它：

在您的控制器中计算结果并watch 关于重新计算它的参数。
记住你的函数

类似这样的：

var hash = {};
function mgetXP(to, from) {
  if (typeof hash[key(to, from)] != 'undefined') return hash[key(to, from)];
  return hash[key(to, from)] = getXP(to, from);
  function key(to, from) {return [to, from].join('_'); }
}

【讨论】：

【解决方案4】：

你也可以试试这个方法：

$scope.currentLevel=1;
$scope.currentXp = xp($scope.currentLevel);
$scope.desiredLevel=1;
$scope.desiredXp = xp($scope.desiredLevel);

function xp(level) {    
   function calc(index, result){
      if (index >= level) return result;
      result += (Math.floor( index + 300 * Math.pow( 2, index / 7 ) ) / 4);
      return calc(index + 1, result);
   }
   return calc(1, 0);    
}

【讨论】：