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
          }
      }
  });
  

ブロックを挿入

> [!NOTE]
>テスト時にはブラウザでローカル ファイル制限を無効にするか、ライブ サーバーを使用してください。

：パス

• test.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 = true

      <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

> [!NOTE]
> :[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");
              }
          }
      });
  
  

---

計算()

• 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>
  
  

レイジーロード

:lazyload

• index.html

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

• 結果

      <p>UPPER lower</p>
  
  

---

SVGの置換

• テスト.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

> [!NOTE]
>形式がオブジェクトの場合、多言語コンテンツが直接設定されます。
>形式が文字列の場合、言語ファイルはフェッチを通じて動的にロードされます。

• 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 中国語 Web サイトの他の関連記事を参照してください。