Final:CLINコードから学んだ内容でコードを修正する

最も心に刻まれている3つの真理は:
真理1:「いい名前をつけるには時間がかかりますが、いい名前を使うと節約する時間がずっとかかります.」
真理2:(関数)「関数は一つのことをしなければならない.そのことをしなければならない.そのことだけをしなければならない.」
真理3:(形式)「空行は新しい概念を始める視覚的手がかりである.」
想像以上に一つ一つの例を見つけるのが難しかったので、以前バニラJSの授業で行われていたランダムデジタルクイズゲームの挑戦課題を持ってきて、それぞれの真理を応用して修正することにしました.(これは、ユーザが数値の範囲を指定し、範囲内に数値を記入した場合に、コンピュータがランダムに発行された数値と一致することを保証するプログラムです.ユーザ入力値がコンピュータ値と一致する場合、ユーザに勝ったというメッセージを送信します.)
修正事項は以下の通りです.
修正1:print()関数名はより明確に変更され、関数の名前を表示するだけで関数の機能がわかります.例)printGuestedNumber()です.
修正2:print()関数は、1)ユーザ入力値のロード、2)コンピュータランダム値のロード、3)ゲームの勝敗の情報の印刷など、さまざまな機能を実行します.CLINコードによると,1つの関数で1つの機能しか実行できないため,各機能に3つの関数が分割されている.1) printGuessedNumber() 2) printRandomNumber() 3) printResult( )
修正3:コンセプトが変わったところに書くことで、読みやすさが向上します.
下記のように修正します.
🔖 Variables

const userGuessForm = document.querySelector("#user-guess-form");
const userGuess = document.querySelector("#user-guess-input");
const rangeSet = document.querySelector("#range-set-input");
const divHidden = document.querySelector("#print");
const printGuess = document.querySelector("#print-guess-input");
const printRange = document.querySelector("#print-range-input");
const result = document.querySelector("#result span");

const USERGUESS__KEY = "guess-key";
const HIDDENCLASS__NAME = "hidden";

😵 Before

function onGuessSubmit(event) {
  event.preventDefault();
  localStorage.setItem(USERGUESS__KEY, userGuess.value);
  print();
}

function print() {
  const typedUserGuess = localStorage.getItem(USERGUESS__KEY);
  printGuess.innerText = `You chose ${typedUserGuess}`;
  const randomNum = parseInt(Math.ceil(Math.random() * rangeSet.value));
  printRange.innerText = `, and the machine chose ${randomNum}`;
  divHidden.classList.remove(HIDDENCLASS__NAME);
  if (typedUserGuess == randomNum) {
    result.innerText = `Woohoo!🥳 You won!`;
  } else if (typedUserGuess !== randomNum) {
    result.innerText = `Boohoo!😩 You losing!`;
  }
}

userGuessForm.addEventListener("submit", onGuessSubmit);

😁 After

function onGuessSubmit(event) {
  event.preventDefault();
  localStorage.setItem(USERGUESS__KEY, userGuess.value);
  print();
};

function printGuessedNumber() {
  const typedUserGuess = localStorage.getItem(USERGUESS__KEY);
  printGuess.innerText = `You chose ${typedUserGuess}`;
};

function printRandomNumber () {
  const randomNum = parseInt(Math.ceil(Math.random() * rangeSet.value));
  printRange.innerText = `, and the machine chose ${randomNum}`;
};

function printResult () {
  divHidden.classList.remove(HIDDENCLASS__NAME);
  if (typedUserGuess == randomNum) {
    result.innerText = `Woohoo!🥳 You won!`;
  } else if (typedUserGuess !== randomNum) {
    result.innerText = `Boohoo!😩 You losing!`;
  }
};

userGuessForm.addEventListener("submit", onGuessSubmit);

👀 感じ:
修正するコードを見つけるのは思ったより難しいです.なぜかというと、その理由を思い出すと、「明確なコードがない」という事実が心に刻まれている.レッスン内容を聞いて何度か挑戦しましたが、基本的にはきれいになったニコ先生が書いたコードをいくつか修正しました.だから私のコードというより、ニコ先生のコードです).また、当時かなり満足していたコードも見直してみましたが、もちろん足りない点もたくさんありました.
結論:一度の授業で私のものになったと勘違いしないで、応用しながら本当のコードを書きましょう.いつもそれをカバーして私のになるでしょう