CalDOM
ve++
원시 DOM에 직접 액세스 할 수있는 불가지론, 반응성 및 미니멀리스트 (3KB) JavaScript UI 라이브러리.
Caldom은 도서관 별 마법의 세계로 당신을 끌어 당기는 대신 반응성을 유지하면서 DOM에 직접 접근 할 수있게 해줍니다. 따라서 기본 API를 최대한 활용하여 다른 라이브러리와 혼합하여 개발 프로세스에서 뛰어난 성능 및 유연성을 얻을 수 있습니다.
당신이 원한다면 2-in-1 가상-돔 및 비정상적인 도형 접근법.
0️ 0 Zero 툴링, 0& 0의 종속성, 0 19 Zero New Syntax, Just Pure JS.
본질적으로, Caldom은 기본 노드/요소 주변의 래퍼 일뿐입니다. 전체 성능 강하는 바닐라/순수한 자바 스크립트에 비해 약 0.04 배입니다. 이는 단일 및 다중 요소 인스턴스를 처리 할 때 평균 단위 레벨 벤치 마크를 기반으로합니다. 바닐라 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." ) ) ; 반응성 구성 요소를 구축하십시오. 가벼운 반응 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 ?" ; 또한 확장 된 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 ) ; 네이티브 돔 노드는 일류 시민입니다. 또한, 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. ?" ; 렌더링 및 가상도의 팬이 아닌가? Caldom을 사용하여 업데이트 () 미리 정의 된 HTML 컨텐츠를 반응 적으로 사용하십시오. Caldom 's 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은 Render ()가 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 ) ; 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 > 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!" 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를 방문하여 많은 라이브 코드 예제를 실험하십시오.
< script src =" https://unpkg.com/caldom " > </ script >Caldom은 기본적으로 '_'변수를 전역으로 사용하고 있습니다. 다른 별칭을 사용하려면 Window를로드하기 전에 [ '_ cal_dom_alias'] = 'miver_alias'를 설정하십시오.
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 Diffing 알고리즘을 추가로 최적화하십시오. 여기에서 벤치 마크를 참조하십시오
더 큰 구현을 벤치마킹해야합니다 (각 셀이 하위 구성 요소 인 스프레드 시트와 같이?)
현재 전체 소스 코드는 하나의 파일에 있습니다. 따라서 uglify-JS를 사용하여 그것을 미치는 것 외에는 거대한 빌드 프로세스가 없습니다.
이것은 ./dist/ 폴더에 .min.js & .min.mjs.js & related .map 파일을 빌드합니다.
# Install dev dependencies
npm install
# Build
npm run build테스트 및 벤치 마크 소스는 ./tests_and_benchmarks에 있습니다. Caldom은 Pfreak라는 새로운 단위 테스트 및 벤치마킹 프레임 워크를 사용하고 있습니다. 이는 Caldom의 부업 프로젝트로 만들어졌습니다.
최신 빌드의 단위 테스트 결과는 caldom.org/tests/에서 제공됩니다.
설치 후 PFREAK를 시작하여 Sym Links를 올바르게 설정하십시오
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
