CalDOM下載 - CalDOM源代碼下載

不可知，反應性和極簡主義（3KB）JavaScript UI庫，可直接訪問本機DOM。

Caldom沒有將您帶入特定於圖書館的魔法世界，而是讓您在保持反應性的同時直接訪問DOM ？因此，您可以充分利用本機API並將其與其他庫混合，以在開發過程中獲得卓越的性能和靈活性。

如果可以的話，可以使用2合1虛擬dom＆no-virtual-dom方法。

0️⃣零工具，0️⃣零依賴項，0️⃣零新語法，只是純JS。

從本質上講，Caldom只是本機節點/元素周圍的包裝器。與香草/純JavaScript相比，總體性能下降約為0.04倍。這是基於處理單元素和多元素實例的平均單位級別基準：對Vanilla JS，JQuery，React JS，Vue等的基準結果。

官方網站：caldom.org

文檔：caldom.org/docs/

你好世界！

將其用作可連鎖的DOM Traverser和操縱器，一種輕巧的jQuery替代方案。

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

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

你好世界 - 反應

建立反應性組件。將其用作輕巧的React JS/VUE JS替代方案。不使用類似於React Hook的類，但更簡單。

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

你好世界 - 反應性（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元素

本地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內容。 Caldom的API受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節點參考。即使渲染（）極大地改變DOM結構，Caldom也可以使它們保持同步。

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

增壓本地網絡組件

Caldom與Web組件無縫集成。使用Caldom創建狀態和反應性的Web組件。它還接受Web組件作為輸入。

 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代碼中的這些自定義元素。請注意，瀏覽器對Web組件的支持相對較新（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'] ='dights_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-j將其縮小外，沒有其他巨大的構建過程。

這只需在./dist/文件夾中構建.min.js＆.min.mjs.js＆Ressect.map文件。

 # 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

展開

CalDOM

你好世界！

你好世界 - 反應

你好世界 - 反應性（ES6）

反應性天然DOM元素

使現有的HTML反應性

召喚兩個世界的力量！

增壓本地網絡組件

您甚至可以使jQuery反應

Caldom也在節點JS上運行

開始

CDN

下載

將其用作模塊

貢獻

關鍵原則

待辦事項

建築

單元測試和基準測試

v folder

ng vcl

xant

BldHelper（Borland 開發者助手）

vue component creator plugin

empathy

chat.petals.dev

GPT Prompt Templates

GPTyped

v folder

ng vcl

xant

Google Dorks

shepherd

mongo express