Question

此代码的目的是在每次输入更改时对文档就绪和随后的验证执行一次验证。＆＃39;做某事＆＃39;行将用于根据标志状态更新页面上的样式。

在下面的代码中，标志变量设置两次，一次立即检查输入值是否等于＆＃39; dog＆＃39;，并在输入更改后再次执行相同的比较。我将如何重写这一点，以便＆＃39; $ firstInput.val（）==＆＃34; dog＆＃34;＆＃39;只写一次？

var flag = $firstInput.val() == "dog";

//do something with flag var here

$firstInput.on('input', function () {
    flag = $firstInput.val() == "dog";
    //do something with flag var here
})

Answer 1

var flag = null;

function updateFlag(){
   flag = $firstInput.val() == "dog";
}

updateFlag();


//do something with flag var here

$firstInput.on('input', function () {
   updateFlag();
   //do something with flag var here
})

Answer 2

所以这就是我从你那里拿走的东西：

一个。您必须先检查值湾您必须添加输入事件侦听器以供将来检查 - ＆GT;基本上你已经写两次就是你所说的，对吗？

<强> Sol'n：

将$firstInput.val() == "dog";重构为函数（因为DRY）：
function isDog() { return $firstInput.val() == "dog"; }喜欢这样：

。

function isDog() { return $firstInput.val() == "dog"; }
var flag = isDog();

//do something with flag var here

$firstInput.on('input', function () {
    flag = isDog();
    //do something with flag var here
})

现在......还，假设 //do something with flag var here是 SAME 代码块，您甚至可以进一步简化所有：

var flag = false;
function checkIsDog() { flag = $firstInput.val() == "dog"; }

checkIsDog();
$firstInput.on('input', checkIsDog);

希望这有帮助！

Answer 3

在DRY和使用你已经使用的jQuery方面 - 你可以为jQuery创建两个迷你插件，这样你就可以在任何你想要的地方重用那个逻辑。一个插件接受一个expectation方法，您可以在其中定义您希望发生的事情 - 您可以通过jQuery方式在链接的多个元素上应用它 - 另一个评估期望值。您还可以通过访问expectation

重新使用这些插件外的$(this).data('expectation')

$.fn.expect = function(expectation) {
  return this.each(function() {
    $(this).data('expectation', expectation);
  });
}
$.fn.isExpected = function() {
  return $(this).data('expectation').call(this);
}

// Thanks to chaining, .expect() will return the same element(s) again as matched
// previously with $(selector) - only that it adds an expectation to it/them
var $firstInput = $('#inp').expect(function() {
  return $(this).val() == 'dog';
});

console.log($firstInput.isExpected());

$firstInput.on('input', function () {
    console.log($firstInput.isExpected());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="text" value="cat" id="inp">

编辑：进一步了解

如果我们在ES6中写这个，我们可以向HTMLInputElement添加2个新属性 - 其中.expect可以进行函数赋值，.isExpected充当属性（没有parantheses for函数调用，因为它有一个getter）：

Object.defineProperty(HTMLInputElement.prototype, 'expect', {
  configurable: true,
  enumerable: false,
  writable: true,
  value: function() {
    throw("This input element has no expectation");
  }
});

Object.defineProperty(HTMLInputElement.prototype, 'isExpected', {
  configurable: false,
  enumerable: false,
  get: function() {
    return this.expect.call(this);
  }
});

let inp = document.querySelector('#inp');

// No expectation assigned yet
try { inp.isExpected } catch(e) { console.error(e) }

inp.expect = function() {
  return this.value === 'dog';
}

// Expectation assigned
console.log(inp.isExpected);

inp.addEventListener('input', function(e) {
  console.log(this.isExpected);
});

<input type="text" value="cat" id="inp">

每次引用变量时如何执行布尔比较

3 个答案: