[TIL] 1117

App.init関数が大きくなっています...どうやって直せるの?

は、親構成部品上に次のように作成され、子構成部品上に配置される.
だからアプリのコードが長くなって困っています.Appにいろいろなことをさせたのではないでしょうか.

サブエレメントからセグメントを作成すると、再使用性が低下します.

のコメントでは、これは大きなアプリケーションではありません.まず、アプリケーションで要素を生成して解放する方法と、各コンポーネントでエルリメンテルを生成する方法のうち、どちらを選択しても関係ないようです.

this.init = () => {
      const $history = document.createElement('ul')
      $history.id = 'histories'

      const $searchForm = document.createElement('form')
      $searchForm.id = 'form-search'
      $searchForm.addEventListener('submit', (e) => e.preventDefault())

      const $searchResults = document.createElement('ul')
      $searchResults.id = 'search-results'

      this.components = [
        new SearchForm({
          $target: $searchForm,
          setSearchResults: this.setState.bind(this),
        }),
        new SearchResult({ state: this.state, $target: $searchResults }),
      ]

      this.$root.appendChild($history)
      this.$root.appendChild($searchForm)
      this.$root.appendChild($searchResults)
    }

Reactなどのコールバック関数の実装

 this.setState = (arg) => {
      let newState = isFunction(arg) ? arg(this.state) : { ...this.state, ...arg }
      validateSearchResults(newState.searchResults)
      this.state = newState
      this.render()
    }

匿名関数はtypeofまたはinstanceofで、チェックできないGeeksforGeeksのウェブサイトでobject.prototype.toStringを使用して解決します!

export const isFunction = (fn) => {
  return Object.prototype.toString.call(fn) === '[object Function]'
}

Validationの問題

各

コンポーネントはsetStateでデータ型が正しいかどうかをチェックします.問題は、親コンポーネントappでチェックされており、サブコンポーネントでもチェックされていることです.

具体的な質問は以下の通りです.
サブコンポーネントのsetState関数を呼び出して親コンポーネント(Appと呼ばれる)を表示し、まず完全なステータス検証を行います.サブエレメントのsetStateを直接使用しないように,サブエレメントのsetStateについてもパラメータ値有効性チェックを行った.これにより、上流素子から下流素子のsetStateが呼び出されると、不要なタイプチェックが再び行われる.サブコンポーネントのみが検証されている場合は、保存ステータスはアプリケーションであり、検証せずに値が保存されている場合は、既存の通常のデータに影響を与える可能性があるため、アプリケーションはこの値を保持する必要があります.この場合、どのように最適化しますか?

のコメントでは、これは規模の大きいソフトウェアではないので、両方のソフトウェアで有効性チェックができます.

ダイレクトタイプチェックを実現しているので、何度も最適化を繰り返す必要がある.しかしtypescriptを導入すると、これは解決できる部分なので、できるだけこの点を考えなければなりません.

今まで勉強した時に感じた

1.Pull Requestのリリースでは、文章を書くのに苦労しました。

最初は何が実現したのか簡単に述べただけでしたが、他の人のPRを確認する立場から、コードを一緒に添付して説明してこのように実現した部分は分かりやすいです.3回目のPRでは、以下のような長さを書きました.

2.コードコメントのおかげで機能が細分化され、変数名の作成がより細かくなった。

apiから取得したデータのみをデータとして記録すると,データが1つのオブジェクトであるか複数の配列であるかを正確に知ることは困難であるため,SearchResultsを用いて検索した結果を意味する.もっと詳しく書きたいならダイナミクスだからgifImagesの方が明確!
fetchを要求する部分はapiです.jsとdebonseに分離された部分はutilsです.js分離と細分化機能を用いた作業により、コードが徐々に簡潔に整理されていく感じがします!