ブートキャンププロジェクトの再構築とリファクタリング

私が出席したコーディングブートキャンプを卒業してから、私は、Bootcampのための等級TAとして働き始めました.私は現在、初心者コースの等級です.このコースでは、JavaScriptの基本を学ぶ:コンディショナルズ、ループ、関数、オブジェクト、DOM、ローカルストレージ.私が7ヶ月前に自分で作ったプロジェクトを振り返って、彼らがどれほど辛いことを思い出したか(TBTは入れ子になったループの上で泣いている).
実際には、私の古いコードを見ずに、どんなスターターコードも見ないで、これらのプロジェクトを再構築するように私を奮起させました.ちょうど私、私の脳、および必要に応じて迅速なGoogle検索.
あなたがBootcamp卒業生であるならば、私は非常にこれをためすことを勧めます!それは正直とても楽しいです.それは時間内に戻るようなものですが、あなたがしていただろうスキルや能力を持っている.あなたは夕方に一週間あなたを取ったプロジェクトを構築することができますし、あなたのコードをクリーンで読みやすくするために機能性とベストプラクティスを組み込むことができます.
Bootcampを行っている誰にとっても、我々は、彼らがどれくらい速く動くかについてわかっています.私は個人的には私のコードをリファクションするための時間を持っていなかったので、私は10時にMVPに到達しました.私のプロジェクトは、私の脳がフライドされたか、(b)私はまだ朝早く授業の前に行う宿題を持っていました.

モンスター機能
これは私が'モンスター機能'として参照するつもりだと私を残しました.モンスター機能は、通常、ロジックの3 +層を保持するコードの15 +行です.彼らはテストするのは難しいし、デバッグする必要があるよりも難しい.あなたのスクリプトは、ロジックのすべての層のために関数の中でクラッシュしている場所を正確に伝えることはできません.
昨晩、私は、サケクッキーと呼ばれる私のブートキャンプから一種の適切な通過計画に取り組んでいました.スコープは、所有者がテーブル(see old repo)を介してすべての彼の店のクッキーの販売を追跡する助けている.簡単にお願いしますが、WOWはコードを学ぶ方法の3週目に私たちのすべてをスローしました.以下のイメージは基本的に最後のゴールです.

昨晩、私は楽しみのためにこのプロジェクトを再建しています.彼らが私たちが組み込まれていた最終的な機能は、テーブルに新しい店を追加することができますフォームだった.私は仕事にそれを得る🧟‍♀️. それはコードの30行であり、あまりにも多くしている.それを通して読む必要はありません、ちょうどこのTASC機能の栄光を浴びてください.

function makeStore(event){
  event.preventDefault();
  let storeName = event.target.storeName.value;
  for(let j = 0; j < stores.length; j++){ // Check to make sure store isn't already on table
    if (stores[j].name.toLowerCase() === storeName.toLowerCase()){
      alert("This stores metrics have already been calculated");
      return;
    }
  }
  let minCustomers = event.target.minCustomers.value;
  let maxCustomers = event.target.maxCustomers.value;
  let cookiesPerHr = event.target.cookiesPerHr.value;
  let newStore = new Store(storeName, minCustomers, maxCustomers, cookiesPerHr);
  stores.push(newStore);
  let newStoreColumn = document.createElement('tr');
  parentBody.append(newStoreColumn);
  let newStoreColumnTitle = document.createElement('td');
  newStoreColumnTitle.textContent = newStore.name;
  newStoreColumn.append(newStoreColumnTitle);
  let total = 0; 
  for(let i = 0; i < newStore.hourlySales.length; i++){
    let newCookieData = document.createElement('td');
    newCookieData.textContent = newStore.hourlySales[i];
    newStoreColumn.append(newCookieData);
    total +=  newStore.hourlySales[i];
  }
  masterTotal += total;
  let dailyTotal = document.createElement('td');
  dailyTotal.textContent = total;
  newStoreColumn.append(dailyTotal);
  makeNewTableFooter();
}
inputData.addEventListener('submit', makeStore)

ワワツァー😅. それで、私はそこに座っています.しかし、私の頭の中の理由のその声が、それです.リファクタ.それはあなたが卒業した後、これらの古いプロジェクトを再訪する美しさです.あなたは最終的にこれらの問題に深いダイビングに時間とエネルギーを持っている.それで、私はそれをチャンクに壊します:

