소개
이 장에서는 정확한 위치 지정, 계층형 디자인, 비동기 구성 요소 및 드래그 앤 드롭이라는 네 가지 측면에서 플라잉 코드 캔버스 디자인을 분석합니다.
1. 정확한 포지셔닝 설계
Flying Code Canvas는 외부 세계에 캔버스 기능을 제공하는 제품군입니다. 정확한 위치 지정에는 두 가지 상황이 있습니다. 하나는 대상 구성 요소에 하위 구성 요소가 없지만 대상 구성 요소에 하위 구성 요소가 있는 경우입니다.
하위 구성 요소 없음 : 대상 구성 요소는 하위 구성 요소를 지원하는 경우와 지원하지 않는 경우의 두 가지 상황으로 구분됩니다.
하위 구성요소 있음 : 하위 구성요소(대상 구성요소)의 대각선을 기준으로 한 마우스 위치입니다. 자세한 내용은 그림 1을 참조하세요.
그림 1
대상 구성 요소가 하위 구성 요소 배치를 지원하지 않는 경우 드래그 구성 요소를 대상 구성 요소의 왼쪽, 위쪽, 오른쪽 또는 아래쪽에 배치해야 하는지 계산해야 합니까? 계산 방법은 그림 2에 나와 있습니다.
그림 2
마우스 위치, 타겟 컴포넌트, 컴포넌트의 대각선 좌표 위치를 통해 그림 1의 오른쪽에 있는 드래그 컴포넌트와 타겟 컴포넌트 사이의 위치 관계를 유추할 수 있다.
질문 : Feima에서는 왜 부품 크기를 정확하게 알 수 있도록 치수(x, y)를 제공하지 않습니까?
실제 사용에서 빌더는 구성 요소의 특정 x 및 y에 관심이 없습니다. 일반적으로 행, 열 및 구성 요소 너비에 중점을 둡니다.
2. 레이어드 디자인
로우코드 캔버스 디자인에는 다양한 옵션이 있으며 Feima는 2레이어 디자인 모델을 채택합니다. 이 디자인 패턴에는 많은 장점이 있으며 캔버스의 구성 요소와 분리되어 있습니다. iOS, Android 네이티브를 개발해본 학생들이 이해하기 더 쉽습니다. 그림 3과 같이
이미지 3
캔버스의 맨 아래 레이어는 페이지 DSL에 따라 구성 요소 레이아웃을 렌더링하는 구성 요소 렌더링 레이어입니다. 구성 요소 렌더링 레이어에는 캔버스 마스크 보기도 있습니다. 컴포넌트를 클릭하면 컴포넌트에 따라 컴포넌트의 가장 바깥쪽 테두리에 색상이 추가되며, 컴포넌트 오른쪽 상단에 툴바(자세히, 위로 이동, 아래로 이동, 복사, 삭제)가 추가됩니다( 페이지 레이아웃에 따라 하단으로 자동 전환), 호버 영역이 추가됩니다. . 컴포넌트 너비의 드래그 앤 드롭 조정을 지원합니다.컴포넌트 맨 오른쪽에 호흡기 효과 선이 있으며, 마우스로 드래그 앤 드롭하여 컴포넌트 너비를 조정할 수 있습니다. 이는 스타일 조정 작업을 크게 촉진합니다.
질문 : 컴포넌트의 왼쪽, 오른쪽 크기 조정이 지원되는데, 컴포넌트의 위쪽 및 아래쪽 크기 조정은 지원하지 않는 이유는 무엇입니까?
Feima는 편집 상태에서 div, form 등의 컨테이너 컴포넌트의 상단 및 하단 크기를 하위 컴포넌트의 높이에 따라 자동으로 조정합니다. Feima는 부품의 너비를 모릅니다.
3. 비동기식 구성요소
Feima는 공통 컴포넌트 기능을 제공하지만 Feima에서는 비즈니스 맞춤형 컴포넌트를 구축하기가 어렵습니다. Feima는 컴포넌트를 동적으로 로드하는 기능을 제공하는데, 동적 컴포넌트 로딩은 편집 상태와 실행 상태로 구분됩니다. 편집 상태에서 구성 요소를 페이지로 드래그하면 구성 요소 데이터의 유형에 따라 현재 구성 요소 유형이 결정됩니다. type=2인 경우 Feima 엔진은 해당 URL에 해당하는 구성 요소를 다운로드하는 스크립트를 생성한 다음 이를 캐시합니다. 실행 상태 아이디어는 동일합니다.
4. 드래그 앤 드롭 디자인
구성 요소를 드래그할 때 각 구성 요소는 양식의 하위 구성 요소가 el-form-item인지 여부 등 특정 처리와 혼합되어야 합니다. 그림 4를 참조하세요.
그림 4
컴포넌트를 드래그 앤 드롭하면 currentTarget이 기록되어 컴포넌트 ID를 얻고 dataTransfer 이미지가 설정됩니다. 이렇게 하면 드래그 구성 요소의 스타일을 볼 수 있습니다. 믹스인(mix-in) 방식은 컴포넌트를 강화하는 방식인 hoc를 사용한다. 자세한 내용은 그림 5를 참조하세요.
그림 5
4: 요약
이 장에서는 Feima Canvas의 디자인을 정확한 위치 지정, 계층형 디자인, 비동기 구성 요소, 드래그 앤 드롭이라는 네 가지 측면에서 분석합니다. Feima의 목표는 프런트 엔드 웹 단일 페이지를 신속하게 제작할 수 있도록 편리하고 강력하며 제로 테스트를 수행하는 것입니다. 강력한 지원을 해주신 제품 학생과 서버 학생에게 감사드립니다.
OpenAI가 모든 사용자에게 ChatGPT를 무료로 공개합니다. 음성 프로그래머가 ETC 잔액을 조작하고 연간 260만 위안 이상을 횡령했습니다. Spring Boot 3.2.0이 공식 출시되었습니다. Google 직원이 퇴사 후 대기업을 비난했습니다. 그는 Flutter 프로젝트 및 HTML 관련 표준 공식화 Microsoft Copilot Web AI는 12월 1일 공식 출시되며 중국 Microsoft의 오픈 소스 터미널 채팅 Rust 웹 프레임워크를 지원합니다. Rocket 릴리스 v0.5: 비동기식, SSE, WebSockets 등을 지원합니다 . Redis는 순수 C 언어 코드를 사용하여 Telegram Bot 프레임워크를 구현합니다 .오픈 소스 프로젝트 관리자라면 이런 반응을 어디까지 견딜 수 있습니까? PHP 8.3 GA저자: JD Technology의 Wang Guanghui
출처 : JD Cloud 개발자 커뮤니티 전재시 출처를 밝혀주세요