RIOT.JS - Panduan Cepat

RIOT.js adalah pustaka UI berbasis Komponen Web berukuran sangat kecil / ringan untuk mengembangkan aplikasi web. Ini menggabungkan manfaat React.JS dan Polymer dengan implementasi yang sangat ringkas dan konstruksi sederhana untuk dipelajari dan digunakan. Ini versi minified hampir berukuran 10KB.

Berikut adalah fitur utama RIOT.js

Ikatan Ekspresi

  • Muatan yang sangat kecil selama pembaruan dan penyesuaian DOM.

  • Perubahan menyebar ke bawah dari tag induk ke tag / kontrol anak.

  • Menggunakan ekspresi yang telah dikompilasi sebelumnya dan menyimpannya dalam cache untuk kinerja tinggi.

  • Memberikan kontrol yang baik atas peristiwa siklus proses.

Mengikuti Standar

  • Tidak ada sistem acara berpemilik

  • Tidak ada ketergantungan pada pustaka polyfill apa pun.

  • Tidak ada atribut tambahan yang ditambahkan ke HTML yang ada.

  • Terintegrasi dengan baik dengan jQuery.

Nilai-nilai inti

RIOT.js dikembangkan dengan mempertimbangkan nilai-nilai berikut.

  • Sederhana dan minimalis.

  • Mudah dipelajari dan diterapkan.

  • Sediakan Tampilan Reaktif untuk membangun antarmuka pengguna.

  • Sediakan Perpustakaan Acara untuk membangun API dengan modul independen.

  • Untuk menjaga perilaku aplikasi dengan tombol kembali browser.

Ada dua cara untuk menggunakan RIOT js.

  • Local Installation - Anda dapat mengunduh pustaka RIOT di komputer lokal Anda dan memasukkannya ke dalam kode HTML Anda.

  • CDN Based Version - Anda dapat menyertakan pustaka RIOT ke dalam kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN).

Instalasi Lokal

  • Pergi ke https://riot.js.org untuk mengunduh versi terbaru yang tersedia.

  • Sekarang taruh unduhan riot.min.js file di direktori situs Anda, misalnya / riotjs.

Contoh

Sekarang Anda dapat menyertakan pustaka riotjs di file HTML Anda sebagai berikut -

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

Ini akan menghasilkan hasil sebagai berikut -

Versi Berbasis CDN

Anda dapat menyertakan pustaka RIOT js ke dalam kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN). Google dan Microsoft menyediakan pengiriman konten untuk versi terbaru.

Note - Kami menggunakan versi CDNJS dari pustaka sepanjang tutorial ini.

Contoh

Sekarang mari kita tulis ulang contoh di atas menggunakan pustaka jQuery dari 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>

Ini akan menghasilkan hasil sebagai berikut -

RIOT bekerja dengan membuat tag html khusus yang dapat digunakan kembali. Tag ini mirip dengan komponen Web dan dapat digunakan kembali di seluruh halaman dan aplikasi web.

Langkah-langkah untuk menggunakan RIOT

  • Impor riot.js di halaman html.

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

  • Mulai bagian skrip dan tentukan konten tag sebagai html. Script juga dapat dimasukkan yang akan kita lihat nanti di tutorial.

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

  • Tentukan tag menggunakan metode riot.tag (). Berikan nama tag, messageTag, dan variabel yang berisi konten tag.

riot.tag("messageTag", tagHtml);

  • Pasang tag menggunakan metode riot.mount (). Berikan nama tagnya, messageTag. Proses pemasangan memasang messageTag di semua kemunculannya di halaman html. Tag MessageTag harus ditentukan menggunakan riot.js sebelum dipasang.

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

Berikut contoh lengkapnya.

Contoh

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

Ini akan menghasilkan hasil sebagai berikut -

RIOT bekerja dengan membuat tag html khusus yang dapat digunakan kembali. Tag ini mirip dengan komponen Web dan dapat digunakan kembali di seluruh halaman dan aplikasi web. Saat Anda menyertakan kerangka kerja RIOT di halaman HTML Anda, js yang diimpor membuat variabel kerusuhan yang mengarah ke objek kerusuhan. Objek ini berisi fungsi-fungsi yang diperlukan untuk berinteraksi dengan RIOT.js seperti membuat dan memasang tag.

Kita dapat membuat dan menggunakan tag dengan dua cara.

  • Inline HTML- Dengan memanggil fungsi riot.tag (). Fungsi ini mengambil nama tag dan definisi tag untuk membuat tag. Definisi tag dapat berisi HTML, JavaScript dan CSS dll.

  • Seperate Tag file- Dengan menyimpan definisi tag dalam file tag. File tag ini berisi definisi tag untuk membuat tag. File ini perlu diimpor sebagai ganti panggilan riot.tag ().

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

Berikut adalah contoh tag inline.

Contoh

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

Ini akan menghasilkan hasil sebagai berikut -

Berikut adalah contoh tag file eksternal.

Contoh

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>

Ini akan menghasilkan hasil sebagai berikut -

