Cample.js Скачать - Cample.js исходный код скачать

Cample.js

Сторонние компоненты

3.2.1-beta.1

Скачать

приборной

Cample.js - одна из самых быстрых рамок без виртуального DOM в Интернете!

Веб -сайт • Документация • Примеры • Примеры источника

Альфа -версия

О CAMEL.JS?

Cample.js - это фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Структура работает на компонентном подходе, где каждый компонент может быть взаимосвязан путем импорта и экспорта текущего состояния. Cample.js не использует виртуальный DOM для взаимодействия с реальным DOM, что делает процесс реактивности намного быстрее.

Основное преимущество

Схема производительности фреймворков и библиотек JavaScript.
Результаты на основе 123 выпуска

Установка

Чтобы создать приложение, лучше использовать официальную команду Commet-Start для генерации «отправной точки», выбирая из двух доступных в настоящее время шаблонов.

npx cample-start

Основные два шаблона основаны на двух модульных бочках, таких как WebPack и Parcel. Чтобы выбрать одного из них из списка в терминале, вы можете выбрать наиболее подходящую. Все они имеют официальную поддержку.

Кроме того, чтобы установить только платформу, вы можете использовать следующую команду:

npm i cample

С помощью этой установки функции по -прежнему будут доступны непосредственно из модуля. Установка с использованием Commet-Start просто указывает начальные файлы для приложения.

Начиная

После установки начальной точки приложения файл JS будет содержать следующий код или тот же, но с HTML -импортом.

JavaScript

 const newComponent = component (
  "new-component" ,
  `<div class="component">
    <div class="clicks" data-value="{{dynamicData}}">Clicks:{{dynamicData}}</div>
    <button class="button">Click</button>
  </div>` ,
  {
    script : ( { element , functions } ) => {
      const button = element . querySelector ( ".button" ) ;
      const updateFunction = ( ) => {
        functions ?. updateClicks ( ( data ) => {
          return data + 1 ;
        } ) ;
      } ;
      button . addEventListener ( "click" , updateFunction ) ;
    } ,
    data : ( ) => {
      return {
        dynamicData : 0 ,
      } ;
    } ,
    dataFunctions : {
      updateClicks : "dynamicData"
    } ,
  }
) ;
cample ( "#app" , {
  trimHTML : true ,
} ) . render (
`<template data-cample="new-component">
</template>` ,
  {
    newComponent
  }
) ;

HTML

 < div id =" app " > </ div >

Вы можете изменить этот код на любой другой, который вы хотите. Этот код представлен как пример того, как работает структура.

Ссылка на статью: Начало работы.

Реактивность

Реакционная способность в структуре понимается как способность в ответ на изменения данных автоматически обновлять части кода JavaScript или HTML -узлов, которые использовали эти данные.

Эта диаграмма показывает, что данные обновляются при использовании функции, которая обновляет ее. То есть, как будто создается обновление данных с одним нагрузкой. В будущих версиях структура может немного измениться из -за обработки асинхронных данных.

Ссылка статьи: Реакционная способность.