CalDOM
ve++
Агностическая, реактивная и минималистская (3KB) библиотека UI JavaScript с прямым доступом к собственному DOM.
Вместо того, чтобы втянуть вас в магический мир, конкретный библиотека, Caldom позволяет вам полностью получить доступ к DOM напрямую, сохраняя реактивность ? Таким образом, вы можете в полной мере воспользоваться Native APIS и смешать его с другими библиотеками, чтобы получить превосходную производительность и гибкость в процессе разработки.
Виртуальная дома 2-в-1 и без виртуального дома, если хотите.
0 ⃣ нулевой инструмент, 0⃣ нулевые зависимости, 0⃣ нулевой новый синтаксис, просто чистый JS.
По сути, Caldom - это просто обертка вокруг нативного узла/элемента. Общее падение производительности составляет около 0,04x по сравнению с ванилью/чистым JavaScript. Это основано на усредненных контрольных показателях на уровне единиц при обработке экземпляров с одним и множественным элементом: просмотреть результаты в отношении ванили 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." ) ) ; Построить реактивные компоненты. Используйте его как легкую альтернативу React 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 ) ; 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. ?" ; Не фанат рендеринга и виртуальной вещей? Используйте Caldom для Update () Предварительно определенное 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 ) ; CALDOMES интегрируется с веб -компонентами. Используйте Caldom, чтобы создать Stateful и реактивные веб -компоненты. Он также принимает веб -компоненты в качестве входных данных.
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 использует переменную «_» в качестве глобальной короткой руки по умолчанию. Чтобы использовать другой псевдоним, установите окно ['_ Cal_DOM_ALIAS'] = 'DIGNAL_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 для его министерства.
Это просто создает файлы .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
