글의 취지

가까스로 Indexed DatabaseAPI 학습 브라우저 프로그램을 만들었다.

1. 제작된 어플리케이션과 기술적 요소

브라우저에 점성(메모지) 같은 필기를 남길 수 있는 도구입니다. 판넬 방식의 관리 도구를 만들려고 했는데 기진맥진해서 잠시 보류했습니다. 화면 캡처는 다음과 같습니다.

사용하는 기술 요소는 다음과 같다.js는 첫 접촉이기 때문에 책을 쳐다보는 대응이다.

HTML

CSS

Vue.js

Indexed DatabaseAPI(사용 라이브러리 없음)

소스 코드는 Github 저장소 에서 자유롭게 사용하십시오. 동작은 "Chrome79.0.3945.117"에서 확인하십시오. Edge에서도 동작할 수 있지만 레이아웃이 약간 붕괴되었습니다.

2. 조작 방법

나는 직감으로 처리하는 수준이라고 생각한다. 한마디로 하면 다음과 같다.

clone 또는 zip 다운로드로 로컬에서 떨어진 후 열기kanban.html.

메모지를 다시 만들고 싶을 때 왼쪽 아래에 있는 더하기 번호를 누르세요.

드래그를 통해 자유롭게 메모지를 이동할 수 있다.

메모지를 두 번 클릭하고 편집 창을 엽니다.

편집 창에서 URL에 로그인한 후 메모지 왼쪽 아래에 있는 "URL"단추를 누르면 이 화면에서 새 탭으로 이동할 수 있습니다.

3. 고전의 요점

기술이 낮기 때문에 초보적이고 어리석은 것들이지만 치욕을 참으며 글을 쓴다.

3.1 Promise

다음 처리는 "DB와의 연결 확립"-> "모든 티켓 취득"-> "전역 변수에 티켓 정보를 기입"하려는 의도의 코드입니다. 그 중에서 createConnection() 및 getAllTickets() 는 반환Promise 대상의 함수입니다.Indexed DatabaseAPI는 비동기식 처리이므로 활용Promise을 통해 동기화를 도모합니다.

    created: function() {
        createConnection().then(
            getAllTickets()
        ).then(
            (allTickets) => {
                allTickets.forEach(
                    ticket =>
                    {
                        tickets.push({
                            id: ticket.id,
                            text: ticket.text,
                            url: ticket.url,
                            categoryId: ticket.categoryId,
                            left: ticket.left,
                            top: ticket.top,
                            zIndex: ticket.zIndex,
                            deleted: false
                        })
                    }
                )
            }
        ).catch(
            (reason) => alert(reason)
        )
    }

그러면 상술한 코드의 일부분은 정당하지 않아서 동기화 처리를 할 수 없다.
답안은 세 번째 줄로 쓰여 있습니다. getAllTicket(), 여기는 getAllTicket 함수 대상을 지정해야 합니다.promise.prototype.then() 시종일관 방법이며, 매개 변수 지정은 리셋 함수입니다. 매우 어리석은 오류이지만 조심하지 않아 if/else의 문법과 같은 느낌으로 기술하여 상술한 오류를 초래했습니다.

3.2 Bubbling

이번 메모지의 대상은 여러 층으로 구성되어 있기 때문에 버블링이 사건을 처리하는 것을 의식해야 하지만 이 점을 전혀 이해하지 못해 시퀀스는 상당히 무의식적인 행동에 시달렸다.
Bubbling에 관해서는 며칠 전 보도 이해하기 쉽다고 생각합니다. 인용 정의는 다음과 같습니다.
원소에 이벤트가 발생하면 먼저 위의 처리 프로그램을 실행한 다음에 다른 조상에게 도착할 때까지 상위 처리 프로그램을 실행합니다.
이번에는 "URL"단추를 누르면 메모지 자체에 설치된 마우스 하강 사건을 계속 처리한다. 후자는 메모지의 이동과 관련된 처리이기 때문에 메모지가 비뚤어지는 등 신비로운 행위가 빈번하게 발생한다.
버블링을 방지하려면 호출event.stopPropagation()을 통해 나중에 부모 대상에게 전파되는 것을 억제할 수 있다.

4. 업무

라벨 용지의 색상 변경 기능

categoryId 이 죽은 파라미터의 잔여

파일 서버 및 로컬 바로 가기 버튼

자원 관리자를 직접 조작할 수 없기 때문에 경로를 클립보드로 복사하는 처리를 구상합니다

휴지통 아이콘 배치를 통한 태그 삭제 처리

귀찮아요. 지금 삭제 버튼으로 대체하세요

판넬화 및 메모지에 상태 가져오기(ToDo, WIP, Done)

원래 그것을 목표로 하는 응용 프로그램이었기 때문이다

여러 레이블 지원

현재 여러 탭에서 이 프로그램을 열면 무슨 일이 일어날지 모른다