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

GitHub

(이전 PDQuickUI, 버전 0.6.0부터 QuickUI로 이름 변경)

QuickUI는 PDRenderKit에서 파생된 프런트엔드 렌더링 프레임워크로, 프런트엔드 프레임워크 기능 향상에 중점을 두고 있습니다.

가상 DOM을 통합하여 렌더링 로직을 다시 작성하여 렌더링 효율성을 높이고 더 빠른 데이터 관찰 및 자동 업데이트를 가능하게 합니다.

이 프로젝트는 호환성과 성능을 보장하기 위해 PDRenderKit에서 프로토타입 확장을 제거하여 복잡한 애플리케이션에 적합하게 만듭니다.

모듈 버전과 비모듈 버전을 모두 제공하며 라이센스를 PDRenderKit의 GPL-3.0에서 MIT로 변경합니다.

특징

• 명확한 아키텍처: UI를 데이터 로직과 분리하여 유지 관리가 더 쉽습니다.
• 코드 단순성: 중복되는 코드를 줄이고 가독성을 높입니다.
• 자동 렌더링: 데이터 변경 및 업데이트를 자동으로 모니터링하여 수동 작업을 최소화합니다.
• 경량: 20kb 미만의 파일 크기 내에서 모든 기능을 유지합니다.

설치

• npm에서 설치
  

  npm i @pardnchiu/quickui
  

• CDN에서 포함

  • QuickUI 직접 포함
    

    <!-- Version 0.6.0 and above -->
    <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>
    
    <!-- Version 0.5.4 and below -->
    <script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>
    

  • 모듈 버전
    

    // Version 0.6.0 and above
    import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";
    
    // Version 0.5.4 and below
    import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
    

용법

• QUI 초기화
  

  const app = new QUI({
      id: "", // Specify rendering element
      data: {
          // Custom DATA
      },
      event: {
          // Custom EVENT
      },
      when: {
          before_render: function () {
              // Stop rendering
          },
          rendered: function () {
              // Rendered
          },
          before_update: function () {
              // Stop updating
          },
          updated: function () {
              // Updated
          },
          before_destroy: function () {
              // Stop destruction
          },
          destroyed: function () {
              // Destroyed
          }
      }
  });
  

개요

자동 렌더링: 데이터 변경이 감지되면 자동으로 다시 로드됩니다.

속성 개요