フォームからユーザー入力を集めて新しいストアオブジェクトを作成します.

私は同じ店を二度追加しないように、私のテーブルの複製をチェックしています.

私はたくさんのDOM要素を構築し、それらを追加します.ちょうどそれが自身のヘルパー機能であるようにしましょう.

私が新しい店をつくったならば、私はその店をテーブルに加えています.私は、4つの個々の機能にこれを壊して終わりました.さらに、makeElementAndAppend()機能は、私が私のプロジェクトの他の部分で使用することができた幻想的なユーティリティ機能で終わった.

// ==================== DOM HELPER FUNCTION ====================
function makeElementAndAppend(element, parent, attributes = {}){
  const e = document.createElement(element);
  for(const [key, value] of Object.entries(attributes)) {
    e[key] = value;
  }
  parent.append(e);
  return e;
}

// ==================== GATHER USER INPUT FROM FORM ====================
function getStore(event){
  event.preventDefault();
  let storeName = event.target.storeName.value;
  if(isDuplicate(storeName)) return; // Dup check
  let minCustomers = event.target.minCustomers.value;
  let maxCustomers = event.target.maxCustomers.value;
  let cookiesPerHr = event.target.cookiesPerHr.value;
  let newStore = new Store(storeName, minCustomers, maxCustomers, cookiesPerHr);
  stores.push(newStore); 
  addStoreToTable(storeName, newStore); // Add to table
}
inputData.addEventListener('submit', getStore);

// ==================== ADD NEW STORE TO TABLE ====================
function addStoreToTable(storeName, newStore){
  let newStoreColumn = makeElementAndAppend('tr', parentBody); // make new row
  makeElementAndAppend('td', newStoreColumn, { textContent: storeName }); // make shop name first td in new row
  let total = 0; 
  for(let i = 0; i < newStore.hourlySales.length; i++){
    makeElementAndAppend('td', newStoreColumn, { textContent: newStore.hourlySales[i] });
    total +=  newStore.hourlySales[i];
  }
  masterTotal += total;
  makeElementAndAppend('td', newStoreColumn, { textContent : total });
  makeNewTableFooter();
}

// ==================== DUP CHECK ====================
function isDuplicate(storeName){
  for(let j = 0; j < stores.length; j++){ 
    if (stores[j].name.toLowerCase() === storeName.toLowerCase()){
      alert("𝙏𝙝𝙞𝙨 𝙨𝙩𝙤𝙧𝙚𝙨 𝙢𝙚𝙩𝙧𝙞𝙘𝙨 𝙝𝙖𝙫𝙚 𝙖𝙡𝙧𝙚𝙖𝙙𝙮 𝙗𝙚𝙚𝙣 𝙘𝙖𝙡𝙘𝙪𝙡𝙖𝙩𝙚𝙙 ✅🍪 ");
      return true;
    }
  }
}

私は、これがもっとリファクタリングされるかもしれないことを疑いません、しかし、これが十分に感じた愚かな側の実行プロジェクトのために.

要約する
過去に私はリファクタリングから離れて私は別の関数で1つの関数から変数を使用する方法を確認していなかったので、私は離れて私のコードを中断する必要はありませんでした.覚えておいて、文字通り、別の関数に1つの関数で使用している変数を渡すことができます!私は、ループのためにそれ自身の外でsomething[i]を使うことができた方法を把握していない数ヶ月前に思い出します.ただし、ループ内でその関数を呼び出すことにより、makeElementAndAppend('td', newStoreColumn, { textContent: newStore.hourlySales[i] })などの関数呼び出しに渡すことができます.それはおそらくいくつかの人々にとって信じられないほど明白ですが、いくつかの理由でちょうど最近私をクリックしました.
この経験からの私の離陸

ロジックを分離し、論理の各部分を自分の関数にします.

反復論理のために可能な場合にユーティリティ関数を作成します.

あなたが1つの関数で使用している変数を別の関数に渡すことができます.

それは'紙'上のすべてのロジックを取得するモンスター機能を起動するにはOKです.巨大な機能を起動し、離れてそれを破る練習.