只有当 prop === true 时，Bacon.js 才将属性与 .and() 结合起来

Question

我最近拿起了 Bacon.js，并用它做了一些 UI，我只在满足要求时启用“注册”按钮，其中之一是检查用户名是否有效。

// Returns true or string with invalid reason
var isUsernameValid = username
    .map(function(value) {
        if(value.length < 4) {
            return 'Must be 4 characters at least';
        }

        if(!config.patterns['username'].test(value)) {
            return 'Can only have letters, numbers, periods, or underscores';
        }

        return true;
    });

它要么返回 true，要么返回用户名无效的原因。

稍后我将所有结果与此结合：

password.and(username).and(isUsernameValid)
    .not().assign($(view['signup-submit']), 'toggleClass', 'disabled');

用户名和密码只有在输入时才为真，但由于 isUsernameValid 总是返回 truthy 值，因此按钮最终会被错误地启用。

有没有更好的方法通过传递函数来返回错误或组合属性？

如果value === true，我想声明另一个流/属性返回，但我试图避免这种情况。

Answer 1

问题是因为您的真实值包括有效和无效的情况。该函数从不返回虚假值。将无效和有效分成真值和假值怎么样？

var isUsernameInvalid = username
  .map(function(value) {
    if(value.length < 4) {
      return 'Must be 4 characters at least';
    }

    if(!config.patterns['username'].test(value)) {
      return 'Can only have letters, numbers, periods, or underscores';
    }

    return false;
});

那么，对原代码没有太大改动

password.and(username).and(isUsernameInvalid.not())
  .not().assign($(view['signup-submit']), 'toggleClass', 'disabled');

Answer 2

我会这样做：

var isUsernameLongEnough = username.map(function(value) {
  return value.length >= 4
})
var usernameHasCorrectCharacters = username.map(function(value) {
  return config.patterns['username'].test(value)
})

var isUsernameValid = isUsernameLongEnough.and(usernameHasCorrectCharacters)

password.and(username).and(isUsernameValid)
    .not().assign($(view['signup-submit']), 'toggleClass', 'disabled')

isUsernameLongEnough.not().assign($(view['error-too-short']), 'toggle')
usernameHasCorrectCharacters.not().assign($(view['error-invalid-characters']), 'toggle')

最好将每个函数保持小并分离关注点。