Cample.js Téléchargement - Cample.js Téléchargement du code source

Cample.js

Composants tiers

3.2.1-beta.1

Télécharger

cample

Cample.js - L'un des frameworks les plus rapides sans Dom virtuel sur Internet!

Site Web • Documentation • Exemples • Exemples Source

Version alpha

À propos de Cample.js?

Cample.js est un framework JavaScript open source pour la création d'interfaces utilisateur. Le cadre fonctionne sur une approche basée sur les composants, où chaque composant peut être interconnecté en importation et en exportant l'état actuel. Cample.js n'utilise pas de Dom virtuel pour interagir avec le DOM réel, ce qui rend le processus de réactivité beaucoup plus rapidement.

Avantage principal

Diagramme de performances des frameworks et bibliothèques JavaScript.
Résultats basés sur 123 version

Installation

Pour créer une application, il est préférable d'utiliser la commande officielle Cample-Start pour générer un «point de départ», en choisissant parmi deux modèles actuellement disponibles.

npx cample-start

Les deux modèles principaux sont basés sur deux bundlers de modules tels que WebPack et Parcel. Pour sélectionner l'un d'eux dans la liste du terminal, vous pouvez sélectionner le plus approprié. Tous ont un soutien officiel.

De plus, pour installer uniquement le cadre, vous pouvez utiliser la commande suivante:

npm i cample

Avec cette installation, les fonctions seront toujours disponibles directement à partir du module. L'installation utilisant Cample-Start spécifie simplement les fichiers de démarrage de l'application.

Commencer

Après avoir défini le point de départ de l'application, le fichier JS contiendra le code suivant, ou le même, mais avec Import HTML.

Javascrip

 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 >

Vous pouvez modifier ce code en tout autre que vous voulez. Ce code est présenté comme un exemple du fonctionnement du cadre.

Article de lien: Début.

Réactivité

La réactivité dans le cadre est comprise comme la capacité, en réponse aux modifications de données, pour mettre à jour automatiquement les parties du code JavaScript ou des nœuds HTML qui ont utilisé ces données.

Ce diagramme montre que les données sont mises à jour lorsque vous utilisez une fonction qui la met à jour. Autrement dit, c'est comme si une mise à jour de données unique était en cours de création. Dans les versions futures, la structure peut changer légèrement en raison du traitement des données asynchrones.

Article de lien: Réactivité.