[JS]JavaScript MVCの実装

この内容は,インフラストラクチャカリキュラムの実習UI開発学習による純JavaScriptとVueJS開発後期である.
純JavaScriptを使用して、リスト出力、リスト検索、および最近の検索を実現します.

開発環境

VS code, node , lite-server(npmインストールモジュール)
リンクでダウンロードしたり、homebrew、npm installでインストールしたりできます.

フォルダ構造と機能

コントローラ、モデル、viewsフォルダに大別されます.

app.js

Domをロードすると、MainControllerが表示されます.jsのinit関数呼び出しを担当します.
DOMContentLoadedの詳細

import MainController from './controllers/MainController.js'

//DOMContentLoaded
//브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 한다.
//이미지 파일이나 스타일시트 등의 기타 자원은 기다리지 않는다.
document.addEventListener('DOMContentLoaded', () => {
  MainController.init()
})

MainController.js

View、Model領域のすべてのファイルをインポートして使用します.
各ファイルにはdefault exportがあるので、読み込まれたクラスでカッコを使用せずに読み込むことができます.
default exportのプロパティ
インポート時に、開発者は必要に応じて名前を指定できます.ただし、実際の作業では、同じ名前をインポートしても名前によって混乱するため、チームメンバーは内部ルールを作成し、ファイル名と同じ名前を使用することができます.

import FormView from '../views/FormView.js'
import ResultView from '../views/ResultView.js'
import TabView from '../views/TabView.js'
import KeywordView from '../views/KeywordView.js'
import HistoryView from '../views/HistoryView.js'

import SearchModel from '../models/SearchModel.js'
import KeywordModel from '../models/KeywordModel.js'
import HistoryModel from '../models/HistoryModel.js'

Initメソッドでインポートしたモジュールで状態が変化したビューを検出します.
各モジュール(View.js)にはsetupというメソッドがあり、特定の要素でイベントが検出されると、各モジュールは画面の変化に適応するために適切なメソッドを呼び出します.
タグ(@submit、@reset、@changeなど)をコントローラに返し、関連メソッドを呼び出します.

//MainController init 함수
  init() {
    FormView.setup(document.querySelector('form'))
    	//on은 메서드 체이닝
      .on('@submit', e => this.onSubmit(e.detail.input))
      .on('@reset', e => this.onResetForm())
    
    TabView.setup(document.querySelector('#tabs'))
      .on('@change', e => this.onChangeTab(e.detail.tabName))
    
    KeywordView.setup(document.querySelector('#search-keyword'))
      .on('@click', e => this.onClickKeyword(e.detail.keyword))
    
    HistoryView.setup(document.querySelector('#search-history'))
      .on('@click', e => this.onClickHistory(e.detail.keyword))
      .on('@remove', e => this.onRemoveHistory(e.detail.keyword))
    ResultView.setup(document.querySelector('#search-result'))
    this.selectedTab = '추천 검색어'
    this.renderView()
  },
  //검색할 단어를 매개변수로 받아 search 
  search(query) {
    FormView.setValue(query)
    SearchModel.list(query).then(data => {
      this.onSearchResult(data)
    })
  },
  //... 메서드 생략
    

View

View.js
汎用メソッドが定義されています.
各ビュー.jsにモジュールをインポートして、新しいオブジェクトを作成および使用します.

const tag = '[View]'

export default {
  init(el) {
    if (!el) throw el
    this.el = el
    return this
  },

  on(event, handler) {
    this.el.addEventListener(event, handler)
    return this
  },

  emit(event, data) {
    const evt = new CustomEvent(event, { detail: data })
    this.el.dispatchEvent(evt)
    return this
  },

  hide() {
    this.el.style.display = 'none'
    return this
  },

  show() {
    this.el.style.display = ''
    return this
  }
}

