ดาวน์โหลด Cample.js - Cample.js ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

Cample.js

ส่วนประกอบของบุคคลที่สาม

3.2.1-beta.1

ดาวน์โหลด

เคม

cample.js - หนึ่งในเฟรมเวิร์กที่เร็วที่สุดโดยไม่ต้องใช้ DOM เสมือนจริงบนอินเทอร์เน็ต!

เว็บไซต์•เอกสารประกอบ•ตัวอย่าง•ตัวอย่างแหล่งที่มา

เวอร์ชันอัลฟ่า

เกี่ยวกับ cample.js?

Cample.js เป็นเฟรมเวิร์ก JavaScript โอเพนซอร์สสำหรับการสร้างส่วนต่อประสานผู้ใช้ เฟรมเวิร์กทำงานบนวิธีการที่ใช้องค์ประกอบซึ่งแต่ละองค์ประกอบสามารถเชื่อมต่อกันได้โดยการนำเข้าและส่งออกสถานะปัจจุบัน cample.js ไม่ได้ใช้ DOM เสมือนจริงเพื่อโต้ตอบกับ DOM จริงซึ่งทำให้กระบวนการตอบสนองเร็วขึ้นมาก

ข้อได้เปรียบหลัก

ไดอะแกรมประสิทธิภาพของกรอบ JavaScript และห้องสมุด
ผลลัพธ์ตามการเปิดตัว 123

การติดตั้ง

ในการสร้างแอปพลิเคชันจะเป็นการดีกว่าที่จะใช้คำสั่ง Cample-Start อย่างเป็นทางการเพื่อสร้าง“ จุดเริ่มต้น” โดยเลือกจากเทมเพลตที่มีอยู่สองแบบในปัจจุบัน

npx cample-start

เทมเพลตหลักสองตัวขึ้นอยู่กับสองโมดูล bundlers เช่น Webpack และพัสดุ ในการเลือกหนึ่งในนั้นจากรายการในเทอร์มินัลคุณสามารถเลือกอันที่เหมาะสมที่สุด พวกเขาทั้งหมดได้รับการสนับสนุนอย่างเป็นทางการ

นอกจากนี้ในการติดตั้งเฉพาะเฟรมเวิร์กคุณสามารถใช้คำสั่งต่อไปนี้:

npm i cample

ด้วยการติดตั้งนี้ฟังก์ชั่นจะยังคงพร้อมใช้งานโดยตรงจากโมดูล การติดตั้งโดยใช้ Cample-Start เพียงระบุไฟล์เริ่มต้นสำหรับแอปพลิเคชัน

เริ่มต้น

หลังจากตั้งค่าจุดเริ่มต้นของแอปพลิเคชันไฟล์ JS จะมีรหัสต่อไปนี้หรือไฟล์เดียวกัน แต่มีการนำเข้า HTML

จาวาสคริปต์

 const newComponent = component (
  "new-component" ,
  `<div class="component">
    <div class="clicks" data-value="{{dynamicData}}">Clicks:{{dynamicData}}</div>
    <button class="button">Click</button>
  </div>` ,
  {
    script : ( { element , functions } ) => {
      const button = element . querySelector ( ".button" ) ;
      const updateFunction = ( ) => {
        functions ?. updateClicks ( ( data ) => {
          return data + 1 ;
        } ) ;
      } ;
      button . addEventListener ( "click" , updateFunction ) ;
    } ,
    data : ( ) => {
      return {
        dynamicData : 0 ,
      } ;
    } ,
    dataFunctions : {
      updateClicks : "dynamicData"
    } ,
  }
) ;
cample ( "#app" , {
  trimHTML : true ,
} ) . render (
`<template data-cample="new-component">
</template>` ,
  {
    newComponent
  }
) ;

HTML

 < div id =" app " > </ div >

คุณสามารถเปลี่ยนรหัสนี้เป็นอื่น ๆ ที่คุณต้องการ รหัสนี้นำเสนอเป็นตัวอย่างของการทำงานของเฟรมเวิร์ก

บทความลิงก์: เริ่มต้นใช้งาน

การเกิดปฏิกิริยา

การเกิดปฏิกิริยาในเฟรมเวิร์กเป็นความสามารถในการตอบสนองต่อการเปลี่ยนแปลงข้อมูลเพื่ออัปเดตบางส่วนของรหัส JavaScript หรือโหนด HTML ที่ใช้ข้อมูลนี้โดยอัตโนมัติ

แผนภาพนี้แสดงให้เห็นว่าข้อมูลได้รับการอัปเดตเมื่อคุณใช้ฟังก์ชั่นที่อัปเดต นั่นคือราวกับว่ากำลังสร้างการอัปเดตข้อมูลแบบเธรดเดี่ยว ในรุ่นอนาคตโครงสร้างอาจเปลี่ยนแปลงเล็กน้อยเนื่องจากการประมวลผลข้อมูลแบบอะซิงโครนัส

บทความลิงก์: ปฏิกิริยา