我可以进一步重构这个JavaScript代码吗？

Question

我正在进行一些JavaScript实践，并尝试编写一个简单的脚本，要求用户提供以下详细信息：

1. Username
2. Password
3. First Name
4. Last Name
5. Email
6. Job Title

然后，我将所有细节存储在一个对象中。我使用警告()来显示消息，使用提示符()来问问题。没有数据库集成，我只是在学习如何编写JavaScript。那么，我的问题是，代码有用吗？在学习的背景下，我还有什么可以做得更好或者优化的吗？

​

//Get user username
let username = prompt("Enter your username")
while (validateUsername(username) == false) {
    username = prompt("Enter your username")
}

//Validate username
function validateUsername(username) {
    if (username === null || username.length < 5 || username.length > 10 || username === "") {
        alert("Username must be from 5 to 10 characters. Try again!")
        return false
    } else {
        return true
    }
}

//Get user password
let userPassword = prompt("Enter your password")
let userPassConfirm = prompt("Confirm your passsword")
while (validatePassword(userPassword) == false) {
    userPassword = prompt("Password is invalid. Please try again!")
    userPassConfirm = prompt("Confirm your passsword")
}
while (userPassConfirm !== userPassword && userPassConfirm !== null) {
    userPassConfirm = prompt("Confirm password does not match, Try again.")
}

//Validate password
function validatePassword(userPassword) {
    if (userPassword == null || userPassword.length < 6 || userPassword.length > 20) {
        alert("Password must be from 6 to 20 characters. Try again!")
        return false
    } else {
        return true
    }
}

//Get user profile
let firstName = prompt("What's your First name?")
while (firstName === "") {
    alert("Your First name cannot be empty! Try again!")
    firstName = prompt("What's your First name?")
}

let lastName = prompt(`Hello ${firstName}, what's your Last name?`)
while (lastName == "") {
    alert("Your Last name cannot be empty! Try again!")
    lastName = prompt(`Hello ${firstName}, what's your Last name?`)
}

let userEmail = prompt(`Enter your email address, ${firstName}.`)
while (userEmail == "") {
    alert("Your email address cannot be empty! Try again!")
    userEmail = prompt(`Enter your email address, ${firstName}.`)
}

let userJobTitle = prompt("What is your job title?")
while (userJobTitle == "") {
    alert("Your job title cannot be empty! Try again!")
    userJobTitle = prompt("What is your job title?")
}

alert(`Great to finally meet you ${firstName} ${lastName}!`)

//Store user details in object
const userDetails = {username, userPassword, firstName, lastName, userEmail, userJobTitle}

//Display user details
alert(`Username: ${userDetails.username} \n First Name: ${userDetails.firstName} \n Last Name: ${userDetails.lastName} \n Email: ${userDetails.userEmail} \n Job Title: ${userDetails.userJobTitle}`)

console.log(`User Details: \n Username: ${userDetails.username} \n First Name: ${userDetails.firstName} \n Last Name: ${userDetails.lastName} \n Email: ${userDetails.userEmail} \n Job Title: ${userDetails.userJobTitle}`)

​

Answer 1

来自@Juan IWK3代码：

这个语句：if (username === null || username.length < 5 || username.length > 10)将发生故障，因为当其中一个条件返回true时，它将执行并忽略其余的条件。

Fix：if (username === null && username.length < 5 && username.length > 10)

返回语句：return getUsername(username);它将永远循环，不返回剩余的

修正:只需将整个块包装好，完成后再返回。

const getUsername = () => {
  while (true) { // see here
    username = prompt("Enter your username");
    if (username === null || username.length < 5 || username.length > 10) {
      alert("Username must be from 5 to 10 characters. Try again!");
    } else {
      return username; // and here
    }
  }
};

运行函数：getUsername();等，返回数据进入垃圾

Fix：username = getUsername();

Answer 2

功能更易读

//Get user username
let username;
let password;
let confirmPassword;
let firstName;
let lastName;
let jobTitle;
let email;

const getUsername = () => {
  username = prompt("Enter your username");
  if (username === null || username.length < 5 || username.length > 10) {
    alert("Username must be from 5 to 10 characters. Try again!");
    return getUsername(username);
  } else {
    return;
  }
};

getUsername();

const getPassword = () => {
  password = prompt("Enter your password");
  if (password == null || password.length < 6 || password.length > 20) {
    alert("Password must be from 6 to 20 characters. Try again!");
    return getPassword(password);
  } else {
    return getConfirmPassword();
  }
};

getConfirmPassword = () => {
  confirmPassword = prompt("Confirm your password");
  if (confirmPassword !== password) {
    alert("Password does not match. Try again!");
    return getPassword();
  } else {
    return true;
  }
};

getPassword();

//Get user profile
const getFirstName = () => {
  firstName = prompt("Enter your first name");
  if (firstName === null) {
    alert("Your First name cannot be empty! Try again!");
    return getFirstName(firstName);
  } else {
    return false;
  }
};

getFirstName();

const getLastName = () => {
  lastName = prompt(`What is your last name, ${firstName}?`);
  if (lastName === null) {
    alert("Your Last name cannot be empty! Try again!");
    return getLastName(lastName);
  } else {
    return false;
  }
};

getLastName();

const getUserEmail = () => {
  email = prompt(`What is your email, ${firstName}?`);
  if (email === null) {
    alert("Your Email cannot be empty! Try again!");
    return getUserEmail(email);
  } else {
    return false;
  }
};

getUserEmail();

const getUserJobTitle = () => {
  jobTitle = prompt(`What is your job title, ${firstName}?`);
  if (jobTitle === null) {
    alert("Your Job title cannot be empty! Try again!");
    return jobTitle(jobTitle);
  } else {
    return false;
  }
};

getUserJobTitle();

alert(`Great to finally meet you ${firstName} ${lastName}!`);

//Store user details in object
const userDetails = {
  username,
  password,
  firstName,
  lastName,
  email,
  jobTitle,
};

//Display user details
alert(
  `Username: ${userDetails.username}
First Name: ${userDetails.firstName}
Last Name: ${userDetails.lastName}
Email: ${userDetails.email}
Job Title: ${userDetails.jobTitle}`
);

console.log(
  `User Details:
  Username: ${userDetails.username}
  First Name: ${userDetails.firstName}
  Last Name: ${userDetails.lastName}
  Email: ${userDetails.email}
  Job Title: ${userDetails.jobTitle}`
);