Bash의 history 기능, 편리하죠?

웹 양식에도 구현할 수 있다면 편리해야합니다.

그래서 구현할 것입니다.

우선 Bash의 history의 거동을 확인

거동 1

↑키로 1개전, ↓키로 1개 후에 실행한 커멘드를 표시할 수 있다

행동 2

실행 전 편집중인 명령도 history에 반영됩니다.

거동 3

명령을 실행할 때마다 편집중인 명령이 재설정됩니다.

구현 흐름

우선 ↑ 키와 ↓ 키로 과거의 입력 값을 표시 할 수있게한다 (Enter 키로 입력 값의 확정을한다)

다음에 편집시의 거동을 구현한다

↑키, ↓키와 Enter키의 거동을 구현

ID가있는 입력 태그 준비

history.html

<input id="form" placeholder="some text">

무엇이든, 우선 v-model

history.html

<input
  id="form"
  placeholder="some text"
  v-model="text"
>

키보드 이벤트 바인딩

history.html

<input
  ~ 省略 ~
  v-on:keydown.arrow-up.prevent="backHist"
  v-on:keydown.arrow-down.prevent="headHist"
  v-on:keydown.enter='confirm'
>

※ prevent 로 디폴트의 거동을 무효화하지 않으면 커서의 위치가 날아간다

Vue 인스턴스 생성

history.js

const form=new Vue({
  el: "#form",
  data: {
    text: '', // フォームの初期値
    index: 0, // ヒストリのインデックス
    history: [ '' ] // ヒストリの先頭にもフォームの初期値を入れておく
  }
})

※배열의 선두가 최신의 값으로 한다

↑키↓키 이벤트 발화시의 함수를 정의

history.js

const form=new Vue({
  ~ 省略 ~
  methods: {
    backHist(){
      // indexはhistoryの長さ未満
      (this.index + 1) < this.history.length
        ? this.index++
        : undefined

      this.text=this.history[this.index];
    },
    headHist(){
      // indexは0より小さくはならない
      (this.index - 1) < 0
        ? undefined
        : this.index--

      this.text=this.history[this.index];
    },
  }
});

Enter 키 이벤트 발화시 함수 정의

history.js

const form=new Vue({
  ~ 省略 ~
  methods: {
    ~ 省略 ~
    confirm: function(){
      this.hist[0]=this.text; // 現在の値をヒストリの最新値として格納

      // 次のヒストリの初期値を入力(現在のテキストが空のときはヒストリを追加しない)
      this.text === ''
        ? undefined
        : this.hist=[ '', ...this.hist ]

      this.index=0; // インデックスを0(最新の値)に戻す
      this.text=''; // フォームをクリア
    }
  }
});

이제 ↑ 키, ↓ 키와 Enter 키의 거동을 재현 할 수있었습니다.

편집시의 거동 구현

키 입력 이벤트 바인딩

history.html

<input
  ~ 省略 ~
  v-on:input="editHist"
>

키를 입력할 때마다 히스토리가 '편집됨'이라고 생각

히스토리에 원본 텍스트와 편집 중인 텍스트를 저장할 수 있도록 허용

history.js

const form=new Vue({
  ~ 省略 ~
  data: {
    ~ 省略 ~
    history: [{
      text: '', // オリジナル
      edit: undefined, // 編集中のテキスト(なければundefined)
    }]
  }
})

편집 이벤트 발화를 위한 함수 정의

history.js

const form=new Vue({
  ~ 省略 ~
  methods: {
    ~ 省略 ~
    editHist: function(){
      this.hist[this.index].edit=this.text;
    }
  }
})

history의 값 변경에 따라 confirm 함수 변경

history.js

const form=new Vue({
  ~ 省略 ~
  methods: {
    ~ 省略 ~
    confirm: function(){
      this.hist[0].text=this.text; // 現在の値をヒストリの最新値として格納

      // 編集中の値をクリア
      this.hist.forEach(
        h => h.edit=undefined
      );

      // 次のヒストリの初期値を入力(現在のテキストが空のときはヒストリを追加しない)
      this.text === ''
        ? undefined
        : this.hist=[{
            text: '',
            edit: undefined
          }, ...this.hist ]
            // .slice(0, 16) でhistoryの登録数上限(16)を指定することも可能

      this.index=0; // インデックスを0(最新の値)に戻す
      this.text=''; // フォームをクリア
    }
  }
})

이상으로 편집의 거동도 구현할 수 있었습니다

왜 이것을 구현했는가?

그러나

결론

쉽게 구현할 수 있으므로 IT 엔지니어를 타겟으로 한 서비스로 구현해 보는 것은 어떨까요?

About Me

평소에는 인프라 엔지니어

JavaScript와 ShellScript로 인프라 자동화가 가능한 OSS를 개발하고 있습니다.

Submarine.js - htps : //기 tぁb. 코 m / m 주수이 / 스 b 마리네 / t 레에 / ㅁ st

Twitter: @submarinejs , @Mjusui