프런트엔드 UI 구성요소 재사용 도구 소개

"게으름"이 주요 생산력입니다.

프로그래머는 코드 재사용을 언제나 환영합니다. 프런트 엔드 구성 요소화의 궁극적인 목표는 재사용입니다. 오늘은 UI 구성 요소를 재사용하는 방법에 대해 자세히 논의하겠습니다.

보통 우리가 컴포넌트라고 부르는 것은 비즈니스 로직을 포함하는 프런트엔드 컴포넌트인 경우가 많습니다. 실제로 이러한 컴포넌트는 넓은 의미에서 재사용하기 어렵습니다. 대부분 동일한 비즈니스 라인에서 재사용할 수 있지만 UI 컴포넌트는 그렇지 않습니다. 마찬가지고, 비즈니스 제약도 없고, 재사용은 UI 수준에서만 이루어지므로 상상의 여지가 많이 남아 있으므로 여기서는 UI 구성요소에 대해서만 논의합니다.

먼저 정의해보자. UI 컴포넌트는 웹 인터페이스의 프론트엔드 코드 조각이다. 비록 비즈니스를 포함하지는 않지만 폼 검증, 캐러셀 효과, 탭 효과 등 기본적인 JS 효과를 사용할 수 있다. ., 즉 UI 구성요소에 htmlcssjs가 포함될 수 있다는 뜻입니다. 재사용의 목적은 단순히 복사하여 붙여넣는 것이 아니라 어느 정도 사용자 정의를 달성하는 것입니다. 예를 들어 인터페이스 내용을 조정하고 표시 스타일을 조정하고 JS 효과도 설정할 수 있습니다. 정말 실용적인 가치가 있을 수 있습니다.

그럼 위의 목표를 달성하는 방법에 대해 생각해 보겠습니다. 첫 번째이자 가장 핵심적인 것은 구성 요소 사용자 정의 기능입니다. 사용자 정의는 구성 요소의 htmlcssjs 코드를 수정할 수 있으며 편집 프로세스에서 얻은 내용을 확인해야 함을 의미합니다. 템플릿 엔진의 도움으로 이 기능을 구현할 수 있습니다. 템플릿 구문으로 모든 구성 요소 코드를 작성한 다음 템플릿 엔진이 이 데이터를 사용하여 템플릿을 구문 분석하고 최종 코드를 얻는 것입니다. 브라우저가 실행될 수 있다는 것입니다. 구성을 수정하는 과정은 구성 데이터를 편집하는 과정이기도 합니다. 편집 후 템플릿 엔진을 실시간으로 호출하고 다시 구문 분석하여 새 코드를 얻은 다음 해당 코드를 실시간으로 브라우저에 업데이트합니다. 당신이 보는 것이 편집 과정에서 얻는 것임을 깨닫는 것입니다.

분류하면 이 기능은 대략 다음과 같은 부분을 구현해야 합니다: 구성 요소 코드 획득, 구성 데이터 시각화, 템플릿 엔진 호출, 구성 파일 편집, 구성 요소 데모 및 구성 요소 html/css/js 코드 복사.

좀 더 확장하자면, 컴포넌트 코드의 자동 획득은 특정 조직 규칙에 의존해야 하므로 컴포넌트의 관리 방법에 대한 합의가 먼저 이루어져야 합니다. 예를 들어 합의된 구성 요소는 temp.html/style.css/script.js三个模板文件，再加上一个config.json구성 데이터 파일이 포함된 폴더로 구성됩니다. 컴포넌트는 컴포넌트 라이브러리로 일반 저장 폴더를 가지고 있어야 하며 컴포넌트 정보를 얻기 위해서는 컴포넌트 라이브러리에도 모든 컴포넌트의 목록과 각 컴포넌트에 대한 정보를 제공하는 디렉터리 파일이 필요하므로 이 디렉터리를 통해 컴포넌트를 얻을 수 있습니다. 템플릿, 구성 및 필요한 모든 정보.

위의 분석을 바탕으로 구성 요소 관리, 미리 보기, 편집 및 코드 복사 기능을 실현할 수 있는 UI 구성 요소 관리 도구 개발을 시작할 수 있습니다.

여기서 멈추면 이 도구의 실용 가치는 그리 크지 않습니다. 프론트엔드 코드 재사용에 초점을 맞춰 기능을 더욱 확장할 수 있습니다. 예를 들어 설계 단계부터 프론트엔드 구성요소 관리에 참여할 수 있나요? 디자이너는 회사 내부 UI 구성 요소 라이브러리를 게시하고 유지 관리합니다. 프로젝트 디자인 단계에서 구성 요소 라이브러리에서 기본 구성 요소를 선택하여 조정할 수 있으며 그 결과는 프런트 엔드에 전달되기만 하면 됩니다. 기능을 얻기 위한 구성 요소는 프로젝트의 프런트 엔드 코드에서 직접 사용됩니다.

검토를 위해 컴포넌트 라이브러리에서 구현해야 할 기능은 컴포넌트의 편집 결과로부터 특수 코드를 생성하는 것입니다. 이 코드는 관리 도구에서 컴포넌트의 편집 사이트를 복원하는 데 사용됩니다. 디자인 프로세스에서 프런트엔드 개발로 핸드오버됩니다. 이 기능의 구현 원리는 구성 요소의 원래 구성을 수정된 구성과 병합하고 수정된 구성 요소의 구성을 얻은 다음 이를 구성 요소의 렌더링 및 표시에 사용하여 디자인 장면을 복원하는 것입니다.

현재 우리에게 필요한 기능은 기본적으로 완성되었으며, 위의 기능을 기반으로 사용자 관리 및 사용 통계가 추가되어 구성 요소 구성을 더욱 최적화하는 데 도움이 됩니다. 도서관.

소스 코드: Github
미리 보기:

프로젝트가 도움이 되었다면 Github에 가서 마음껏 별표를 표시해 주세요.

위 내용은 프런트엔드 UI 구성요소 재사용 도구 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!