Cample.js

Cample.js - eines der schnellsten Frameworks ohne virtuelles Dom im Internet!

Website • Dokumentation • Beispiele • Beispiele Quelle

Alpha -Version

Über Cample.js?

Cample.js ist ein Open -Source -JavaScript -Framework zum Erstellen von Benutzeroberflächen. Das Framework funktioniert auf einem Komponentenansatz, bei dem jede Komponente durch Importieren und Exportieren des aktuellen Zustands miteinander verbunden werden kann. Cample.js verwendet kein virtuelles DOM, um mit dem realen DOM zu interagieren, was den Reaktivitätsprozess viel schneller macht.

Hauptvorteil

Leistungsdiagramm von JavaScript -Frameworks und Bibliotheken.
Ergebnisse basierend auf 123 Release

Installation

Um eine Anwendung zu erstellen, ist es besser, den offiziellen Befehl Cample-Start zu verwenden, um einen „Ausgangspunkt“ zu generieren, der aus zwei derzeit verfügbaren Vorlagen ausgewählt wird.

npx cample-start

Die beiden Hauptvorlagen basieren auf zwei Modulbundlern wie Webpack und Paket. Um eine davon aus der Liste im Terminal auszuwählen, können Sie die am besten geeigneten auswählen. Alle von ihnen haben offizielle Unterstützung.

Um nur das Framework zu installieren, können Sie den folgenden Befehl verwenden:

npm i cample

Mit dieser Installation sind Funktionen weiterhin direkt im Modul verfügbar. Die Installation mit Cample-Start gibt lediglich die Startdateien für die Anwendung an.

Erste Schritte

Nach dem Einstellen des Startpunkts der Anwendung enthält die JS -Datei den folgenden oder denselben Code, jedoch mit HTML -Import.

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 >

Sie können diesen Code in alle anderen möchten, die Sie möchten. Dieser Code wird als Beispiel dafür dargestellt, wie das Framework funktioniert.

Linkartikel: Erste Schritte.

Reaktivität

Die Reaktivität im Framework wird als Reaktion auf Datenänderungen verstanden, um Teile des JavaScript -Code oder HTML -Knoten automatisch zu aktualisieren, die diese Daten verwendeten.

Dieses Diagramm zeigt, dass Daten aktualisiert werden, wenn Sie eine Funktion verwenden, die diese aktualisiert. Das heißt, es ist, als ob ein einzelnes Datenaktualisierung erstellt wird. In zukünftigen Versionen kann sich die Struktur aufgrund der Verarbeitung asynchroner Daten geringfügig ändern.

Linkartikel: Reaktivität.

Changelog

Changelog

Beitrag

Wenn Sie zu diesem Framework beitragen möchten, finden Sie unter beitragenden Leitfaden. Danke schön!

Inspiration

Wenn Ihnen das Framework gefällt, ist es sehr cool, wenn Sie das Repository mit einem Stern bewerten ★

Kontakt

E -Mail - [email protected]

Lizenz

Lizenziert unter MIT