QuickUI: Rangka Kerja Bahagian Hadapan Ringan

GitHub

(Dulu dikenali sebagai PDQuickUI, dinamakan semula kepada QuickUI bermula dari versi 0.6.0)

QuickUI ialah rangka kerja pemaparan bahagian hadapan yang diperoleh daripada PDRenderKit, memfokuskan pada mempertingkatkan ciri rangka kerja bahagian hadapan.

Dengan menyepadukan DOM maya, ia menulis semula logik pemaparan untuk meningkatkan kecekapan pemaparan, mendayakan pemerhatian data yang lebih pantas dan kemas kini automatik.

Projek ini mengalih keluar sambungan prototaip daripada PDRenderKit untuk memastikan keserasian dan prestasi, menjadikannya sesuai untuk aplikasi yang kompleks.

Ia menyediakan kedua-dua versi modul dan bukan modul serta menukar lesen daripada GPL-3.0 dalam PDRenderKit kepada MIT.

Ciri-ciri

• Seni Bina Jelas: Mengasingkan UI daripada logik data, menjadikannya lebih mudah untuk diselenggara.
• Kesederhanaan Kod: Mengurangkan kod berlebihan dan meningkatkan kebolehbacaan.
• Perenderan Automatik: Memantau perubahan data dan mengemas kini secara automatik, meminimumkan operasi manual.
• Ringan: Mengekalkan fungsi penuh dalam saiz fail kurang daripada 20kb.

Pemasangan

• Pasang daripada npm
  

  npm i @pardnchiu/quickui
  

• Sertakan daripada CDN

  • Sertakan QuickUI secara langsung
    

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

  • Versi Modul
    

    // 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";
    

Penggunaan

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

Gambaran keseluruhan

Perenderan Automatik: Muat semula secara automatik apabila perubahan data dikesan.

Gambaran Keseluruhan Atribut

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

Penggantian Teks

{{nilai}}

• index.html

  npm i @pardnchiu/quickui
  

• Keputusan

  <!-- 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";
  

• Keputusan

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

Sisipkan Blok

> [!NOTA]
> Pastikan untuk melumpuhkan sekatan fail setempat dalam penyemak imbas anda atau gunakan pelayan langsung semasa menguji.

:jalan

• test.html

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

• index.html

      <h1>test</h1>
  
  

• Keputusan

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

Perenderan Gelung

: untuk

• index.html

          <b>innerHtml</b>
  
  

• Keputusan

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

• Keputusan

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

Pemarahan Bersyarat

• index.html

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

• Keputusan: tajuk = 1

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

• Keputusan: tajuk = batal && isH2 = benar

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

• Keputusan: tajuk = 3 && isH2 = batal

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

• Keputusan: tajuk = batal && isH2 = batal

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

Perenderan Templat

• index.html

      <h1>test 1</h1>
  
  

• hasil

      <h2>test </h2>
  
  

Mengikat

    <h3>test 3</h3>

Acara

    <h4>test </h4>

CSS

> [!NOTA]
> Menyokong tetapan mudah menggunakan :[sifat CSS], mengikat data secara langsung kepada atribut gaya.

• index.html

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

• Keputusan:

      hint 123
      <h1>test 123</h1>
  
  

Fungsi

LENGTH()

• index.html

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

• hasil

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

• hasil

      test
  
  

---

ATAS() / BAWAH()

• index.html

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

• hasil

      <p>Total: 4</p>
  
  

---

DATE(bilangan, format)

• index.html

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

• hasil

      <p>calc: 10</p>
  
  

Lazyload

:lazyload

• index.html

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

• hasil

      <p>UPPER lower</p>
  
  

---

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

• hasil

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

i18n

> [!NOTA]
> Jika format ialah objek, kandungan berbilang bahasa dikonfigurasikan secara langsung.
> Jika format ialah rentetan, fail bahasa dimuatkan secara dinamik melalui pengambilan.

• en.json

      <img src="test.jpg">
  
  

• index.html

• hasil i18nLang = zh

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

• hasil i18nLang = en

Kait Kitar Hidup

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

Pendapatan Data

npm i @pardnchiu/quickui

Pencipta

邱敬幃 Pardn Chiu

Lesen

Projek ini dilesenkan di bawah Lesen Milik.

Anda boleh menggunakan, memasang dan menjalankan perisian ini hanya di bawah syarat yang dinyatakan dalam Perjanjian Lesen Pengguna Akhir (EULA).

---

©️ 2024 邱敬幃 Pardn Chiu

Atas ialah kandungan terperinci QuickUI: Rangka Kerja Bahagian Hadapan Ringan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!