Attribute	Description
{{value}}	Inserts text into HTML tags and automatically updates with data changes.
:path	Used with the temp tag to load HTML fragments from external files into the current page.
:html	Replaces the element's innerHTML with text.
:for	Supports formats like item in items, (item, index) in items, (key, value) in object. Iterates over data collections to generate corresponding HTML elements.
:if :else-if :elif :else	Displays or hides elements based on specified conditions, enabling branching logic.
:model	Binds data to form elements (e.g., input), updating data automatically when input changes.
:hide	Hides elements based on specific conditions.
:animation	Specifies transition effects for elements, such as fade-in or expand, to enhance user experience.
:mask	Controls block loading animations, supporting `true
:[attr]	Sets element attributes, such as ID, class, image source, etc. Examples: :id/:class/:src/:alt/:href...
:[css]	Sets element CSS, such as margin, padding, etc. Examples: :background-color, :opacity, :margin, :top, :position...
@[event]	Adds event listeners that trigger specified actions upon activation. Examples: @click/@input/@mousedown...

텍스트 교체

{{값}}

• index.html

  npm i @pardnchiu/quickui
  

• 결과

  <!-- Version 0.6.0 and above -->
  <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>
  
  <!-- Version 0.5.4 and below -->
  <script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>
  

---

:html

• index.html

  // Version 0.6.0 and above
  import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";
  
  // Version 0.5.4 and below
  import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
  

• 결과

  const app = new QUI({
      id: "", // Specify rendering element
      data: {
          // Custom DATA
      },
      event: {
          // Custom EVENT
      },
      when: {
          before_render: function () {
              // Stop rendering
          },
          rendered: function () {
              // Rendered
          },
          before_update: function () {
              // Stop updating
          },
          updated: function () {
              // Updated
          },
          before_destroy: function () {
              // Stop destruction
          },
          destroyed: function () {
              // Destroyed
          }
      }
  });
  

블록 삽입

> [!참고]
> 테스트할 때 브라우저에서 로컬 파일 제한을 비활성화하거나 라이브 서버를 사용하십시오.

:길

• 테스트.html

  <h1>{{ title }}</h1>
  
      const app = new QUI({
          id: "app",
          data: {
              title: "test"
          }
      });
  
  

• index.html

      <h1>test</h1>
  
  

• 결과

      const app = new QUI({
          id: "app",
          data: {
              html: "<b>innerHtml</b>"
          }
      });
  
  

루프 렌더링

:을 위한

• index.html

          <b>innerHtml</b>
  
  

• 결과

  <h1>path heading</h1>
  <p>path content</p>
  

• 결과

      const app = new QUI({
          id: "app"
      });
  
  

조건부 렌더링

• index.html

      <h1>path heading</h1>
      <p>path content</p>
  
  

• 결과: 제목 = 1

      <ul>
          <li>{{ item }} {{ CALC(index + 1) }}</li>
      </ul>
  
      const app = new QUI({
          id: "app",
          data: {
              ary: ["test1", "test2", "test3"]
          }
      });
  
  

• 결과: 제목 = null && isH2 = 참

      <li>
  

---

Nest loop

• index.html

  
      <li>
          {{ key }}: {{ val.name }}
          
  
              
  
                  {{ item.name }}
                  
  
                      
  
                          {{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
                      
                  
              
          
      
  
  
      const app = new QUI({
          id: "app",
          data: {
              obj: {
                  food: {
                      name: "Food",
                      ary: [
                          {
                              name: 'Snacks',
                              ary1: [
                                  { name: 'Potato Chips', price: 10 },
                                  { name: 'Chocolate', price: 8 }
                              ]
                          },
                          {
                              name: 'Beverages',
                              ary1: [
                                  { name: 'Juice', price: 5 },
                                  { name: 'Tea', price: 3 }
                              ]
                          }
                      ]
                  },
                  home: {
                      name: 'Home',
                      ary: [
                          {
                              name: 'Furniture',
                              ary1: [
                                  { name: 'Sofa', price: 300 },
                                  { name: 'Table', price: 150 }
                              ]
                          },
                          {
                              name: 'Decorations',
                              ary1: [
                                  { name: 'Picture Frame', price: 20 },
                                  { name: 'Vase', price: 15 }
                              ]
                          }
                      ]
                  }
              }
          }
      });
  
  

• 결과: 제목 = 3 && isH2 = null

  <ul>
      <li>food: Food
          <ul>
              <li>Snacks
                  <ul>
                      <li>1. Potato Chips - </li>
                      <li>2. Chocolate - </li>
                  </ul>
                  </li>
              <li>Beverages
                  <ul>
                      <li>1. Juice - </li>
                      <li>2. Tea - </li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>home: Home
          <ul>
              <li>Furniture
                  <ul>
                      <li>1. Sofa - 0</li>
                      <li>2. Table - 0</li>
                  </ul>
              </li>
              <li>Decorations
                  <ul>
                      <li>1. Picture Frame - </li>
                      <li>2. Vase - </li>
                  </ul>
              </li>
          </ul>
      </li>
  </ul>
  
  

• 결과: 제목 = null && isH2 = null

      <h1>{{ title }} {{ heading }}</h1>
      <h2>{{ title }} {{ heading }}</h2>
      <h3>{{ title }} {{ heading }}</h3>
      <h4>{{ title }} {{ heading }}</h4>
  
      const app = new QUI({
          id: "app",
          data: {
              heading: [Number|null],
              isH2: [Boolean|null],
              title: "test"
          }
      });
  
  

템플릿 렌더링

• index.html

      <h1>test 1</h1>
  
  

• 결과

      <h2>test </h2>
  
  

바인딩

    <h3>test 3</h3>

이벤트

    <h4>test </h4>

CSS

> [!참고]
> :[CSS 속성]을 사용하여 데이터를 스타일 속성에 직접 바인딩하는 간단한 설정을 지원합니다.

• index.html

      const test = new QUI({
          id: "app",
          data: {
              hint: "hint 123",
              title: "test 123"
          },
          render: () => {
              return `
                  "{{ hint }}",
                  h1 {
                      style: "background: red;", 
                      children: [ 
                          "{{ title }}"
                      ]
                  }`
          }
      })
  
  

• 결과:

      hint 123
      <h1>test 123</h1>
  
  

기능

길이()

• index.html

  
      test
  
  
      const app = new QUI({
          id: "app",
          data: {
              password: null,
          },
          event: {
              show: function(e){
                  alert("Password:", app.data.password);
              }
          }
      });
  
  

• 결과

      test
  
  
      const app = new QUI({
          id: "app",
          event: {
              test: function(e){
                  alert(e.target.innerText + " clicked");
              }
          }
      });
  
  

---

CALC()

• index.html

      test
  
      const app = new QUI({
          id: "app",
          data: {
              width: "100px",
              color: "red"
          }
      });
  
  

• 결과

      test
  
  

---

상() / 하()

• index.html

      <p>Total: {{ LENGTH(array) }}</p>
  
      const app = new QUI({
          id: "app",
          data: {
              array: [1, 2, 3, 4]
          }
      });
  
  

• 결과

      <p>Total: 4</p>
  
  

---

DATE(숫자, 형식)

• index.html

      <p>calc: {{ CALC(num * 10) }}</p>
  
      const app = new QUI({
          id: "app",
          data: {
              num: 1
          }
      });
  
  

• 결과

      <p>calc: 10</p>
  
  

지연로드

:지연로드

• index.html

      <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
  
      const app = new QUI({
          id: "app",
          data: {
              test1: "upper",
              test2: "LOWER"
          }
      });
  
  

• 결과

      <p>UPPER lower</p>
  
  

---

SVG 교체

• test.svg

      <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
  
      const app = new QUI({
          id: "app",
          data: {
              now: Math.floor(Date.now() / 1000)
          }
      });
  
  

• index.html

      <p>2024-08-17 03:40:47</p>
  
  

• 결과

      <img>
  
      const app = new QUI({
          id: "app",
          data: {
              image: "test.jpg"
          },
          option: {
              lazyload: true // Enable image lazy loading: true|false (default: true)
          }
      });
  
  

i18n

> [!참고]
> 형식이 객체인 경우 다국어 콘텐츠를 직접 구성합니다.
> 형식이 문자열인 경우 언어 파일은 가져오기를 통해 동적으로 로드됩니다.

• en.json

      <img src="test.jpg">
  
  

• index.html

• 결과 i18nLang = zh

      const app = new QUI({
          id: "app",
          data: {
              svg: "test.svg",
          },
          option: {
              svg: true  // Enable SVG file transformation: true|false (default: true)
          }
      });
  
  

• 결과 i18nLang = en

수명주기 후크

{
    "greeting": "Hello",
    "username": "Username"
}

데이터 검색

npm i @pardnchiu/quickui

창조자

邱敬幃 Pardn Chiu

특허

이 프로젝트는 독점 라이선스에 따라 라이선스가 부여됩니다.

최종 사용자 라이센스 계약(EULA)에 명시된 조건에 따라서만 이 소프트웨어를 사용, 설치 및 실행할 수 있습니다.

---

©️ 2024 邱敬幃 Pardn Chiu

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