JavaScript를 사용한 클린 아키텍처 방법(전편)

이른바 청결 구조

우선 아래의 보도를 미루다.

지속가능한 개발을 목표로 ~역례 구동(청결 구조) + 단방향 제한 처리 + FRP

제 개인적인 요점은 다음과 같습니다.
* 내부부터 Domain Model/Usecase/Interface Adapter/External Adapter
*Interface 어댑터 내외부의 단방향 파이프 변환
*외부에서 내부로의 입력은 Controller, 내부에서 외부로의 출력은Presenter, 분리되지 않은 입력과 출력은 Gateway
* 비즈니스 프로세스를 Usecase에 기재합니다.업무 절차를 명확하게 테스트할 수 있다는 것은 정말 대단하다
*Usecase에서는 Controller의 입력을 통해 DB-Gateway에서 데이터를 얻고Presenter에 출력하고 반영합니다.파이프를 다시 연결하는 인상을 주다
* 출력 파이프로서의 presenter는 다른 Usecase의 입력이 되지 않습니다.
* 출력이 분리된 경우 Usecase에서 분리됩니다.파이프는 무상태이기 때문에 완전히 단독으로 테스트할 수 있다.너무 좋아요.

실사를 통해서 이해하고 싶은 상황.

청정 구조의 오른쪽 하단도

인터페이스가 어떻게 단방향 파이프인지 상상할 수 있다

생성 순서는 outport 즉 바깥쪽, interactor = Usecase, 그 다음에 controller이다.다음은 우수

static void Main(string[] args)
{
    var outputPort = CreateOutputPort();
    var interactor = CreateInputPort(outputPort);
    var controller = new Controller(interactor);
    controller.Execute(new[] {"source", "data", "foo", "bar"});
}

자바스크립트는 최근에 DOMContentLoaded를 자주 본다.

원작

클린 아키텍처

JavaScript로 실천

작업 실적 일람표

사람을 선택한 경우 과거 작업 실적은 연도/월(개요) 레이블 구분자로 표시됩니다.

매달 몇 시간씩 일했는데 구체적인 내용은 무엇입니까

선택용례

선택한 소속 부서의 인재만 축소 가능

선택 가능한 직원의 업무 형태도 동시에 변경

선택 가능한 업무 형태(직원/아르바이트)

이때 소속 부서를 한정하지 않음

마찬가지로 일하는 개별 달부터 줄일 수 있다

UI 이미지

당장 곤란한 일

Usecase의 세분화

일단class Usecase 1개

FilterUsecase#changeDepartment(i, department)

FilterUsecase#changeLabortype(i, labortype)

FilterUsecase#changeMember(i, member)

UI 선택 상자의 선택 상태는?결말은 어디에 있습니까?

filterUC.cond = {department: ?, labortype: ?, member: ?}

일단 Usecase부터 해볼까요?그를 데려가게 하다

class FilterUsecase {
  changeDepartment(i, department){//まずは部門で絞込
    this.cond = {department : (i < 1) ? null : department}
    const 勤務実績表 = this.repository.q("勤務実績", this.cond);
    this.oport["memberfilter"].update(勤務実績表, this)
  }
  // this.outport["memberfilter"]の実態は、Presenterとする
}
class Presenter
  constructor(id){
    this.node = document.getElementById(id)
  }
  update(table, usecase){
    //勤務実績repositotyから得られたtableを変換してUIに反映する
    //1. Table -> Arrayへ変換 -> domへの中間表現 vdomに変換
    const arr  = this.selectMember(table)
    const vdom = this.toSelectBox(arr)
    //2. vdomの内容を、DOMに反映
    this.node.appendChild(toDom(vdom).addEventLister("change", (evt)=>{
     const i = this.selectedIndex;
     const member = this.options[i].text
     usecase.changeMember(i, member)
    }))
  }