代码之家 › 专栏 › 技术社区 › bigorangeduck

不确定这是怎么回事

javascript

bigorangeduck · 技术社区 · 2 年前

关于这段代码,我提出了一些问题。

这些代码行中到底发生了什么:

confirmPassword.oninput = function() {
  checkpassword(confirmPassword.value);
}

这项研究的目的是什么 (f) 在这行代码中:

checkpassword(f)

confirmPassword.oninput = function() {
  checkpassword(confirmPassword.value);
}

function checkpassword(f) {
  if (password.value !== f) {
    addWarning();
  }
  if (password.value === f) {
    confirmPasswordError.textContent = '';
  }
}

2 回复 | 直到 2 年前

Cesare Polonara 2 年前

这段代码没有遵循很好的编码实践,因为它使用的是不纯函数,变量命名也不是完全自我解释的。

这应该更好:

confirmPassword.oninput = function() {
  checkpassword(password.value, this.value);
}

function checkpassword(pwd, confirmPwd) {
  if (pwd !== confirmPwd) addWarning();
  else confirmPasswordError.textContent = '';
}

这应该是你的完整脚本:

const password = document.getElementById("password");
const confirmPassword = document.getElementById("confirm-password");

// Assuming your HTML code has:
// <input id="password" type="password" />
// <input id="confirm-password" type="password" />

// HTMLElement.onevent = function 
// is equivalent to :
// HTMLElement.addEventListener(event, function)
// in this case you are assigning a function to be executed when your 
// passwordConfirm element receives new inputs
// ( key strokes on input focus )

// At each key stroke the anonymus function you assigned to .oninput 
// is being called, checkPassword function is being called
// with two parameters, the first one is the value of the first input
// box, the original password string value, the second parameter is the 
// value of confirmPassword input box.
// Those two walues are being compared to be sure that both original and 
// confirmation passwords are the same.


confirmPassword.oninput = function() {
  checkpassword(password.value, this.value);
}

function checkpassword(pwd, confirmPwd) {
  if (pwd !== confirmPwd) addWarning();
  else confirmPasswordError.textContent = '';
}

0xENDER 2 年前

第一段代码用于将函数附加到 <input> 存储在 confirmPassword 要素(你可以阅读更多关于“oninput”活动的信息,对吗 here )

所以,当 <输入> 元素更改时,您附加的函数将被调用,而该函数反过来调用 checkpassword 作用该元素的值/内容被传递给 检查密码 作用

confirmPassword.oninput = function() {
              // You are attaching a function to an event listener!
              //
              // The "oninput" event is fired when your <input>
              // element's (the one stored in the "confirmPassword"
              // variable) value changes.
              //

        checkpassword(confirmPassword.value);
                   // ^^^ Pass the value of the input element
                   //     to the first variable/argument of the
                   //     function "checkpassword"
    }

至于什么 f 意味着在第二个代码块中,它用于存储在第一个代码块中传递给函数的值。

function checkpassword(f) {
                    // ^ The first function argument/variable
                    //   (It holds the value of your input
                    //   field in this case)

         ...

    }

旁注:看来你对JS很陌生。尝试使用一些免费网站来更好地理解这种语言。(我建议使用 sololearn 或 w3schools )