玩转 point-free style JavaScript 的乐趣。

假设我正在编写视频游戏暗黑破坏神，我正在使用像这样但更深更复杂的复杂嵌套类型为敌人建模:

{ name: "badguy1", stats: { health: 10: strength: 42 }, pos: {x: 100, y: 101 } }

所以我有一个所有敌人的列表。我想对一定范围内的所有敌人造成伤害

function isInRange(radius, point) { return point.x^2 + point.y^2 >= radius^2; }
function fireDamage(health) { return health - 10; }    
var newEnemies = enemies.filter(isInRange).map(fireDamage);

这当然不会进行类型检查 - 我的组合器采用原语，所以我需要映射和过滤“下一个级别”。我不想掩盖过滤器/映射业务逻辑管道。 I know lenses can help me但是可以说我在浏览器中，因为这对于可变结构当然是微不足道的。我该怎么做？

最佳答案

您的问题是关于如何在 Javascript 中使用镜头？如果是这样，我也许可以提供帮助。你检查过Ramda.js library了吗？ ？这是编写函数式 JS 的绝佳方式。让我们从查看您的敌人模型开始:

/* -- data model -- */
let enemyModel = {
  name: "badguy1",
  stats: {
    health: 10,
    strength: 42
  },
  pos: {
    x: 100,
    y: 101
  }
};

镜头:为了构造镜头，您需要针对特定​​对象(在您的情况下为“敌人”)使用 getter 方法和 setter 方法。以下是您如何手动构建它们。

方法 1:创建您自己的 getter 和 setter

const getHealth = path(['stats', 'health']);
const setHealth = assocPath(['stats', 'health']);
const healthLens = lens(getHealth, setHealth);

方法 2:Ramda 的对象权宜之计

const healthLens = lensPath(['stats', 'health']);

创建镜头后，就可以使用它了。 Ramda 提供了 3 个使用镜头的函数:view(..)、set(..) 和 over(..)。

view(healthLens)(enemyModel); // 10
set(healthLens, 15)(enemyModel); // changes health from 10 to 15
over(healthLens, fireDamage)(enemyModel); // reduces enemyModel's health property by 10

由于您正在将 fireDamage(..) 函数应用于敌人的生命值，因此您需要使用 over(..)。此外，由于您的位置坐标嵌套在 enemyModel 中，因此您也需要使用镜头来访问它们。让我们创建一个并重构 isInRange(..) 。

作为引用，这里是 fn 的来源:

// NOTE: not sure if this works as you intended it to...

function isInRange(radius, point) {
  return point.x^2 + point.y^2 >= radius^2; // maybe try Math.pow(..)
}

这是一个函数式方法:

/* -- helper functions -- */
const square = x => x * x;
const gteRadSquared = radius => flip(gte)(square(radius));
let sumPointSquared = point => converge(
  add,
  [compose(square, prop('x')), 
   compose(square, prop('y'))]
)(point);
sumPointSquared = curry(sumPointSquared); // allows for "partial application" of fn arguments

/* -- refactored fn -- */
let isInRange = (radius, point) => compose(
  gteRadSquared(radius),
  sumPointSquared
)(point);
isInRange = curry(isInRange);

这是处理一组 enemyModel 时的样子:

/* -- lenses -- */
const xLens = lensPath(['pos', 'x']);
const yLens = lensPath(['pos', 'y']);
const ptLens = lens(prop('pos'), assoc('pos'));

// since idk where 'radius' is coming from I'll hard-code it
let radius = 12;

const filterInRange = rad => filter(
  over(ptLens, isInRange(rad))  // using 'ptLens' bc isInRange(..) takes 'radius' and a 'point'
);
const mapFireDamage = map(
  over(healthLens, fireDamage)  // using 'healthLens' bc fireDamage(..) takes 'health'
);

let newEnemies = compose(
  mapFireDamage,
  filterInRange(radius)
)(enemies);

我希望这有助于说明镜头的用途。虽然有很多辅助函数，但我认为最后一段代码是超语义化的!

最后，我只是用 Ramda 的这些函数充斥我的范围，以使这个示例更具可读性。我正在使用 ES6 解构来实现这一点。方法如下:

const {
  add,
  assocPath,
  compose,
  converge,
  curry,
  filter,
  flip,
  gte,
  lens,
  lensPath,
  map,
  over,
  set,
  path,
  prop,
  view
} = R;

// code goes below...

在 jsBin 中试试吧!他们提供 Ramda 支持。

关于javascript - 这是javascript中功能镜头的一个地方吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18604944/