他のモジュールはimportのみを使用しますが、Viewを使用します.jsを使用する場合、インポート後はObjectとなります.オブジェクトを作成して使用しました.
これは、親オブジェクトの機能を継承することで、新しい機能を追加して使用するためです.
JavaScriptでは継承,Property,インスタンスの概念をさらに理解する必要がある.
Object.create(オブジェクト)
親を継承する機能を継承することで、独自の新しい機能を追加できます.特別な点はObjectcreateで作成した場合、ジェネレータコードは実行されません.ジェネレータを呼び出す場合は、Objectを呼び出します.createよりもNewでオブジェクトを呼び出します.
Object.createのパラメータ

Object.create(prototypeObect,propertyOberct)

最初のパラメータ:プロトタイプ

の2番目のパラメータ:作成するオブジェクトのpropertyキーとディスク立棒オブジェクトを渡す

ディスク立棒オブジェクトとは?
propertyの状態を表すオブジェクトで、propertyツリーとも呼ばれます.
new,objectを継承します。createの詳細

例)FormView.js
次のソースコードを見ると、Objectが表示されます.createを使用してViewの機能を継承し、FormViewというオブジェクトを作成します.

import View from './View.js'

const tag = '[FormView]'

//Object.create 사용
const FormView = Object.create(View)

setup関数は、デフォルトの状態と状態の変化を検出するために必要な関数を定義します.

FormView.setup = function (el) {
  this.init(el)
  this.inputEl = el.querySelector('[type=text]')
  this.resetEl = el.querySelector('[type=reset')
  this.showResetBtn(false)
  this.bindEvents()
  return this
}

その後、UIに関する関数とデータの状態変化関数を定義する.
データの状態変化関数は、emitメソッドによってタグを伝達し、コントローラの状態変化を通知する.

FormView.bindEvents = function() {
  this.on('submit', e => e.preventDefault())
  this.resetEl.addEventListener('click', e => this.onClickReset())
}

FormView.onClickReset = function() {
  //컨트롤러에서 @reset일 때 함수 호출
  this.emit('@reset')
  this.showResetBtn(false)
}

Models

各モデルは、必要なデータと処理を担当します.
コントローラからモジュールにインポートした後、ビューでデータを処理するときにタグを送信し、コントローラからタグを受信して関連するモデルメソッドを呼び出す.
例)HistoryModel.js

export default {
  data: [
    { keyword: '검색기록2', date: '12.03' },
    { keyword: '검색기록1', date: '12.02'},
    { keyword: '검색기록0', date: '12.01' },
  ],

  list() {
    return Promise.resolve(this.data)
  },
  
  add(keyword = '') {
    keyword = keyword.trim()
    if (!keyword) return 
    if (this.data.some(item => item.keyword === keyword)) {
      this.remove(keyword)
    }

    const date = '12.31'
    this.data = [{keyword, date}, ...this.data]
  },
  
  remove(keyword) {
    this.data = this.data.filter(item => item.keyword !== keyword)
  }
}

こうりゅう

app.jsでMainControllerを使用します.js initメソッドを呼び出します.

MainController.jsにはview,modelモジュールが導入され,関連要素の状態変化を検出することにより,このモジュールに状態変化を伝達する.

各モジュール(Viewsの下のview.jsファイル)にはsetup関数によってデフォルトで実行される関数があり、UI関数とデータ処理関数が大きくあります.

データ処理関数の場合、メインコントローラ.jsにラベルを渡します.

MainController.伝達されたタグに一致する関数をjsで実行し,モデルでデータに関連する処理を処理した後,MainController.jsに値を渡し、Viewに反映します.

実装画面

推奨検索語、最近の検索語、検索、削除履歴、検索結果リスト

に感銘を与える

データ接続なしでオブジェクトを介して配布できるため、各ファイルの役割が明確であるため、モジュールとして使用するメリットがわかります.
Javaでのインポートと使用と同様に、javascriptでは、インポートとエクスポート方式の実装がより多様化しているように見えます.
Javaでは、クラス自体をインポートすることはあまり考えていませんが、他の方法があるかどうかを探さなければなりません.
ES 6、Property、速成についてもっと勉強しなければなりません.
領地実施アドレスショートカット