ดาวน์โหลด wui_builder - wui_builder ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

wui_builder

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

0.3.0

ดาวน์โหลด

ห้องสมุด DART สำหรับการสร้างส่วนต่อประสานผู้ใช้สำหรับเว็บซึ่งได้รับแรงบันดาลใจจาก ReactJS

สำหรับการสร้างอินเทอร์เฟซผู้ใช้เว็บที่ใช้งานส่วนประกอบใน DART

จัดเตรียมไลบรารีที่หลากหลายขององค์ประกอบเสมือนจริงสำหรับ SVG และ HTML มาตรฐาน

รองรับการกำหนดส่วนประกอบที่กำหนดเองด้วยอินเทอร์เฟซคล้ายกับ React รองรับวิธีวงจรชีวิตเดียวกันทั้งหมดได้รับการสนับสนุน

สร้างขึ้นด้วยการแสดงผลแบบ async ตั้งแต่เริ่มต้น

สอดคล้องกับ Dart 2, Strong Mode และ DDC อย่างเต็มที่

เอกสารและตัวอย่าง

ตรวจสอบเอกสารเกี่ยวกับหน้า GitHub เพื่อดูในเชิงลึกที่ Framework

อะไรทำให้เฟรมเวิร์กเสมือนจริงนี้แตกต่างกัน?

มันเขียนด้วย DART บวก:

องค์ประกอบ DOM เสมือนจริงที่สร้างขึ้น

เครื่องกำเนิดไฟฟ้าเป็นคุณสมบัติที่ไม่เหมือนใครที่สุดของ WUI_BUILDER เครื่องกำเนิดไฟฟ้าสร้างตัวสร้างองค์ประกอบ DOM เสมือนสำหรับแต่ละประเภทองค์ประกอบที่กำหนดในแพ็คเกจ DART HTML และ SVG ตัวสร้างองค์ประกอบ DOM เสมือนแต่ละตัวจะมีตัวตั้งค่าที่พิมพ์เดียวกันกับองค์ประกอบ HTML/SVG ที่สอดคล้องกัน สิ่งนี้ทำให้ง่ายต่อการเขียนส่วนประกอบที่ยืดหยุ่น

การกำหนดค่าการอัปเดตที่กำหนดค่าได้

ถัดไป WUI_Builder รองรับการเรนเดอร์ซ้ำเพื่อหลีกเลี่ยงการปิดกั้นเธรดหลักในการอัปเดตขนาดใหญ่ การอัพเดทซ้ำจะดำเนินการเฉพาะในการโทรกลับที่ไม่ได้ใช้งานซึ่งหมายความว่างานการเรนเดอร์และเค้าโครงจะถูกแบ่งออกเป็นหลายเฟรม WUI_BUILDER ให้อำนาจแก่นักพัฒนาในการตัดสินใจว่าส่วนประกอบควรแสดงผลเมื่อใด ช่วยให้นักพัฒนาสามารถตัดสินใจได้ว่าส่วนประกอบอัพเดต syncronously บนเฟรมภาพเคลื่อนไหวหรือเปิดและไม่ได้ใช้งานโทรกลับ ตามหลักการแล้วองค์ประกอบจะ:

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

อย่างไรก็ตามการอัพเดท syncronous ยังได้รับอนุญาตให้ทำงานตามความต้องการโดยไม่ต้องรอเฟรมภาพเคลื่อนไหวหรือการโทรกลับที่ไม่ได้ใช้งาน

การสร้างแบตช์อัจฉริยะ

ในที่สุด WUI_BUILDER จะป้องกันการอัปเดตที่ไม่ได้รับการอัปเดตเมื่อมีการอัปเดตหลายรายการไปยังส่วนประกอบเดียวกันก่อนที่จะดำเนินการใด ๆ ตัวอย่างเช่นสมมติว่าฉันมีส่วนประกอบที่อัปเดตเกี่ยวกับเฟรมภาพเคลื่อนไหวโดยใช้ SetStateOnAnimationFrame หาก SetStateOnAnimationFrame ถูกเรียกสองครั้งระหว่างเฟรมกระบวนการอัปเดตจะถูกเรียกใช้เพียงครั้งเดียวในขณะที่อนุญาตให้ใช้ฟังก์ชัน STATE SETTER ทั้งสอง

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

ไวยากรณ์

 class HelloWorldProps {
    final String text;
    HelloWorldProps ( this .text);
}

class HelloWorld extends PComponent < HelloWorldProps > {
    HelloWorld ( String text) : super ( HelloWorldProps (text));

    @override
    VNode render () => VDivElement ()
        ..text = props.text;
}

// instantiate the component, pass it an instance of HelloWorldProps
final component = HelloWorld ( 'Hello world' );

// render the virtual element into a container
render (component, querySelector ( '#container' ));