2021 0217(水)TIL-280宝くじタスクstpe 1 PR,MVC

Today I Learned

改造する

「ループのジャンクコード」は「ループしないCLINEコード」より良いと思うので、フェアシンボルとともにターゲットを実現する機能に焦点を当てました.実装が完了すると,再編成を行い,コードを少し分離すればMVCモードを適用でき,MVCモードを標榜して再編成を行った.

Model

Lotto.js

import Ticket from './Ticket.js';

export default function Lotto() {
  const init = () => {
    this.tickets = [];
  };

  this.getTicket = () => {
    this.tickets.push(new Ticket());
  };

  this.putLottoNumbers = () => {
    return this.tickets.map((ticket) => ticket.numbers);
  };

  init();
}

Ticket.js

import { getRandomNumber } from '../utils/getRandomNumber.js';

export default function Ticket() {
  const init = () => {
    this.numbers = getLottoNumber();
    this.profit = 0;
  };

  const getLottoNumber = () => {
    const lottoNumbers = new Set();

    while (lottoNumbers.size < 6) {
      lottoNumbers.add(getRandomNumber(1, 45));
    }

    return [...lottoNumbers].sort((a, b) => a - b);
  };

  init();
}

機能が最初に実現されたとき、Lottoには、現在Ticketに分離されているすべての部分が含まれていた.しかし,Lotto Instanceを作成すると不要な部分が一緒に生成され,1つのモデルがあまりにも多くの役割を果たす可能性があるので分離した.

View

viewPurchaseResultSection.js

import { $ } from '../utils/querySelector.js';
import {
  showElement,
  hideElement,
  disabledElement,
} from '../utils/setProperty.js';

const $purchaseResultSectionRowAlign = $('#purchase-result-section__row-align');
const $purchaseResultSectionColAlign = $('#purchase-result-section__col-align');

const lottoTicketIconTemplate = () => {
  return `<span class="purchase-result-section__lotto-icon mx-1 text-4xl">
            🎟️
          </span>`;
};

const lottoTicketDetailTemplate = (lottoNumber) => {
  return `<div class="d-flex">
            ${lottoTicketIconTemplate()}
            <span class="mx-1 mt-1 text-xl">${lottoNumber}</span>
          </div>`;
};

export const renderPurchaseResultSection = (
  amountOfLottoTicket,
  lottoNumbers,
) => {
  const $purchaseResultSection = $('#purchase-result-section');
  const $purchaseResultSectionLabel = $('#purchase-result-section__label');
  const $purchasePriceInputFormButton = $('#purchase-price-input-form__button');

  $purchaseResultSectionLabel.innerText = `총 ${amountOfLottoTicket}개를 구매하였습니다.`;
  $purchaseResultSectionRowAlign.innerHTML = lottoTicketIconTemplate().repeat(
    amountOfLottoTicket,
  );

  $purchaseResultSectionColAlign.innerHTML = lottoNumbers
    .map((lottoNumber) => lottoTicketDetailTemplate(lottoNumber.join(', ')))
    .join('');

  disabledElement($purchasePriceInputFormButton);
  showElement($purchaseResultSection);
};

export const renderPurchaseResultSectionColAlign = () => {
  showElement($purchaseResultSectionColAlign);
  hideElement($purchaseResultSectionRowAlign);
};

export const renderPurchaseResultSectionRowAlign = () => {
  showElement($purchaseResultSectionRowAlign);
  hideElement($purchaseResultSectionColAlign);
};

レンダリング画面の要素が分離されています.

Controller

handlePurchasePriceInput.js

import { $ } from '../utils/querySelector.js';
import { ERR_MESSAGE, VALUE } from '../utils/constant.js';
import { renderPurchaseResultSection } from '../view/viewPurchaseResultSection.js';

export const handlePurchasePriceInput = (lotto) => {
  const purchasePrice = $('#purchase-price-input-form__input').value;

  if (purchasePrice < VALUE.LOTTO.TICKET_PRICE) {
    return alert(ERR_MESSAGE.LOTTO.INVALID_PRICE);
  }

  const numberOfLottoTicket = Math.floor(
    purchasePrice / VALUE.LOTTO.TICKET_PRICE,
  );

  for (let i = 0; i < numberOfLottoTicket; i++) {
    lotto.getTicket();
  }

  renderPurchaseResultSection(numberOfLottoTicket, lotto.putLottoNumbers());
};

handlePurchaseResultToggle.js

import {
  renderPurchaseResultSectionColAlign,
  renderPurchaseResultSectionRowAlign,
} from '../view/viewPurchaseResultSection.js';

export const handlePurchaseResultToggle = ({ target }) => {
  return target.checked
    ? renderPurchaseResultSectionColAlign()
    : renderPurchaseResultSectionRowAlign();
};

ハンドル関数を分離しました.

MV* ???

新しいMV*図案/コードシート

上の文章を見て、MV*について改めて考えました.モデルとビューには任意のプログラムが必要です.ユーザーに表示(View)、表示するデータ(Model)が必要です.
では、なぜMVCモードのコントローラに加わるのでしょうか.ソフトウェアの規模が拡大するにつれて、モデルとビューが必要とすることが多くなり、それらの役割を割り当て、割り当てるためにMV+@が必要となり、そのうちの1つはControllerfmfを使用するMVCである.コントローラはモデルとビューを調整し、現在は大きなソフトウェアではありませんが、ソフトウェアの規模が拡大するにつれて、コントローラが処理しなければならないことが多くなり、コントローラが複雑になる可能性があります.
上のモジュールにMVCがついているかどうかはわかりませんができるだけ早くコメントのフィードバックを得たいです.

Thanks to pair:記号(@0 imbean 0)

Today Commit Review

woowacourse-projects

でまたタスクstep 1をPRしました.

Today Review

は、MVCモードをコードに初めて適用した.

であるが、MVCモードが適用されるかどうかは不明である.できるだけ早くコメントのフィードバックを得たいです.