RIOT.JS - Kurzanleitung

RIOT.js ist eine sehr kleine / leichte Webkomponenten-basierte UI-Bibliothek zum Entwickeln von Webanwendungen. Es kombiniert die Vorteile von React.JS und Polymer mit einer sehr präzisen Implementierung und einfachen Konstrukten zum Lernen und Verwenden. Die minimierte Version hat eine Größe von fast 10 KB.

Im Folgenden sind die wichtigsten Funktionen von RIOT.js aufgeführt

Ausdrucksbindungen

  • Sehr kleine Nutzlast während DOM-Updates und Reflows.

  • Änderungen werden von übergeordneten Tags zu untergeordneten Tags / Steuerelementen nach unten übertragen.

  • Verwendet vorkompilierte Ausdrücke und speichert sie für eine hohe Leistung zwischen.

  • Bietet eine gute Kontrolle über Lebenszyklusereignisse.

Befolgen Sie Standards

  • Kein proprietäres Ereignissystem

  • Keine Abhängigkeit von Polyfill-Bibliotheken.

  • Keine zusätzlichen Attribute zu vorhandenem HTML hinzugefügt.

  • Lässt sich gut in jQuery integrieren.

Grundwerte

RIOT.js wurde unter Berücksichtigung der folgenden Werte entwickelt.

  • Einfach und minimalistisch.

  • Einfach zu erlernen und umzusetzen.

  • Stellen Sie reaktive Ansichten bereit, um Benutzeroberflächen zu erstellen.

  • Stellen Sie eine Ereignisbibliothek bereit, um APIs mit unabhängigen Modulen zu erstellen.

  • Um das Anwendungsverhalten mit der Zurück-Schaltfläche des Browsers zu gewährleisten.

Es gibt zwei Möglichkeiten, RIOT js zu verwenden.

  • Local Installation - Sie können die RIOT-Bibliothek auf Ihren lokalen Computer herunterladen und in Ihren HTML-Code aufnehmen.

  • CDN Based Version - Sie können die RIOT-Bibliothek direkt aus dem Content Delivery Network (CDN) in Ihren HTML-Code aufnehmen.

Lokale Installation

  • Gehe zum https://riot.js.org um die neueste verfügbare Version herunterzuladen.

  • Jetzt heruntergeladen riot.min.js Datei in einem Verzeichnis Ihrer Website, zB / riotjs.

Beispiel

Jetzt können Sie die riotjs- Bibliothek wie folgt in Ihre HTML-Datei aufnehmen:

<!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>

Dies führt zu folgendem Ergebnis:

CDN-basierte Version

Sie können die RIOT js-Bibliothek direkt aus dem Content Delivery Network (CDN) in Ihren HTML-Code aufnehmen. Google und Microsoft bieten Content Delivery für die neueste Version.

Note - Wir verwenden in diesem Tutorial die CDNJS-Version der Bibliothek.

Beispiel

Lassen Sie uns nun das obige Beispiel mit der jQuery-Bibliothek von CDNJS umschreiben.

<!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>

Dies führt zu folgendem Ergebnis:

RIOT erstellt benutzerdefinierte, wiederverwendbare HTML-Tags. Diese Tags ähneln Webkomponenten und können über Seiten und Webanwendungen hinweg wiederverwendet werden.

Schritte zur Verwendung von RIOT

  • Importieren Sie riot.js in die HTML-Seite.

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

  • Starten Sie einen Skriptabschnitt und definieren Sie den Tag-Inhalt als HTML. Es kann auch ein Skript enthalten sein, das wir später im Tutorial sehen werden.

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

  • Definieren Sie ein Tag mit der Methode riot.tag (). Übergeben Sie ihm den Namen des Tags, des messageTag und der Variablen, die den Tag-Inhalt enthalten.

riot.tag("messageTag", tagHtml);

  • Hängen Sie das Tag mit der Methode riot.mount () ein. Übergeben Sie ihm den Namen des Tags messageTag. Beim Mounten wird der messageTag in allen Vorkommen auf der HTML-Seite bereitgestellt. Das MessageTag-Tag sollte vor dem Mounten mit riot.js definiert werden.

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

Es folgt das vollständige Beispiel.

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

RIOT erstellt benutzerdefinierte, wiederverwendbare HTML-Tags. Diese Tags ähneln Webkomponenten und können über Seiten und Webanwendungen hinweg wiederverwendet werden. Wenn Sie das RIOT-Framework in Ihre HTML-Seite aufnehmen, erstellt das importierte js eine Riot-Variable, die auf ein Riot-Objekt verweist. Dieses Objekt enthält die Funktionen, die für die Interaktion mit RIOT.j erforderlich sind, z. B. das Erstellen und Mounten von Tags.

Wir können Tags auf zwei Arten erstellen und verwenden.

  • Inline HTML- Durch Aufrufen der Funktion riot.tag (). Diese Funktion verwendet den Tag-Namen und die Tag-Definition, um ein Tag zu erstellen. Die Tag-Definition kann HTML, JavaScript und CSS usw. enthalten.

  • Seperate Tag file- Durch Speichern der Tag-Definition in der Tag-Datei. Diese Tag-Datei enthält eine Tag-Definition zum Erstellen eines Tags. Diese Datei muss anstelle des Aufrufs von riot.tag () importiert werden.

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

Es folgt das Beispiel eines Inline-Tags.

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

Es folgt das Beispiel eines externen Datei-Tags.

Beispiel

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>

Dies führt zu folgendem Ergebnis:

RIOT js verwendet {}, um Ausdrücke zu definieren. RIOT js erlaubt folgende Arten von Ausdrücken.

  • Simple Expression - Definieren Sie eine Variable und verwenden Sie sie innerhalb eines Tags.

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

  • Evaluate Expression - Bewerten Sie eine Variable, wenn Sie sie in einer Operation verwenden.

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

  • Get value from Options object - Um den Wert über Attribute an das Tag zu übergeben.