RIOT js menggunakan {} untuk mendefinisikan ekspresi. RIOT js memungkinkan jenis ekspresi berikut.

  • Simple Expression - Tentukan variabel dan gunakan dalam tag.

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

  • Evaluate Expression - Mengevaluasi variabel saat digunakan dalam operasi.

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

  • Get value from Options object - Untuk mendapatkan nilai yang diteruskan ke tag melalui atribut.

Contoh

Berikut adalah contoh lengkap dari konsep di atas.

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>

Ini akan menghasilkan hasil sebagai berikut -

Tag RIOT js dapat memiliki gayanya sendiri dan kita dapat menentukan gaya di dalam tag yang hanya akan memengaruhi konten di dalam tag. Kita juga dapat mengatur kelas gaya menggunakan skrip juga di dalam tag. Berikut ini adalah sintaks bagaimana mencapai gaya 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>

Ini akan menghasilkan hasil sebagai berikut -

Kondisional adalah konstruksi yang digunakan untuk menampilkan / menyembunyikan elemen tag RIOT. Berikut adalah tiga kondisi yang didukung RIOT -

  • if - tambahkan / hapus elemen berdasarkan nilai yang diteruskan.

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

  • show - menunjukkan elemen menggunakan style = "display:' ' "jika dinyatakan benar.

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

  • hide - sembunyikan elemen menggunakan style = "display:'none' "jika dinyatakan benar.

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

Contoh

Berikut contoh lengkapnya.

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>

Ini akan menghasilkan hasil sebagai berikut -

Hasil adalah mekanisme untuk memasukkan konten html eksternal ke dalam tag RIOT. Ada banyak cara untuk menghasilkan.

  • Simple Yield- Jika kami ingin mengganti satu placeholder di tag. Kemudian gunakan mekanisme ini.

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

  • Multiple Yield- Jika kami ingin mengganti beberapa placeholder di tag. Kemudian gunakan mekanisme ini.

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

Contoh

Berikut contoh lengkapnya.

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>

Ini akan menghasilkan hasil sebagai berikut -

Kita dapat melampirkan acara ke elemen HTML dengan cara yang sama seperti kita mengakses elemen HTML menggunakan objek refs. Sebagai langkah pertama kita menambahkan atribut ref ke elemen DOM dan mengaksesnya menggunakan this.ref di blok skrip tag.

  • Attach ref - Tambahkan atribut ref ke elemen DOM.

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

  • Use the refs object- Sekarang gunakan objek refs di event mount. Peristiwa ini dijalankan ketika RIOT memasang tag kustom dan mengisi objek refs.

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

Contoh

Berikut contoh lengkapnya.

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>

Ini akan menghasilkan hasil sebagai berikut -

Kita dapat mengakses elemen HTML menggunakan objek refs. Sebagai langkah pertama kita menambahkan atribut ref ke elemen DOM dan mengaksesnya menggunakan this.ref di blok skrip tag.

  • Attach ref - Tambahkan atribut ref ke elemen DOM.

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

  • Use the refs object- Sekarang gunakan objek refs di event mount. Peristiwa ini dijalankan ketika RIOT memasang tag kustom dan mengisi objek refs.

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

Contoh

Berikut contoh lengkapnya.

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>

Ini akan menghasilkan hasil sebagai berikut -

Kita dapat melakukan iterasi melalui array RIOT dari primitif atau Objek dan membuat / memperbarui elemen html saat dalam perjalanan. Menggunakan "setiap" konstruksi kita bisa mencapainya.

  • Create array - Buat array objek.

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

  • Add each attribute - Sekarang gunakan atribut "each".

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

  • Iterate array of objects - Iterasi array menggunakan properti objek.

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

Contoh

Berikut contoh lengkapnya.

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>

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

Ini akan menghasilkan hasil sebagai berikut -

Melalui Mixin, kami dapat berbagi fungsionalitas umum di antara tag. Mixin dapat berupa fungsi, kelas, atau objek. Pertimbangkan kasus Layanan Otentikasi yang harus digunakan setiap tag.

  • Define Mixin - Tentukan mixin menggunakan metode riot.mixin () sebelum memanggil 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 - Inisialisasi mixin di setiap tag.

this.mixin('authService')

  • Use mixin - Setelah menginisialisasi, mixin dapat digunakan di dalam tag.

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

Contoh

Berikut contoh lengkapnya.

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>

Ini akan menghasilkan hasil sebagai berikut -

Mekanisme yang dapat diamati memungkinkan RIOT mengirim peristiwa dari satu tag ke tag lainnya. API berikut penting untuk memahami observasi RIOT.

  • riot.observable(element)- Menambahkan dukungan Observer untuk elemen objek tertentu atau jika argumen kosong, instance baru yang dapat diamati dibuat dan dikembalikan. Setelah ini, objek dapat memicu dan mendengarkan peristiwa.

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

  • element.trigger(events) - Jalankan semua fungsi panggilan balik yang mendengarkan acara yang diberikan.

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

  • element.on(events, callback) - Dengarkan acara yang diberikan dan jalankan panggilan balik setiap kali acara dipicu.

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

Contoh

Berikut contoh lengkapnya.

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>

Ini akan menghasilkan hasil sebagai berikut -

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