RIOT.JS - Guida rapida

RIOT.js è una libreria UI basata su componenti Web di dimensioni molto ridotte / leggera per lo sviluppo di applicazioni web. Combina i vantaggi di React.JS e Polymer con un'implementazione molto concisa e costrutti semplici da apprendere e utilizzare. La sua versione ridotta è di quasi 10 KB.

Di seguito sono riportate le caratteristiche principali di RIOT.js

Associazioni di espressioni

Payload molto piccolo durante gli aggiornamenti DOM e i reflow.
Le modifiche si propongono verso il basso dai tag principali ai tag / controlli figli.
Utilizza espressioni precompilate e memorizzale nella cache per prestazioni elevate.
Fornisce una buona interpretazione degli eventi del ciclo di vita.

Segue gli standard

Nessun sistema di eventi proprietario
Nessuna dipendenza da alcuna libreria polyfill.
Nessun attributo aggiuntivo aggiunto all'HTML esistente.
Si integra bene con jQuery.

Valori fondamentali

RIOT.js è sviluppato considerando i seguenti valori.

Semplice e minimalista.
Facile da imparare e da implementare.
Fornire visualizzazioni reattive per creare interfacce utente.
Fornire libreria di eventi per creare API con moduli indipendenti.
Per prendersi cura del comportamento dell'applicazione con il pulsante Indietro del browser.

Esistono due modi per utilizzare RIOT js.

Local Installation - Puoi scaricare la libreria RIOT sul tuo computer locale e includerla nel tuo codice HTML.
CDN Based Version - Puoi includere la libreria RIOT nel tuo codice HTML direttamente da Content Delivery Network (CDN).

Installazione locale

Vai al https://riot.js.org per scaricare l'ultima versione disponibile.
Ora metti scaricato riot.min.js file in una directory del tuo sito web, ad esempio / riotjs.

Esempio

Ora puoi includere la libreria riotjs nel tuo file HTML come segue:

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

Versione basata su CDN

Puoi includere la libreria RIOT js nel tuo codice HTML direttamente da Content Delivery Network (CDN). Google e Microsoft forniscono contenuti per la versione più recente.

Note - Stiamo utilizzando la versione CDNJS della libreria durante questo tutorial.

Esempio

Ora riscriviamo l'esempio sopra usando la libreria jQuery da CDNJS.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

RIOT funziona costruendo tag html personalizzati e riutilizzabili. Questi tag sono simili ai componenti Web e sono riutilizzabili su pagine e app Web.

Passaggi per utilizzare RIOT

Importa riot.js nella pagina html.

<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>

Avvia una sezione di script e definisci il contenuto del tag come html. Può anche essere incluso uno script che vedremo più avanti nel tutorial.

var tagHtml = "<h1>Hello World!</h1>";

Definisci un tag utilizzando il metodo riot.tag (). Passa il nome del tag, messageTag e variabile contenente il contenuto del tag.

riot.tag("messageTag", tagHtml);

Montare il tag utilizzando il metodo riot.mount (). Passa il nome del tag, messageTag. Il processo di montaggio monta il messageTag in tutte le sue occorrenze nella pagina html. Il tag MessageTag deve essere definito utilizzando riot.js prima del montaggio.

riot.mount("messageTag");
</script>

Di seguito è riportato l'esempio completo.

Esempio

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

RIOT funziona costruendo tag html personalizzati e riutilizzabili. Questi tag sono simili ai componenti Web e sono riutilizzabili su pagine e app Web. Quando includi il framework RIOT nella tua pagina HTML, il js importato crea una variabile riot che punta a un oggetto riot. Questo oggetto contiene le funzioni necessarie per interagire con RIOT.js come la creazione e il montaggio dei tag.

Possiamo creare e utilizzare i tag in due modi.

Inline HTML- Chiamando la funzione riot.tag (). Questa funzione prende il nome del tag e la definizione del tag per creare un tag. La definizione del tag può contenere HTML, JavaScript e CSS ecc.
Seperate Tag file- Memorizzando la definizione del tag nel file di tag. Questo file di tag contiene la definizione di tag per creare un tag. Questo file deve essere importato al posto della chiamata riot.tag ().

<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<

Di seguito è riportato l'esempio di tag inline.

Esempio

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

Di seguito è riportato l'esempio di tag di file esterno.

Esempio

messageTag.tag

<messageTag>
   <h1>Hello World!</h1>
</messageTag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script src = "messageTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("messageTag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

RIOT js usa {} per definire le espressioni. RIOT js consente i seguenti tipi di espressioni.

Simple Expression - Definisci una variabile e usala all'interno di un tag.

<customTag>
   <h1>{title}</h1>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
   </script>
</customTag>

Evaluate Expression - Valuta una variabile quando viene utilizzata in un'operazione.

<customTag>
   <h2>{val * 5}</h2>
   <script>
      this.val = 4;
   </script>
</customTag>

Get value from Options object - Per ottenere il valore passato al tag tramite attributi.

Esempio

Di seguito è riportato l'esempio completo dei concetti di cui sopra.

customTag.tag

<customTag>
   <h1>{title}</h1>
   <h2>{val * 5}</h2>
   <h2>{opts.color}</h2>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
      this.val = 4;
   </script>
</customTag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <customTag color="red"></customTag>
      <script src = "customTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("customTag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

I tag RIOT js possono avere il proprio stile e possiamo definire stili all'interno dei tag che influenzeranno solo il contenuto all'interno del tag. Possiamo anche impostare una classe di stile utilizzando script e all'interno di un tag. Di seguito è riportata la sintassi su come ottenere lo stile dei tag RIOT.

custom1Tag.tag

<custom1Tag>
   <h1>{title}</h1>
   <h2 class = "subTitleClass">{subTitle}</h2>
   <style>
   h1 {
      color: red;
   }
   .subHeader {
      color: green;
   }
   </style>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
      this.subTitle = "Learning RIOT JS";
      this.subTitleClass = "subHeader";
   </script>
</custom1Tag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <h1>Non RIOT Heading</h1>
      <custom1Tag></custom1Tag>
      <script src = "custom1Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom1Tag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

I condizionali sono costrutti utilizzati per mostrare / nascondere gli elementi dei tag RIOT. Di seguito sono riportati i tre condizionali supportati da RIOT:

if - aggiungi / rimuovi elemento in base al valore passato.

<custom2Tag>
   <h2 if = {showMessage}>Using if!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

show - mostra un elemento utilizzando style = "display:' ' "se passato vero.

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

hide - nasconde un elemento usando style = "display:'none' "se passato vero.

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

Esempio

Di seguito è riportato l'esempio completo.

custom2Tag.tag

<custom2Tag>
   <h2 if = {showMessage}>Using if!</h2>
   <h2 if = {show}>Welcome!</h1>
   <h2 show = {showMessage}>Using show!</h2>
   <h2 hide = {show}>Using hide!</h2>
   <script>
      this.showMessage = true;
      this.show = false; 
   </script>
</custom2Tag>

custom2.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom2Tag></custom2Tag>
      <script src = "custom2Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom2Tag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

Il rendimento è un meccanismo per inserire contenuto html esterno in un tag RIOT. Esistono diversi modi per ottenere un rendimento.

Simple Yield- Se vogliamo sostituire un singolo segnaposto nel tag. Quindi usa questo meccanismo.

<custom3Tag>
   Hello <yield/>
</custom3Tag>

<custom3Tag><b>User</b></custom3Tag>

Multiple Yield- Se vogliamo sostituire più segnaposto nel tag. Quindi usa questo meccanismo.

<custom4Tag>
   <br/><br/>
   Hello
   <yield from = "first"/>
   <br/><br/>
   Hello 
   <yield from = "second"/>
</custom4Tag>

<custom4Tag>
   <yield to = "first">User 1</yield>
   <yield to = "second">User 2</yield>
</custom4Tag>

Esempio

Di seguito è riportato l'esempio completo.

custom3Tag.tag

<custom3Tag>
   Hello <yield/>
</custom3Tag>

custom4Tag.tag

<custom4Tag>
   <br/><br/>
   Hello
   <yield from = "first"/>
   <br/><br/>
   Hello 
   <yield from = "second"/>
</custom4Tag>

custom3.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom3Tag><b>User</b></custom3Tag>
      <custom4Tag>
         <yield to = "first">User 1</yield>
         <yield to = "second">User 2</yield>
      </custom4Tag>   
      <script src = "custom3Tag.tag" type = "riot/tag"></script>
      <script src = "custom4Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom3Tag");
         riot.mount("custom4Tag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

Possiamo allegare un evento agli elementi HTML nello stesso modo in cui accediamo agli elementi HTML utilizzando l'oggetto refs. Come primo passaggio aggiungiamo un attributo ref a un elemento DOM e vi accediamo utilizzando this.ref nel blocco di script del tag.

Attach ref - Aggiungi l'attributo ref a un elemento DOM.

<button ref = "clickButton">Click Me!</button>

Use the refs object- Ora usa l'oggetto refs nell'evento mount. Questo evento viene generato quando RIOT monta il tag personalizzato e popola l'oggetto refs.

this.on("mount", function() {
   console.log("Mounting");
   console.log(this.refs.username.value);
})

Esempio

Di seguito è riportato l'esempio completo.

custom5Tag.tag

<custom5Tag>
   <form>
      <input ref = "username" type = "text" value = "Mahesh"/>
      <input type = "submit" value = "Click Me!" />
   </form>
   <script>
      this.on("mount", function() {
         console.log("Mounting");
         console.log(this.refs.username.value); 
      })
   </script>
</custom5Tag>

custom5.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom5Tag></custom5Tag>
      <script src = "custom5Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom5Tag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

Possiamo accedere agli elementi HTML usando l'oggetto refs. Come primo passaggio aggiungiamo un attributo ref a un elemento DOM e vi accediamo utilizzando this.ref nel blocco di script del tag.

Attach ref - Aggiungi l'attributo ref a un elemento DOM.

<button ref = "clickButton">Click Me!</button>

Use the refs object- Ora usa l'oggetto refs nell'evento mount. Questo evento viene generato quando RIOT monta il tag personalizzato e popola l'oggetto refs.

this.on("mount", function() {
   this.refs.clickButton.onclick = function(e) {
      console.log("clickButton clicked");
      return false;
   };
})

Esempio

Di seguito è riportato l'esempio completo.

custom6Tag.tag

<custom6Tag>
   <form ref = "customForm">
      <input ref = "username" type = "text" value = "Mahesh"/>
      <button ref = "clickButton">Click Me!</button>
      <input type = "submit" value = "Submit" />
   </form>
   <script>
      this.on("mount", function() {
         this.refs.clickButton.onclick = function(e) {
            console.log("clickButton clicked");
            return false;
         };
         this.refs.customForm.onsubmit = function(e) {
            console.log("Form submitted");
            return false;
         };
      }) 
   </script>
</custom6Tag>

custom6.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom6Tag></custom6Tag>
      <script src = "custom6Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom6Tag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

Possiamo iterare attraverso l'array RIOT di primitive o di oggetti e creare / aggiornare gli elementi html in movimento. Usando "ogni" costrutto possiamo realizzarlo.

Create array - Crea un array di oggetti.

this.cities = [
   { city : "Shanghai" , country:"China" , done: true },
   { city : "Seoul"    , country:"South Korea" },
   { city : "Moscow"   , country:"Russia"      }
];

Add each attribute - Ora usa l'attributo "each".

<ul>
   <li each = { cities } ></li>
</ul>

Iterate array of objects - Itera l'array utilizzando le proprietà dell'oggetto.

<input type = "checkbox" checked = { done }> { city } - { country }

Esempio

Di seguito è riportato l'esempio completo.

custom7Tag.tag

<custom7Tag>
   <style>
      ul {
         list-style-type: none;
      }
   </style>
   <ul>
      <li each = { cities } >
         <input type = "checkbox" checked = { done }> { city } - { country }
      </li>
   </ul>
   <script>
      this.cities = [
         { city : "Shanghai" , country:"China" , done: true },
         { city : "Seoul"    , country:"South Korea" },
         { city : "Moscow"   , country:"Russia"      }
      ]; 
   </script>
</custom7Tag>

custom7.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom7Tag></custom6Tag>
      <script src = "custom7Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom7Tag");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

Attraverso Mixin, possiamo condividere funzionalità comuni tra i tag. Mixin può essere una funzione, una classe o un oggetto. Considera un caso di servizio di autenticazione che ogni tag dovrebbe utilizzare.

Define Mixin - Definisci mixin usando il metodo riot.mixin () prima di chiamare mount ().

riot.mixin('authService', {
   init: function() {
      console.log('AuthService Created!')
   },

   login: function(user, password) {
      if(user == "admin" && password == "admin"){
         return 'User is authentic!'
      }else{
         return 'Authentication failed!'
      }   
   }
});

Initialize mixin - Inizializza il mixin in ogni tag.

this.mixin('authService')

Use mixin - Dopo l'inizializzazione, mixin può essere utilizzato all'interno del tag.

this.message = this.login("admin","admin");

Esempio

Di seguito è riportato l'esempio completo.

custom8Tag.tag

<custom8Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin","admin")
   </script>
</custom8Tag>

custom9Tag.tag

<custom9Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin1","admin")
   </script>
</custom9Tag>

custom8.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom8Tag></custom8Tag>
      <custom9Tag></custom9Tag>
      <script src = "custom8Tag.tag" type = "riot/tag"></script>
      <script src = "custom9Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mixin('authService', {
            init: function() {
               console.log('AuthService Created!')
            },
            login: function(user, password) {
               if(user == "admin" && password == "admin"){
                  return 'User is authentic!'
               }else{
                  return 'Authentication failed!'
               }   
            }
         });
         riot.mount("*");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

Il meccanismo degli osservabili consente a RIOT di inviare eventi da un tag a un altro. Le seguenti API sono importanti per comprendere gli osservabili RIOT.

riot.observable(element)- Aggiunge il supporto Observer per l'elemento oggetto specificato o se l'argomento è vuoto viene creata e restituita una nuova istanza osservabile. Dopo questo l'oggetto è in grado di attivare e ascoltare gli eventi.

var EventBus = function(){
   riot.observable(this);
}

element.trigger(events) - Esegue tutte le funzioni di callback che ascoltano l'evento dato.

sendMessage() {
   riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
}

element.on(events, callback) - Ascolta l'evento dato ed esegui la richiamata ogni volta che viene attivato un evento.

riot.eventBus.on('message', function(input) {      
   console.log(input);
});

Esempio

Di seguito è riportato l'esempio completo.

custom10Tag.tag

<custom10Tag>
   <button onclick = {sendMessage}>Custom 10</button>
   <script>
      sendMessage() {
         riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
      }
   </script>    
</custom10Tag>

custom11Tag.tag

<custom11Tag>
   <script>
      riot.eventBus.on('message', function(input) {      
         console.log(input);
      });
   </script>    
</custom11Tag>

custom9.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom10Tag></custom10Tag>
      <custom11Tag></custom11Tag>
      <script src = "custom10Tag.tag" type = "riot/tag"></script>
      <script src = "custom11Tag.tag" type = "riot/tag"></script>
      <script>
         var EventBus = function(){
            riot.observable(this);
         }
         riot.eventBus = new EventBus();
         riot.mount("*");
      </script>
   </body>
</html>

Questo produrrà il seguente risultato:

↰ Previous page

RIOT.JS - Guida rapida

Associazioni di espressioni

Segue gli standard

Valori fondamentali

Installazione locale

Esempio

Versione basata su CDN

Esempio

Passaggi per utilizzare RIOT

Esempio

Esempio

Esempio

messageTag.tag

index.htm

Esempio

customTag.tag

index.htm

custom1Tag.tag

index.htm

Esempio

custom2Tag.tag

custom2.htm

Esempio

custom3Tag.tag

custom4Tag.tag

custom3.htm

Esempio

custom5Tag.tag

custom5.htm

Esempio

custom6Tag.tag

custom6.htm

Esempio

custom7Tag.tag

custom7.htm

Esempio

custom8Tag.tag

custom9Tag.tag

custom8.htm

Esempio

custom10Tag.tag

custom11Tag.tag

custom9.htm

Tutorial RIOT.JS

Risorse utili di RIOT.JS