Beispiel

Das Folgende ist das vollständige Beispiel der obigen Konzepte.

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>

Dies führt zu folgendem Ergebnis:

RIOT js-Tags können einen eigenen Stil haben und wir können Stile innerhalb von Tags definieren, die nur den Inhalt innerhalb des Tags betreffen. Wir können eine Stilklasse auch mithilfe von Skripten innerhalb eines Tags festlegen. Im Folgenden finden Sie die Syntax zum Stylen von RIOT-Tags.

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>

Dies führt zu folgendem Ergebnis:

Bedingungen sind Konstrukte, mit denen Elemente von RIOT-Tags ein- / ausgeblendet werden. Im Folgenden sind die drei Bedingungen aufgeführt, die RIOT unterstützt:

  • if - Element basierend auf dem übergebenen Wert hinzufügen / entfernen.

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

  • show - zeigt ein Element mit style = "display:' ' "wenn wahr bestanden.

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

  • hide - versteckt ein Element mit style = "display:'none' "wenn wahr bestanden.

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

Beispiel

Es folgt das vollständige Beispiel.

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>

Dies führt zu folgendem Ergebnis:

Yield ist ein Mechanismus, um externen HTML-Inhalt in ein RIOT-Tag einzufügen. Es gibt mehrere Möglichkeiten, eine Rendite zu erzielen.

  • Simple Yield- Wenn wir einen einzelnen Platzhalter im Tag ersetzen möchten. Verwenden Sie dann diesen Mechanismus.

<custom3Tag>
   Hello <yield/>
</custom3Tag>
<custom3Tag><b>User</b></custom3Tag>

  • Multiple Yield- Wenn wir mehrere Platzhalter im Tag ersetzen möchten. Verwenden Sie dann diesen Mechanismus.

<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>

Beispiel

Es folgt das vollständige Beispiel.

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>

Dies führt zu folgendem Ergebnis:

Wir können HTML-Elementen ein Ereignis hinzufügen, ähnlich wie wir mit dem refs-Objekt auf HTML-Elemente zugreifen. In einem ersten Schritt fügen wir einem DOM-Element ein ref-Attribut hinzu und greifen mit this.ref im Skriptblock des Tags darauf zu.

  • Attach ref - Fügen Sie einem DOM-Element das ref-Attribut hinzu.

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

  • Use the refs object- Verwenden Sie jetzt das refs-Objekt im mount-Ereignis. Dieses Ereignis wird ausgelöst, wenn RIOT das benutzerdefinierte Tag bereitstellt und das refs-Objekt auffüllt.

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

Beispiel

Es folgt das vollständige Beispiel.

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>

Dies führt zu folgendem Ergebnis:

Wir können mit dem refs-Objekt auf HTML-Elemente zugreifen. Als ersten Schritt fügen wir einem DOM-Element ein ref-Attribut hinzu und greifen mit this.ref im Skriptblock des Tags darauf zu.

  • Attach ref - Fügen Sie einem DOM-Element das ref-Attribut hinzu.

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

  • Use the refs object- Verwenden Sie jetzt das refs-Objekt im mount-Ereignis. Dieses Ereignis wird ausgelöst, wenn RIOT das benutzerdefinierte Tag bereitstellt und das refs-Objekt auffüllt.

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

Beispiel

Es folgt das vollständige Beispiel.

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>

Dies führt zu folgendem Ergebnis:

Wir können das RIOT-Array von Grundelementen oder Objekten durchlaufen und die HTML-Elemente unterwegs erstellen / aktualisieren. Mit "jedem" Konstrukt können wir es erreichen.

  • Create array - Erstellen Sie ein Array von Objekten.

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

  • Add each attribute - Verwenden Sie jetzt das Attribut "each".

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

  • Iterate array of objects - Iterieren Sie das Array mithilfe von Objekteigenschaften.

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

Beispiel

Es folgt das vollständige Beispiel.

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>

Dies führt zu folgendem Ergebnis:

Über Mixin können wir gemeinsame Funktionen für Tags verwenden. Mixin kann eine Funktion, eine Klasse oder ein Objekt sein. Stellen Sie sich einen Fall von Authentifizierungsdienst vor, den jedes Tag verwenden sollte.

  • Define Mixin - Definieren Sie mixin mit der Methode riot.mixin (), bevor Sie mount () aufrufen.

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 - Initialisieren Sie das Mixin in jedem Tag.

this.mixin('authService')

  • Use mixin - Nach der Initialisierung kann Mixin innerhalb des Tags verwendet werden.

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

Beispiel

Es folgt das vollständige Beispiel.

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>

Dies führt zu folgendem Ergebnis:

Mit dem Observables-Mechanismus kann RIOT Ereignisse von einem Tag zu einem anderen senden. Die folgenden APIs sind wichtig, um RIOT-Observablen zu verstehen.

  • riot.observable(element)- Fügt Observer-Unterstützung für das angegebene Objektelement hinzu. Wenn das Argument leer ist, wird eine neue beobachtbare Instanz erstellt und zurückgegeben. Danach kann das Objekt Ereignisse auslösen und abhören.

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

  • element.trigger(events) - Führen Sie alle Rückruffunktionen aus, die das angegebene Ereignis abhören.

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

  • element.on(events, callback) - Hören Sie sich das angegebene Ereignis an und führen Sie den Rückruf jedes Mal aus, wenn ein Ereignis ausgelöst wird.

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

Beispiel

Es folgt das vollständige Beispiel.

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>

Dies führt zu folgendem Ergebnis:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved