CalDOM

ไลบรารี JavaScript UI ของ Agnostic, Reactive & Minimalist (3KB) พร้อมการเข้าถึง DOM ดั้งเดิมโดยตรง

แทนที่จะดึงคุณเข้าสู่โลกเวทมนตร์เฉพาะห้องสมุด Caldom ให้คุณ เข้าถึง DOM ได้ โดยตรงในขณะที่รักษา ปฏิกิริยา ดังนั้นคุณสามารถใช้ประโยชน์อย่างเต็มที่จาก API พื้นเมืองและผสมกับห้องสมุดอื่น ๆ เพื่อให้ได้ประสิทธิภาพและความยืดหยุ่นที่เหนือกว่าในกระบวนการพัฒนา

วิธีการเสมือนจริง 2-in-1 และไม่มีเสมือนจริงถ้าคุณต้องการ

0⃣ Zero Tooling, 0⃣การพึ่งพาศูนย์, 0⃣ศูนย์ไวยากรณ์ใหม่, เพียง JS บริสุทธิ์

ในสาระสำคัญ Caldom เป็นเพียงเสื้อคลุมรอบโหนด/องค์ประกอบดั้งเดิม การลดลงของประสิทธิภาพโดยรวมอยู่ที่ประมาณ 0.04x เมื่อเทียบกับวานิลลา/จาวาสคริปต์บริสุทธิ์ สิ่งนี้ขึ้นอยู่กับเกณฑ์มาตรฐานระดับหน่วยเฉลี่ยในการจัดการอินสแตนซ์เดี่ยวและหลายองค์ประกอบ: ดูผลลัพธ์มาตรฐานกับวานิลลา JS, JQuery, React JS, Vue & More

เว็บไซต์อย่างเป็นทางการ: caldom.org

เอกสาร: caldom.org/docs/

สวัสดีโลก!

ใช้มันเป็นตัวเลือก DOM ที่เป็นลูกโซ่และเป็นตัวเลือก jQuery ที่มีน้ำหนักเบา

 _ ( "#output-1" )
    . append (
        _ ( "+h1" ) . text ( "Hello World!" )
    ) ;

//Short append
_ ( "#output-1" , _ ( "+p" , "This is CalDOM." ) ) ; 

สวัสดีโลก - ตอบโต้

สร้างส่วนประกอบปฏิกิริยา ใช้เป็นทางเลือกที่มีน้ำหนักเบา js/vue js ทางเลือก ไม่ได้ใช้คลาสคล้ายกับการตอบสนองของตะขอ แต่ง่ายกว่า

 let app = _ ( ) . react (
    { } ,
    {
        render : state =>
            _ ( "+h1" , `Hello ${ state . name } ` ) //This is XSS safe by design
    }
)

_ ( "#output-2" , app ) ;

//Edit below line to update state
app . state . name = "World Reactively ?" ; 

สวัสดี World - Reactive (ES6)

ยังทำงานเป็นชั้นเรียน ES6 ที่ขยายออกไป

 class HelloWorld extends _ . Component {
 
    constructor ( state ) {
        super ( ) ;
   
        this . react ( state ) ;
    }
 
    render ( state ) {
        return _ ( "+div" , [ //Can pass children as an array too
            _ ( "+h1" , "Hello " + state . name ) ,
            
            _ ( "+p" , [ "The time is: " , state . time ] )
        ] ) ;
    }

    tick ( ) {
        this . state . time = new Date ( ) . toTimeString ( ) . substr ( 0 , 8 ) ;
    }

    didMount ( ) {
        setInterval ( ( ) => this . tick ( ) , 1000 ) ;
    }
 
}

let app = new HelloWorld ( { name : "World!" , time : "" } ) ;

_ ( "#output-3" , app ) ; 

องค์ประกอบ DOM พื้นเมืองปฏิกิริยา

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

 let app = _ ( ) . react (
    { } ,
    {
        render : state => {
            let div = document . createElement ( "div" ) ;

            let heading = document . createElement ( "h1" ) ;
            heading . textContent = `I'm a reactive ${ state . name } ` ;

            div . appendChild ( heading ) ;

            //.elem gives you the direct Element
            div . appendChild ( _ ( "+h2" , "???" ) . elem ) 

            return div ;
        }
    }
)

_ ( "#output-3-1" , app ) ;

app . state . name = "native DOM Element. ?" ; 

ทำปฏิกิริยา HTML ที่มีอยู่

ไม่ใช่แฟนของการเรนเดอร์และเสมือนจริงหรือไม่? ใช้ Caldom เพื่ออัปเดต () เนื้อหา HTML ที่กำหนดไว้ล่วงหน้าทำปฏิกิริยา API ของ Caldom ได้รับแรงบันดาลใจจาก jQuery

 let person_one = _ ( "#person-1" ) . react (
    { } ,

    {
        update : function ( state , person ) {
            person . find ( ".name" ) . text ( state . name ) ;
            person . find ( ".age" ) . text ( state . age ) ;
        }
    }
)

//CalDOM batches these 2 state updates to only render once.
person_one . state . name = "Jane Doe" ;
person_one . state . age = 22 ;                 

เรียกพลังของทั้งสองโลก!

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

 class Person extends _ . Component {
    constructor ( ) {
        super ( ) ;

        this . react ( { name : "John" , likes : [ "SpongeBob" ] } ) ;
    }

    render ( state ) {
        return _ ( "+div" , [
            //Saving a reference to the direct DOM Element
            this . $ . title = _ ( "+h1" , `I'm ${ state . name } ` ) . elem ,
            
            _ ( "+p" , "I like " + state . likes . join ( " & " ) )       
        ] ) ;
    }

    update ( state , person , changed_keys , changes_count ) {
        
        if ( changes_count != 1 || ! ( "name" in changed_keys ) )
            // Too complex to update, proceed to render.
            return true ;
            
        else //Update name directly using the DOM reference
            this . $ . title
                . textContent = `I'm ${ state . name } Directly. ?` ;
    }
}

let user = new Person ( ) ;
_ ( "#output-4" , user ) ;

user . state . likes . push ( "Hulk" ) ; //This is handled by render()

setTimeout ( ( ) => 
    user . state . name = "Jane" //This is handled by update()
, 1000 ) ; 

ส่วนประกอบของเว็บพื้นเมือง supercharge

Caldom รวมเข้ากับส่วนประกอบของเว็บได้อย่างราบรื่น ใช้ Caldom เพื่อสร้างส่วนประกอบเว็บที่มีปฏิกิริยาและปฏิกิริยา นอกจากนี้ยังยอมรับส่วนประกอบของเว็บเป็นอินพุต

 class CustomElement extends HTMLElement {
    connectedCallback ( ) {
        
        let title = _ ( ) . react (
            { msg : "Hello World!" } ,
            {
                render : state => 
                    _ ( "+h2" , state . msg )
            }
        ) ;

        // Appending H2 as a child, keeping root intact
        // this = <custom-element>
        _ ( this , title ) ;

        //Just a shortcut to access state easily
        this . state = title . state ;
    }
    
    doSomething ( ) {
        alert ( "Cool Eh!" ) ;
    }
}

//Registering custom element.
customElements . define ( "custom-element" , CustomElement ) ;

let hello = document . createElement ( "custom-element" ) ;
document . getElementById ( "output-5-1" ) . appendChild ( hello ) ;

hello . state . msg = "I'm a Reactive, Stateful & Native Web Component. " ;

//Creating a new web component using CalDOM
_ ( "#output-5-1" ) . prepend ( _ ( "+custom-element" ) )

คุณสามารถใช้องค์ประกอบที่กำหนดเองเหล่านี้ในโค้ด HTML ได้ตามปกติ โปรดทราบว่าการสนับสนุนเบราว์เซอร์สำหรับส่วนประกอบเว็บค่อนข้างใหม่ (95%) อนาคตดูสดใส! -

 < custom-element onclick =" doSomething() " >
</ custom-element >

< custom-element onclick =" state.msg = 'Native Web Components are awesome! ✌️' " >
</ custom-element > 

คุณสามารถสร้างปฏิกิริยา jQuery ได้

กล่องอาคารพื้นฐานของ Caldom เป็นเพียงโหนด/องค์ประกอบดั้งเดิม ดังนั้นทำให้เข้ากันได้กับห้องสมุด DOM เกือบทุกแห่งบนเว็บ

 class HelloJquery extends _ . Component {

    constructor ( ) {
        super ( ) ;

        this . react ( { prompt : "" } ) ;
    }

    render ( state ) {
        //Creating element & attaching click event using jQuery
        return $ ( "<h1></h1>" )
            . text ( state . prompt )
            . click ( ( ) => state . prompt = "Hello from jQuery!" ) [ 0 ] ;
    }
}

let app = new HelloJquery ( ) ;
_ ( "#output-6" , app ) ;

app . state . prompt = "Click Me!" 

Caldom ยังทำงานบนโหนด JS

คุณสามารถใช้ไลบรารีเช่น JS-DOM เพื่อใช้บริบทของเบราว์เซอร์บนเซิร์ฟเวอร์

 const { JSDOM } = require ( "jsdom" ) ; 

//Set window in the global scope
window = new JSDOM ( ) . window ;

const _ = require ( "caldom" ) ;

class ServerApp extends _ . Component {

    constructor ( ) {
        super ( ) ;

        this . react ( { msg : "" } ) ;
    }

    render ( state ) {
        return _ ( "+p" , state . msg )
            . css ( "color" , "#199646" )
    }
}

let app = new ServerApp ( ) ;
_ ( "body" , app ) ;

app . react ( { msg : "Hello from NodeJS " + process . version  } ) ;

//Saving generated HTML by the component to a file
require ( "fs" ) . writeFileSync (
    "static_content.html" , 
    window . document . body . innerHTML 
) ;

เยี่ยมชม caldom.org เพื่อทดลองกับตัวอย่างรหัสสดจำนวนมาก

---

เริ่มต้นใช้งาน

CDN

 < script src =" https://unpkg.com/caldom " > </ script >

Caldom ใช้ตัวแปร '_' เป็นมือสั้น ๆ ทั่วโลกโดยค่าเริ่มต้น หากต้องการใช้นามแฝงที่แตกต่างกันให้ตั้งค่าหน้าต่าง ['_ CAL_DOM_ALIAS'] = 'disterence_alias' ก่อนโหลด

การดาวน์โหลด

• รุ่นที่มีขนาดเล็กอยู่ที่ DIST
• ซอร์สโค้ดอยู่ที่ SRC

ใช้เป็นโมดูล

Caldom ไม่ได้แนบสิ่งใดกับสภาพแวดล้อมทั่วโลกเมื่อใช้เป็นโมดูล

npm install caldom

 //CalDOM also runs on Node JS with js-dom
const _ = require ( 'caldom' ) ; 

 //RequireJS
requirejs ( [ "caldom" ] , function ( _ ) { } ) ; 

 //ES6 Module
import _ from "./dist/caldom.min.mjs.js" ;

การบริจาค

การบริจาคของคุณยินดีต้อนรับและขอบคุณล่วงหน้า โปรดตรวจสอบให้แน่ใจว่าได้ทดสอบหน่วยหลังจากการเปลี่ยนแปลง

หลักการสำคัญ

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

สิ่งที่ต้องทำ

• ใช้การทดสอบ

  • จำเป็นต้องขยายการทดสอบที่หลากหลายไปยังกรณีการใช้งานที่แตกต่างกัน (ปัจจุบันมันมีอคติต่อสไตล์การเข้ารหัสส่วนตัวของฉัน)

• เอกสาร/คู่มือที่เป็นมิตรกับผู้เริ่มต้น ปัจจุบันมีเทคนิคเกินไป

• ใช้เอาต์พุตดีบั๊กที่เป็นประโยชน์สำหรับเวอร์ชันการพัฒนา

• การทดสอบเวอร์ชันเบราว์เซอร์อย่างละเอียด

• เพิ่มประสิทธิภาพอัลกอริทึมการกระจาย DOM เสมือนเพิ่มเติม ดูเกณฑ์มาตรฐานที่นี่

  • อัลกอริทึมการกระจายเป็นเพียง 140+ บรรทัดของรหัส
  • ฉันเชื่อว่ามีพื้นที่มากมายสำหรับการปรับปรุงหากจิตใจที่สดใสบางคนมองจากมุมที่สดใหม่

• ต้องใช้มาตรฐานการใช้งานที่ใหญ่กว่า (เช่นในสเปรดชีตที่แต่ละเซลล์เป็นองค์ประกอบย่อย?)

อาคาร

ปัจจุบันซอร์สโค้ดทั้งหมดอยู่ในไฟล์เดียว ดังนั้นจึงไม่มีกระบวนการสร้างขนาดใหญ่นอกเหนือจากการใช้ Uglify-JS เพื่อลดขนาด

สิ่งนี้เพียงแค่สร้าง. min.js & .min.mjs.js & ไฟล์. map ที่เกี่ยวข้องในโฟลเดอร์ ./dist/

 # Install dev dependencies
npm install

# Build
npm run build

การทดสอบหน่วยและการเปรียบเทียบ

แหล่งทดสอบและการวัดประสิทธิภาพอยู่ที่./tests_and_benchmarks Caldom กำลังใช้กรอบการทดสอบหน่วยและการเปรียบเทียบใหม่เอี่ยมที่เรียกว่า PFREAK ซึ่งถูกสร้างขึ้นเป็นโครงการด้านข้างของ Caldom

ผลการทดสอบหน่วยสำหรับงานสร้างล่าสุดมีอยู่ที่ caldom.org/tests/

เริ่มต้น pfreak หลังจากการติดตั้งเพื่อตั้งค่าลิงก์ Sym อย่างถูกต้อง

pfreak init ./tests_and_benchmarks/internal/
pfreak init ./tests_and_benchmarks/external/

การทดสอบหน่วย

npm test

หรือ

pfreak test ./tests_and_benchmarks/internal/

เรียกใช้เกณฑ์มาตรฐานกับไลบรารีอื่น ๆ (ใช้เวลานานคุณสามารถเรียกใช้งานที่เลือกโดยใช้ธง)

 cd ./tests_and_benchmarks/external/
pfreak benchmark

อ้างอิงความช่วยเหลือของ Pfreak สำหรับรายละเอียด

pfreak --help