QuickUI: 경량 프런트엔드 프레임워크

원래 이름: PDQuickUI, 버전 0.6.0에서 QuickUI로 변경됨
QuickUI는 순수하게 JavaScript로만 개발된 프런트 엔드 렌더링 프레임워크입니다. 빠른 데이터 응답과 자동 업데이트를 달성하기 위해 가상 DOM 기술을 통합하여 렌더링 성능을 향상시킵니다.

핵심 기능

효율적인 가상 DOM

• 정확한 차이 비교 알고리즘을 통해 효율적인 DOM 업데이트가 이루어집니다
• 스마트 속성 업데이트 시스템, 변경된 값만 업데이트
• DOM 작업을 최소화하는 지능형 하위 노드 비교 메커니즘

반응형 데이터 처리

• 데이터 변경 즉시 반영을 위한 심층적인 데이터 모니터링 시스템
• 데이터 변경 시 자동으로 UI 업데이트, 수동 작업 불필요
• 스마트 캐싱 시스템으로 불필요한 반복 렌더링 방지
• 중첩 데이터 구조의 반응형 처리 지원

고급 템플릿 기능

• 다국어 지원 내장(i18n)으로 국제화 용이
• 동기 처리 대신 템플릿의 동적 로딩을 지원합니다
• 계산, 날짜, 워드 프로세싱을 지원하는 강력한 표현 시스템
• 완벽한 명령 시스템으로 유연한 DOM 운영 가능

성능 최적화된 디자인

• 이미지 및 SVG 콘텐츠는 지연 로딩 기술을 사용하여 로딩 속도를 향상시킵니다
• 파일 크기가 매우 작고 외부 종속성이 없음
• 메모리 사용 최적화를 위한 지능형 이벤트 위임 및 리소스 정리 메커니즘

문서

• 웹사이트: nanomd.pardn.io
• 문서: nanomd.pardn.io/doc.html

설치방법

npm에서 설치

npm i @pardnchiu/quickui

CDN에서 가져옴

QuickUI 제품군 소개

<!-- 0.6.0 版本以上 -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@%5BVERSION%5D/dist/QuickUI.js"></script>

<!-- 0.5.4 版本以下 -->
<script src="https://cdn.jsdelivr.net/npm/pdquickui@%5BVERSION%5D/dist/PDQuickUI.js"></script>

모듈 버전

// 0.6.0 版本以上
import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";

// 0.5.4 版本以下
import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";

사용방법

QUI 초기화

const app = new QUI({
    id: "", // 指定渲染元素
    data: {
        // 自訂 DATA
    },
    event: {
        // 自訂 EVENT
    },
    when: {
        before_render: function () {
            // 停止渲染
        },
        rendered: function () {
            // 已渲染
        },
        before_update: function () {
            // 停止更新
        },
        updated: function () {
            // 已更新
        },
        before_destroy: function () {
            // 停止銷毀
        },
        destroyed: function () {
            // 已銷毀
        }
    }
});

부동산 개요

텍스트와 내용

屬性	使用場景	範例
{{ value }}	動態文字內容	{{ userName }} 顯示使用者名稱
:html	原始 HTML 插入	渲染格式化內容

템플릿 로딩

屬性	使用場景	範例
:path	外部模板載入	載入頁首元件

목록 및 반복

屬性	使用場景	範例
:for	陣列/物件迭代	{{ item.name }} 渲染列表項目

조건부 렌더링

屬性	使用場景	範例
:if	條件顯示	歡迎！
:else-if/:elif	次要條件	載入中...
:else	預設內容	請登入

양식 바인딩

屬性	使用場景	範例
:model	雙向資料綁定	與資料同步

스타일 및 애니메이션

屬性	使用場景	範例
:animation	過渡效果	內容
:[css]	動態樣式	樣式內容

동적 속성

屬性	使用場景	範例
:[attr]	動態屬性

이벤트 처리

屬性	使用場景	範例
@[event]	事件監聽器	點擊我

라이선스 조건

이 프로젝트는 MIT와 유사한 라이센스를 채택하지만 난독화된 코드만 제공됩니다.

• MIT와 동일: 상업적 사용을 포함하여 무료로 사용, 수정, 재배포 가능
• 주요 차이점: 기본적으로 난독화된 버전의 프로그램 코드만 제공되며, 소스코드는 별도로 구매해야 합니다
• 라이선스 콘텐츠: 원본 저작권 표시를 유지해야 합니다(MIT와 동일)

자세한 이용 약관은 소프트웨어 사용 계약을 참조하세요.

개발자

추징관

• 이메일: dev@pardn.io
• 링크드인: linkedin.com/in/pardnchiu

---

©️ 2023 Pardn Chiu

위 내용은 QuickUI: 경량 프런트엔드 프레임워크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!