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